Shared gradient background across multiple elements
There are multiple circles representing steps on a progress indicator, placed evenly along a narrow track (the circles are larger than the track is tall). The progress bar must resize horizontally without distorting the circles. All elements must share a single gradient background. I thought there would be something to do with clipping or masking maybe but no examples that I've seen seem applicable to this.
This is what I came up with: https://codepen.io/ptrfrncsmrph-the-vuer/pen/RNrjRGg. Is this how you would do it? Is there a simpler approach that I'm not aware of?
2 Replies
here's a go with gradient masks. but you might be better off with an svg as a mask either a linked .SVG or an inline svg mask. https://codepen.io/jsnkuhn/pen/EaPbXRK
I believe another approach is that you can define a gradient on a bg or the body and then use fixed bg that references the gradient to get this kind of effect.