Rotating Gradient, elements and SVG used as motion paths


Q 1: I was trying to make a rotating dial with gradients that represented the results of directional light. (see gif) I need to rotate the thumb depression 360° and keep the gradient at 0°. As if the light is striking the button from above. But it just ends up with a fast spinning gradient. Any help?

Q 2: Can Elements or imported SVG shapes be used as motion paths?


There are lots of ways to resolve this problem.

One possible way… get the rotation angle of the dial, then use JavaScript COS/SIN to position a little circle element.

Another possible way… Don’t rotate the little circle. Just move it with motion paths. Elements with SVG can be used with motion paths.

Another possible way… use HTML inside the element and draw the blend dynamically, based on the angle of the dial.


I tried this but making a perfect circle with vector handles that don’t “snap” to positions relative to one another takes a long time to make a perfect circle. That is why I asked about designating elements or SVG imports as motion paths for existing objects in the animation.

I changed the rotation angle of the blend that is within the circle as it rotated around. At the top it is 0° and at right it was 210°, but it ends up spinning 5 or 6 revolutions, even when setting it from ease in to linear.