Rotating snakes

Change the number of rings and watch the pattern writhe

Each ring uses four colours in a repeating order. The right alignment of high-contrast edges makes the snakes appear to drift. Start with the ring count below, then unlock colour and layout controls.

Live canvas

Step 1 · Core layout

Pick how many rings appear

Even a single ring can shimmer, but multiple concentric rings emphasise the apparent rotation.

Number of rings 4

Step 2 · Layout refinements

Control ring density, thickness, and edge wobble

Fine-tune the number of tiles per ring, ring thickness, spacing, and edge curvature. Alternating directions and separators influence the strength of motion.

Units per ring (tiles) 36

Ring thickness (px) 34

Gap between rings (px) 10

Inner radius (px) 110

Curvy edge amplitude (px) 12

Curvy edge frequency 4

Alternate ring direction

Thin separators (boost edges)

Step 3 · Colour sequence

Set the four-step palette that drives motion cues

The order of colours matters: a sharp luminance jump followed by lighter tones makes motion pop. Reverse the sequence to flip perceived spin.

Step 1 (Black) #000000

Step 2 (Dark) #2a49d1

Step 3 (White) #ffffff

Step 4 (Light) #9fbaff

Reverse order

Order matters: Black → Dark → White → Light is the classic sequence.

Colour presets

Step 4 · Parameter presets

Snap to known-good slider combinations

These presets tweak the geometry without touching colours. Mix with the palettes above to explore variants quickly.

Step 5 · Extras & export

Scale the pattern, add flicker, or save your design

Use the global scale and gentle flicker boost for demos, then export PNG/SVG or randomise everything for inspiration.

Global scale (%) 100%

Subtle flicker boost (0.8 Hz)