"Draw" gradient trail

Hi there,
my task: A driving car draws a trail behind it - the trail is curvy and contains gradients. The attached Hype document should make things clear… The straight part is an easy one - just unveil the gradient with a common group animation (hidden overflow). But how to manage the curve? And there are gradients in the transition from straight lines to curves. I tried Max´ Hype ClipPath - but that doesn´t seem to work for that kind of task. Any idea?

unvealGradient.zip (91.5 KB)

Thanks in advance,

There’s not really an easy way to do this… I imagine there are several techniques, but the basic one to use would be to have a path that only draws a portion of the line act as a mask. This could then have a blur effect applied, and probably would need its own clip for a sharp leading edge. While it could be assisted with Hype and its vector shapes, much of this would need to rely on custom code.

I imagine you might be able to use a combination of blurring, color changing, and clever clipping that could simulate the effect though.

Perhaps others have more creative ideas :slight_smile:.

Here you go… fixed the clip path for you. Found a bug in the process… fixed it.

What I can’t fix are the Hype bugs:

  • using divs to mask in Hype can’t be rotated or flipped easily without breaking. Need to send them deeper into another group and flip that.
  • Multi gradients are not supported in Hype so I built it with two “squares”

unvealGradient.hype.zip (100,7 KB)

You have todo the car… :wink:


Hei Max! Thank you so much! That´s exactly what I need. This is a really great and powerfull tool. And - yes - I think, I can handle the car… :grinning:

svgPath_Gradient_along.hype.zip (12.8 KB)

Found a nice little script to enable (hack) a gradient along a path.
the original path is duplicated, strokedashoffset and colour are set … all paths grouped …
though no real masking in this example … but interesting :slight_smile:


That is an interesting example (!) although it create 250 copies of the path :slight_smile: but as long as the browser can handle it. Who cares… resolution can be lowered, though.

Any chance to get this working with an Illustrator SVG? Tried it with an embedded SVG, gave the path the class “kurve” - but unfortunately doesn´t work…
unvealGradientAI_SVG.zip (99.6 KB)

Hello Kalle,

it’s duo to the fact that there is no <defs></defs> tag in you SVG and the extension currently assumes that it should be in there. Then it should work…

Another thing is that an imported SVG scales when you drag on the handlers giving you a mismatch between the viewbox and the true dimensions of the SVG. Hype fixes that on the fly for it’s Vector tool.

In the longer run it would be nice to support AI easier…

unvealGradientAI_SVG.hype.zip (135,8 KB)


Would be great to see this in Hype as an official feature/selection/option, seeing as users are having a hard time trying to hack their way into making it work.

The problem is that there is no support for this neither in HTML, CSS or SVG. You can display a gradient in a SVG but not “truly” along a path.

What we need is a Mask that is generated from a path and updates on animation.

Background Information:
The code @h_classen provided generates a “static” finished stack of paths with different path length using strokeDashoffset and color. This could also be done in an outside program like illustrator an brought in as an image. Then the path is “uncovered” by an another retreating single color path animation on top that matches the background color of the document. The illusion works as long as you have a single color in the background. Given that case this technic is pretty neat and efficient…

svgPath_Gradient_along.hype.zip (21.5 KB)

update: yeah it’s not perfect :slight_smile:

Neat, why not just create the gradient in Photoshop/Illustrator and then reveal it with the top Vector Path? Has some problem in Safari now. Regards

no reason… may be to keep it within hype :slight_smile:

Your right, I should be one of the first to understand it. It’s fun and gives an opertunity playing around with concepts and Web-Technologies… :v:

fixed for safari :slight_smile:
svgPath_Gradient_along-1.hype.zip (19.5 KB)

1 Like

regarding my example:
as a sideeffect of having a bunch of elements a ‘maskeffect’ is already possible without having a mask, because it offers the opportunity to show/hide those elements on a timelineprogress … :slight_smile:

So you mean instead of revealing them with the second single background-color vector on top just add a delayed reveal to each path segment?… that should do the trick!

Also maybe one could optimize the code amount in rendering all the path elements into a single SVG wrapper.

I am slowly getting the hang of this “color trail” idea. Nice!

Sidenote: If one really wants to get fancy, one could calculate the path segment size and set the dash to it… that way one could even offer a simple tampered end, start with degrading stroke width.

1 Like

Here is an alternative approach that comes to mind: Gradient Trail Workaround.hype.zip (32.9 KB). What if you made the race track with a strip of transparency (hidden by a background with a matching color) and then move a gradient underneath the track so that it looks like it’s following the car?

It’s a workaround that creates the illusion of drawing a gradient trail, but doesn’t really do so. This method allows for all elements (including the gradient) to be SVG.

Hope that helps!


Hi all,
thanks for your help with this, especially Max! You can see the videos online: https://www.bmw.com/de/performance/so-fahren-sie-auf-der-ideallinie-optimal-durch-kurven.html (scroll down a bit, point 3, 9 and 12)


Wow, nicely done. This inspires me to update Hype ClipPath. Let’s see if that can’t get even better/more powerful going forward. Love the animations.

1 Like