Change SVG stroke start point

[ErraticFox]

Hello, I have made a stroke around one of my polygons in my SVGs. This stroke doesn’t connect start to end though as I’ve used stroke-dasharray and stroke-dashoffset to make a small stroke somewhere against the polygon. I’m now wanting to animate the stroke itself tracing around the polygon, while keeping it the same length I have. I originally thought “looks like I’m not able to do this in CSS, time to go to JS.” but at last, it doesn’t matter which I use as I’m not quite sure I’m able to move the starting point… :\

My CodePen: https://codepen.io/ErraticFox/pen/RgXoZm

My crude example to demonstrate my desired result: http://i.imgur.com/HAzZ5Ij.png

P.S. Posting this in JavaScript because as far as I’m aware, there’s no way to do this with CSS.

[Paulie_D]

Something like this I guess:

https://codepen.io/Paulie-D/pen/OgKpwr

But as far as I know the stroke always starts at the start point of the path / element based on the first defining co-ordinate and there is no way to change it.

[ErraticFox]

Thanks! Hmm, that’s weird and a little confusing. Because the way you’re doing it is making the stroke-dashoffset a negative value. Why does this move the starting point, but using a positive value only moves the end point? Because this was my first attempt on trying it out, but I used a positive value instead…

[Paulie_D]

You can use a positive offset…it just goes the other way round

[Author]

Posts