stroke-dashoffset interactive examples

The cat is pure SVG and CSS, using stroke-dashoffset. Stroke-dashoffset lets you change where the stroke on an SVG starts.

However the docs don't have a ton of information about how it actually works. They state that 'stroke-dashoffset defines an offset on the rendering of the associated dash array.'

When using stroke-dashoffsets I was always confused and would resort to just guessing and checking to see what the number did. I wanted to understand and be able to predict what effect a certain offset would have. So I built a few of the interactive examples you find below.

stroke-dashoffset requires stroke-dasharray

It is important to note that you have to have a stroke-dasharray to be able to use a stroke-dashoffset. Imagine a hola-hoop. It doesn't matter which was you turn / offset / rotate the 'start' of the hoop. It is going to look the same. If you cut some gaps in the hoop with stroke-dasharry, rotating the start of the gaps will produce a different effect.

Which way does stroke-dashoffset move the stroke?

I find the most confusing part of stroke-dashoffset, is which way does the offset actually move the start of the stroke?

If you imagine a SVG line of 100 px, starting at 0,0, and ending at 100,0 adding a stroke-dashoffset of 10, would pull the start of the stroke back to -10,0.

If a picture is worth 10,000 words, then a live example is work 100,000. Here is an example to play with.

Line stroke-dashoffset example

<svg id="exampleSVGOne" width="100" height="20">
	<line id="exampleLineOne"
	x1="0" y1="10" x2="100" y2="10"
	stroke="black"
	stroke-width="15"
	stroke-dasharray="20 10"/>
</svg>
	

The stroke-dasharray="20 10" means the pattern will repeat 3 1/3 times. 20 + 10 = 30. 100/30 = 3.33

As you play with the value of the stroke-dashoffset, as the number goes up, the frame of reference is pushed forward. As the frame of references moves forward, the line itself seems to move back. While this seems to backwards to what you expect, (number goes positive, lines goes forward) it is makes sense on a grid. Imagine looking at a train through a window. The train could be moving to the left, or your house could be moving to the right, buy you couldn't tell which was which without other information.

Also notice how a stroke-dashoffset of 30, -30, 60, -60, 90, -90 looks the same as 0.

This is because the stroke-dasharray pattern repeats ever 30 pixels, so multiples of 30 will look the same.

Rectangle stroke-dashoffset example

The rectangle example is similar, but since the shape loops, the stroke dashs also loop. This can make it harder to understand what is happening, since the strokes can merge.

For example, we have rectangle of width 200, height 100, with a stroke dasharray of stroke-dasharray="110 20". That means the pattern repeats ever 130 pixels. 200 + 200 + 100 + 100 = 600. 600 / 130 = 4.6 You can see this effect in the upper left corner. That stroke looks longer than 110, and is really the 110 stroke dash that starts the pattern, visually merging with the 80 pixels of the 5th stroke that gets cut off at when the shape loops. You can change the stroke offset to 40 to see them break apart.

Circle stroke-dashoffset example

I started this example with a stroke-dashoffset of -1 so we can see where it starts. The stroke on an SVG cirlc starts on the middle right hand side, or 3 o'clock position. Then it flows clockwise around the circle.

Because a circle dash array also loops, it can be tricky to figure out when it restarts.

If you want the circle to look like it is turning clockwise, animate from a larger to a smaller stroke-dashoffset. If you want the circle to look like it is turning counterclockwise, animate from a smaller to a larger stroke-dashoffset.

Does stroke-dashoffset affect linear stroke gradients?

Short answer: No.

I initially thought that stroke-dashoffset would affect linear gradients applied to SVG shapres. In my hypothetical hola hoop, if the hola-hoop is different colors wouldn't rotating it affect the location of those colors?

This is not the case. It appears that the gradient is applied, then the gaps or dashes are applied or cut into the gradient. So changing the location of the dashes doesn't change the start position of the gradient.

Quick warning! Lots of SVG effects rely on a bounding box around the object. If you have a horizontal or vertical line, that line has no area, and therefore no bounding box. If you add an effect like linearGradient to a horizontal or vertical line, it has no area and will not render the line. To fix this, you can either use a rectangle instead, or add .0001 to a coordinate to give a tiny bit of are to your line. More info on my StackOverFlow question and answer here.

Animating stroke-dashoffset

The coolest thing about stroke-dashoffsets is how you can use them to animate SVG shapes.

The basic idea is you set a stroke-dasharray with a dash length, and a gap length equal to the length of the line you want animate. Then you set a stroke-dashoffset to that same length.

This basically empties the stroke. You can then animate back to a multiple of the line length to have the SVG line fill in or empty out.

To get the length of the line, you can use the Javascript function getTotalLength().

let kittenMainPath = document.getElementById('kittenMainPath');
console.log(kittenMainPath.getTotalLength());
	

You can use this once, or if the line length might be variable, you can set it dynamically.

If you found these examples helpful, click the Twitter bird and send me a message. Always looking to make new friends.