Jump to content


Rotate shape keeping gradients fixed

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

I have a ball. It has 2 gradients: a dark blue and a light blue, both lighter at the top and darker at the bottom. I would like to rotate the shape of the ball, keeping these gradients fixed.

Imagine a glass ball through which I can see a light blue fixed gradient on one diagonal and a dark blue fixed gradient on the other diagonal.


See the Pen vYzEVRO by fmj36604 (@fmj36604) on CodePen

Link to comment
Share on other sites

Hi @gfo51715 welcome to the forum!


What I would do is create different layers of elements and have the gradient on the bottom most layer and on top of that have the shapes you want to spin around. I didn't have time to open op a design program and draw a new SVG for you, but the logic of this HTML structure should be the same. 


If you need two different gradients the logic would still be the same, but instead of one background create two and give one background a mask of the shape you want and spin that mask around. Here are the docs of SVG mask, but if you're using a design program there is probably just a button to create a mask  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask. Hope it helps and happy tweening! 



See the Pen eYLmbpZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

  • Solution


Or you could just set up your SVG a bit different.


Like e.g. create 4 circles, two of them sharing the same gradient; and mask each of them with a simple rect (one for each 'corner') - basically the other way around from what you tried. Then you could just tween on the mask rects.


See the Pen WNgbLbB by akapowl (@akapowl) on CodePen


Alternatively you could also boil this down to creating just two circles with gradients and two masks with the masks being customized paths that would show what you needed.


Oh, wait;

You can of course just add multiple rects to a mask - that would reduce the need for cirlces.


See the Pen xxabmYP by akapowl (@akapowl) on CodePen




Coming to think about it again; technically for this specific usecase you'd even only need to mask the circle that is topmost on the z-axis - which would be even better, because this way you could avoid those nasty white lines in between the rects, that SVG tends to cause.


Okay, I'll stop now😅


See the Pen xxabMvv by akapowl (@akapowl) on CodePen


  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.