Let's say I have a circle in a vector art program like Inkscape. I'd like to animate this circle so that it's revealed from two opposite corners simultaneously (i.e. drawing a pair of semicircles from the top and bottom corners, which eventually meet up at the right and left corners). However, I need to record this as a gradient in order to animate it (in Unity, in this case).

I only know how to create gradients with predefined patterns, like a straight line or radial shape. Is there any way to "draw" a gradient as an arbitrary path? It can be a raster image if necessary; I just need a way to tell Unity how to reveal the image over time.

  • 1
    Not sure if what you want is possible (yet). Thinking a different way.. could you have a gradient then use a mask.. moving the mask to "reveal the gradient over time"?
    – Scott
    Apr 10, 2019 at 22:59
  • Hmmm . . . in Inkscape there is no way to have a gradient along a path, because Inkscape is an SVG editor, and the SVG format lacks this feature at present. However it might be possible in Illustrator, as long as you don't expect to be able to export it as an SVG vector. Illustrator will rasterize the object when exporting as SVG.
    – Billy Kerr
    Apr 11, 2019 at 9:26
  • @Scott Yeah, maybe the "reveal" has to be done manually with a mask in the game engine instead of encoding the info in an image... it's tricky but it can work.
    – eternal
    Apr 11, 2019 at 15:25

1 Answer 1


If the question is "in a vector art program" and Inkscape is just an example, there are alternatives in other vector applications.

In InDesign you can find this in one of its Easter Eggs:

enter image description here

  • Choose Stroke Styles from the Stroke Panel Menu

  • Click New

  • Choose Stripe from the Type pop-up menu

  • Give the stripe this name: Rainbow

  • Click Add

Add after the comment

Make an Illustrator Art Brush:

enter image description here

  • This is interesting but it doesn't solve this specific problem. The goal is to make the gradient stretch out and follow the path. For example, if it were a simple black-to-white gradient, the beginning of the path would be solid black and the end of the path would be solid white.
    – eternal
    Apr 12, 2019 at 17:47
  • Answer updated....
    – user120647
    Apr 12, 2019 at 20:41
  • 1
    Thanks! I can't actually test this since I don't have Illustrator, but it looks like it would work. So at least it's possible, just not with an SVG.
    – eternal
    Apr 13, 2019 at 21:57

Your Answer

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

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