SVG Path Animator

Create and animate SVG paths with an interactive editor. Draw, customize, and generate code for your SVG animations.

Canvas

Width: 600px

Height: 400px

Draw a path to generate SVG code.

Enable animation to generate CSS code.

Drawing Tool

Stroke Color

Stroke Width: 4px

Fill Color

Close Path

Enable Animation

Animation Type

Duration: 2s

Delay: 0s

Easing

Direction

Iterations

Fill Mode

Learn how SVG paths work with this quick reference guide:

Move To

Start a new sub-path at the given (x,y) coordinates.

Line To

Draw a straight line from the current point to (x,y).

Cubic Bezier

Draw a cubic Bézier curve with control points (x1,y1), (x2,y2), ending at (x,y).

Close Path

Close the current sub-path by connecting it back to its starting point.

Use "Draw" animation to create drawing effects with stroke-dasharray/dashoffset.
Use "Transform" animation for movement, rotation, and scaling effects.
Try combining multiple SVGs with different animations for complex effects.
The generated CSS can be easily integrated with React, Vue, or vanilla JS projects.