←
svg-scroll-draw
/
Playground
v1
v2
0%
Share ↗
SVG Editor
553 ch
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="120" cy="120" r="100" stroke="#000" stroke-width="2.5"/> <circle cx="120" cy="120" r="66" stroke="#ff90e8" stroke-width="2"/> <circle cx="120" cy="120" r="32" stroke="#ffc900" stroke-width="2"/> <line x1="20" y1="120" x2="220" y2="120" stroke="#000" stroke-width="1.5" stroke-dasharray="6 4" opacity="0.4"/> <line x1="120" y1="20" x2="120" y2="220" stroke="#000" stroke-width="1.5" stroke-dasharray="6 4" opacity="0.4"/> </svg>
▶
↺
0%
ease-out · 1.0×
Examples
Scope
basics
Signature
easing
Bar Chart
stagger
Route
path
Orbit
stagger
Emblem
fillOpacity
Morph
morphTo
Flowchart
multi-path
motion
visual
effects
code
Preset
— apply preset —
sketch
reveal
typewriter
cinematic
spring
Easing
linear
ease-in
ease-out
ease-in-out
spring
bounce
elastic
Speed
1.00×
Stagger
0.00
Direction
→ forward
← reverse
Fade
opacity 0→1
Once
lock at 100%