: Path to stroke, is it possible? What I'm doing is animating a stroke by first setting its stroke-dasharray and stroke-dashoffset, and then animating its stroke-dashoffset, so that the stroke appears

Posted in: #BezierCurve #Inkscape #Path #Stroke #Svg

What I'm doing is animating a stroke by first setting its stroke-dasharray and stroke-dashoffset, and then animating its stroke-dashoffset, so that the stroke appears as if it is being drawn by an invisible hand in real time.

However, line animations require strokes because paths prevent stroke-dasharray and stroke-dashoffset from having any noticeable effect.

I need a stroke with a width of exactly 1px that is a perfect quarter-circle.

But, since I suck at creating perfectly curved strokes of a particular width, the only way I know how to achieve this is by creating a path from a circle object.

Is it possible to convert a path to a stroke?

Or is there a way to create a perfect, quarter-circle stroke that has a width of one pixel other than simply writing the code myself?

10.01% popularity Vote Up Vote Down

: What website allows you to type in a word and it gives you the associated color? There is a website that I used to visit that allowed you to type in any word and it would search google

@Steve758

Posted in: #Color

1 Comments

: What's the difference between Illustration and Graphic Design? What is the difference between graphic design and illustration? I ask because I want to know what to write in my social media biography.

@Steve758

Posted in: #Illustration #Terminology

1 Comments

: How to make different letters same height in Photoshop CC Looking to find a way to make rounded letters and straight letters same height in Photoshop CC without manually doing so letter by

@Steve758

Posted in: #AdobePhotoshop #Fonts #Lettering #Text

1 Comments

: What does 'design with capital D' mean? Recently I have started watching/listening to the High Resolution podcast -- which I enjoy a lot, and there has been several occasions where the hosts

@Steve758

Posted in: #Terminology

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Carla748

In Inkscape, the Pattern along path will convert a path to be repeated or stretched along a path, effectively making it like a stroke. Documentation can be found here:
tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-PatternAlongPath.html
You can also use this to make strokes have custom "cap" shapes (such as a quarter circle) if the usual "rounded" and "squared" options under the "Stroke Style" tab aren't good enough for you.

Sounds like your ultimate goal, however, is to just animate the svg path so that it looks like it is being drawn by an invisible hand. In that case, I'd recommend just drawing the path, and then using vivus.js to animate it. Documentation for vivus can be found here:
maxwellito.github.io/vivus/

10% popularity Vote Up Vote Down

Feed

: Path to stroke, is it possible? What I'm doing is animating a stroke by first setting its stroke-dasharray and stroke-dashoffset, and then animating its stroke-dashoffset, so that the stroke appears

More posts by @Steve758

: What website allows you to type in a word and it gives you the associated color? There is a website that I used to visit that allowed you to type in any word and it would search google

: What's the difference between Illustration and Graphic Design? What is the difference between graphic design and illustration? I ask because I want to know what to write in my social media biography.

: How to make different letters same height in Photoshop CC Looking to find a way to make rounded letters and straight letters same height in Photoshop CC without manually doing so letter by

: What does 'design with capital D' mean? Recently I have started watching/listening to the High Resolution podcast -- which I enjoy a lot, and there has been several occasions where the hosts

Login to post a comment!

1 Comments

Back to top | Use Dark Theme