←
svg-scroll-draw
/
Playground
Share ↗
Examples
Geometric
Signature
Diagram
Infinity
·
or paste your own SVG →
SVG Editor
623 chars
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="150" r="120" stroke="#ff90e8" stroke-width="2.5"/> <path d="M 30 150 C 30 80 90 20 150 20 S 270 80 270 150" stroke="#000" stroke-width="2" stroke-linecap="round"/> <path d="M 60 210 Q 150 270 240 210" stroke="#ffc900" stroke-width="2.5" stroke-linecap="round"/> <line x1="150" y1="30" x2="150" y2="270" stroke="#000" stroke-width="1" stroke-dasharray="6 4" opacity="0.25"/> <line x1="30" y1="150" x2="270" y2="150" stroke="#000" stroke-width="1" stroke-dasharray="6 4" opacity="0.25"/> </svg>
▶
↺
0%
Easing
linear
ease-in
ease-out
ease-in-out
spring
Speed
1.0×
Stagger
0.00
Direction
→
←
Fade
○ off
Once
○ off
Color
off
→
Width
off
→
Code
<ScrollDraw easing="ease-out" speed={1.0} >