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?
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.
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
That is an interesting example (!) although it create 250 copies of the path 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)
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…
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…
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 ...
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.
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.
.
