SketchWave Arc Demo

SWArc is a SketchWaveJS shape object that represents an arc — the curved "crust" of a circle, with no interior fill. Think of an SWSector pizza slice where you keep only the outer crust and discard everything else. An arc has a center (an SWPoint), a radius, an angular size theta (in degrees), a startAngle, a thickness, and a stroke cap style that controls how the endpoints look.

Because the arc is purely a stroke (no fill area), the stroke color is the visible arc color. Angles use the same CCW-from-+x convention as SWSector: startAngle=0 places the arc beginning along the +x axis.

Animations (5 total)

• Spin: continuously rotates the arc about its center at a configurable speed (°/sec; negative = clockwise).
• Breathe Radius: oscillates the radius using an SWSinusoid — the arc sweeps outward and pulls back in.
• Breathe Theta (θ): oscillates the angular size — the arc lengthens and shortens like a Pac-Man mouth opening and closing.
• Breathe Thickness: oscillates the stroke weight — the arc line itself swells and thins. Unique to SWArc!
• Hue Cycling: oscillates the arc color's hue around the color wheel.
• All five animations can run simultaneously and independently.

Stroke Cap Styles

• Round — semicircular ends; smooth, organic look.
• Flat — squared ends flush with the arc endpoints.
• Extended — squared ends that project past the endpoints by half the thickness.

What you can explore in this demo

• Arc styling: change color, opacity, thickness, cap style, radius, theta, and start angle.
• Arc position: drag the center dot on the canvas, or use Snap Center to align it to a grid intersection.
• Background trails: lower the background alpha to see ghost trails.
• Try Breathe Thickness + Breathe Radius together for an eye-catching pulsing rope effect.

Quick controls

• Click the canvas to hide/show the grid.
• Drag the center point to reposition the arc.
• Keyboard: s (spin), b (breathe radius), t (breathe theta), w (breathe thickness/weight), h (hue cycle), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• SWArc Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference