Wabi-Sabi
Enso Ink Circle
An enso circle draws and erases itself in a continuous loop over washi paper texture; stroke width breathes via rAF sine wave and a glow halo pulses behind.
svgmedium complexitymoderate motion
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Zen, mindfulness, or Japanese aesthetic contexts. Ambient hero backgrounds or loading screens needing calm, contemplative motion.
When not to
Bright or colorful UIs — palette is hardcoded dark ink on warm parchment. Contexts where looping draw animation feels restless rather than meditative.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change stroke color to indigo by replacing the en-ink-grad stops with #1a0a3c and #3b1f6e, and slow the draw cycle to 5s by editing the en-draw-loop animation-duration. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.
Safe to edit
- draw loop speed (3s in .en-stroke animation)
- stroke width breathe range (18 ± 3 in tick())
- ink gradient colors (en-ink-grad stops)
- paper background color (#1c1510 body + radialGradient stops)
- glow pulse opacity (0.15–0.45 in en-glow-pulse)
- theme tokens (:root dark defaults + [data-theme=light] overrides)
Keep intact
- IIFE wrapper
- prefers-reduced-motion guard (sets dashoffset 0, cancels animation)
- visibilitychange pause in rAF loop
- theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
Known limitations
- stroke-dasharray hardcoded to 550 — must be recalculated if path geometry changes
- Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default