Faking irregular gradients in inkscape

Published October 21, 2006 inkscape , svg , tutorial 4 Comments

The question was asked in the jabber room if it was possible to make a gradient follow a path. While strictly speaking its not, it is possible to fake it fairly well. This is a very quick and dirty outline of how….

Step 1. Create your path.

Step 2. Duplicate it, and move it up a little (were creating a ‘thick’ version of it.)

Step 3. Connect the 2 curves – Duplicate the original again, Select both, do ctrl+K to make them into one path, then connect the nodes at either end so you have one shape.

Step 4. Repeat the first 3 stages, but move the second line to where you want the far end of your gradient. put the relevant fills on the 2 shapes to be the start and end of the gradient, and remove the strokes.

Step 5. Use the interpolate effect to blend between them. Use method 2 and turn on blending of styles. Make sure the thin ones on top of the thick one.

Step 6. And your done…. if you find you get messy edges like below, clip paths are a god send…