SWCharacter Designer

SWCharacter Designer lets you place a single typographic symbol on an animated canvas and explore its appearance in real time. Click anywhere on the canvas to place your character, then use the right-panel controls to customize everything from font and color to three independent animations.

How to Use

1. Click the canvas to snap a character to the nearest grid cell. Click again anywhere to move it.
2. Adjust the symbol by typing a single character into the Symbol box, then choosing a font and dragging the Size slider. Changes apply immediately.
3. Open Fill Color to pick a hue and set opacity.
4. Open Stroke / Border and check Add stroke / border to reveal color and weight controls for an outline around the symbol.
5. Place a character, then expand any animation section to bring the character to life.
6. Use Clear to remove the character, or Save Image to download a PNG of the canvas. Press G to toggle the grid.

The Three Animations

All three animations are independent — you can run any combination at once. They activate only after a character has been placed.

• 💓 Breathe — The character's size pulses up and down like a heartbeat. Amount controls how far the size swings from center; Speed controls how many full cycles happen per second.
• 🔄 Spin — The character rotates continuously around its center anchor point. Speed is in degrees per second (360 °/s = one full turn per second).
• 🌈 Cycle Hue — The fill color smoothly shifts through the color wheel. Speed is in degrees per second (360 °/s = full rainbow each second).

Breathe Animation Math

The rendered size at time t (in seconds) follows a sine wave:

• Amount is the amplitude — the peak deviation above and below the base size. With baseSize = 120 and Amount = 10, the character oscillates between 110 and 130 units.
• Speed is in cycles per second (Hz). Speed = 1 produces one full pulse every second; Speed = 0.5 gives a slow two-second breath.
• The formula ensures the character is exactly baseSize at t = 0, grows to baseSize + Amount at the quarter-period peak, then returns through center and dips to baseSize − Amount at the three-quarter point.

Learn More

Curious about the code behind this tool? The SWCharacter Class Reference documents the full SWCharacter API — constructor parameters, setter methods, how update() advances each animation, and a critique of the SketchWaveJS class library design.