1

In Inkscape, or in SVG, I'd like to have a path with many differently curved sections with a stroke that has a gradient from one side to the other, not from one end to the other but from one side to the other.

This seems too simple not to have been asked before, but I can't find it.

Improve this question
5
  • Perhaps you can obtain such an effect by cutting the path in two. But the question would be more clear with an example...
    – Paolo Gibellini
    Commented Jan 19, 2015 at 8:15
  • hmm, can't find or make a simple image, but it's basically this: pugetworks.com/blog/2012/04/…
    – Damon Smith
    Commented Jan 19, 2015 at 10:24
  • 1
    I see... something similar to this or this?
    – Paolo Gibellini
    Commented Jan 19, 2015 at 15:14
  • 1
    that's fantastic, thanks! I now need to work out an efficient way to make it happen across a thick stroke. Like, take a path, make the stroke thickness 50 then break it into two paths and interpolate between them so that the line thickness is always even.
    – Damon Smith
    Commented Jan 19, 2015 at 22:40
  • 1
    At the moment I see no simple ways to achieve such a task. You can try to stroke the path and arrange it someway. Or you can get a look to the bevel filters.
    – Paolo Gibellini
    Commented Jan 20, 2015 at 0:34

1 Answer 1

Reset to default
1

Ok, there's no mechanism in SVG to have a gradient spread outwards from the center of a stroke to the sides, which is a shame. There are a few options for emulating it in Inkscape, one is to build two thin filled shapes that are a distance apart from each other then use interpolate to add a number of shapes inbetween them with stepped colours from one to the other. Which is ok but it will result in heavy svg markup, ratty edges and only a number of steps of colour, not a true gradient.

Another option is to use blur - take a path or shape, set the full stroke width you want with the edge colour, then copy it, paste it in place (ctrl-alt-v), set the width very narrow and set it to the center colour, then set it to blur so that the blur reaches to the edge. Copy the blurred path and paste in place a few times until the gradient fills out. This is also not ideal - the blurring doesn't behave all that well around sharp corners, but it gets close enough for some purposes.

Improve this answer

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.