Now that you've set the length of your path as 1, you can use the same value for your dasharray, creating a dashed line that goes '1 pathLength dash 1 pathLength gap 1 pathLength dash 1 pathLength gap.' and so on.

add a pathLength attribute to your path, with a value of 1.

Now you've got two choices for how to animate the path:Ī) a very accurate approach, where you use some Javascript to find the exact length of the line, or.ī) a faster CSS approach, where you tell the line how long it is, and it agrees with you, like the coward it is.

Add CSS rules to the section - you can copy & paste the animation below, but you can also just go crazy changing background colors and whatever else you like.

I use the Atom editor with the svg-preview package installed, but use whatever tickles your fancy.

Open your SVG in a text editor of your choice to have a look around, tidy things up if you like, and if you have drawn multiple paths, add an id to each one.

save your SVG and (optional, but recommended) optimize it with SVGOMG (reduce precision, round/rewrite numbers, remove editor data and prettify markup, but don’t remove xmlns.)Įxample original file in SVGOMG, as exported from Inkscape A nice and tidy optimized version - thanks, SVGOMG!.

when using the node editor, you can select or lasso nodes and click on (make selected nodes smooth) or (auto-smooth).

tweak your path with the node editor - see how many nodes you can get away with deleting (in general: the fewer the nodes, the smoother the curves.).

Then use Path-> Simplify to reduce the number of nodes. Download Inkscape to draw your squiggly line(s) The fancy new Inkscape 1.0 > CSS Tricks has a great explanation (with pictures) Here’s how you can make one yourself!įirst, create an SVG with a path to animate. Slide the dashes along the line from a position which is 100% gap, to a position which is 100% dash.’

The dashes (and the gaps between them) just happen to be exactly the length of the line. This animation uses the well-known if slightly hacky dashoffset SVG technique - it tells the browser/viewer:

Line Drawing Animation Do you want to make your own SVG ‘line-drawing’ animation?

Inkscape svg animation