🏳 SketchWave Flag Demo

SWFlag is a SketchWaveJS composite shape made of n horizontal stripes, each a SWRoundedRectangle, stacked vertically with a uniform gap and centered on an anchor point.

Design Parameters

• Flag Width / Height — overall bounding dimensions in grid units.
• Number of Stripes — splits the height evenly (accounting for gaps).
• Gap — space between adjacent stripes in grid units.
• Corner Radius — shared by all stripes; drag to zero for sharp corners.
• Rotation — static tilt of the whole flag about its anchor.
• Border Thickness / Fill Opacity — stroke and fill controls.

Animations

• Breathing — scales the flag horizontally, vertically, or both via sinusoid(s). Modes: Uniform, Horizontal, Vertical, Independent X/Y.
• Spinning — rotates the whole flag group about its anchor at a configurable deg/s (negative = counter-clockwise).
• Combine both for a waving, pulsing flag effect!

Click to Recolor

• Click any stripe on the canvas to select it — it is highlighted in the control panel.
• Use the Stripe Color color picker to change the selected stripe's hue.
• The border color is automatically derived as a darker version of the fill.

Quick controls

• b — toggle breathing
• s — toggle spinning
• r — factory reset
• q — stop all animations

SketchWaveJS classes used by this demo

• SWRoundedRectangle Demo — the building block for each stripe
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference