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 motionmobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
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