2

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?

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?

Improve this question
1
  • Can you add an image? What is the shape you're trying to animate? I'm having a hard time understanding your quarter-circle stroke.
    – Luciano
    Commented Jan 10, 2018 at 9:22

1 Answer 1

Reset to default
1

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:

http://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:

https://maxwellito.github.io/vivus/

Improve this answer
4
  • Because the stroke-dasharray is set to 'WIDTH-OF-ELEMENT'px, it does not appear as a dotted line, but rather always as a solid line. In other words, you have a stroke of 10px, but 5px of that stroke is just empty space. I'm struggling to comprehend the latter half of your comment.
    – oldboy
    Commented Feb 12, 2017 at 21:04
  • Ok, I've edited my answer so hopefully it's clearer and more relevant. I've also added another piece of info that may help.
    – AndrewUlrich
    Commented Feb 12, 2017 at 23:38
  • Sorry, I should've been more clear. First, in my initial response I meant LENGTH-OF-STROKEpx. Second, I'm implementing the SVG as an inline SVG in HTML format for use on the web. I'm animating it using JavaScript. All I need to know is how to make a perfect quarter-circle stroke with either the Bezier tool or by some other means.
    – oldboy
    Commented Feb 13, 2017 at 0:21
  • As I mentioned in my initial response, it's easy creating a quarter-circle path, but I need a stroke (not a path) so I'm able to animate it with JS.
    – oldboy
    Commented Feb 13, 2017 at 0:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.