How to reuse a linear gradient with many lines of different size and rotation?

Community Help
1

Hi all, I’ve used the great tutorials here and on blocks Linear Gradient Rotation - bl.ocks.org to add gradients to my elements and I think they look great.

However, when I have many lines the gradients start to get messy and have the wrong rotation.
I tried by applying a rotation of the angle but that doesn’t work either.
https://observablehq.com/d/dc8572321457b24f

Can someone tell me what I am doing wrong?

I have been at this for a long time, I thought I compute the angle wrong, but now I think there is something else, since the rotation is not needed at all if I set x2, y2 to 100% it should be automatic.

It works when I manually set all the lines.

Many thanks in advance kind strangers!

2

You will have to rotate (transform) the object that you apply your gradient to, or create a new gradient for each angle.

Gradients (like patterns) are essentially textures (images), and are limited in similar ways.

1 Like
3

Hi Mootari,

Thanks a lot!
I have made a new gradient for each that works, but I thought that surely isn’t the way. What happens with old gradients when the graph gets updated? Would they just remain in memory?

(oh,. edit: can I somehow add and remove the gradients at the end?)

When you say rotate, transform the object, do you mean the line in my case?

I am sorry if this is a stupid question, why, when I do as in my example the line individually (not in the d3 data loop), and apply the same gradients, they always are rooted correctly but not in the d3 loop?

4

SVG is a markup language. Your rendered SVG will always reflect its elements, so removing elements will immediately change its appearance.

Yes.

It only seems that way. The percentages in your gradient refer to each line’s bounding box, an axis aligned rectangle that encompasses the entire line. The more parallel a line is to the gradient’s direction, the less you’ll see of the gradient. Try changing all your offsets to 50% to get a sharper contrast and a better idea of what’s happening.

1 Like
5

Thanks a lot for your patience and explanations.
I think I get it, the gradient is like a background image and the line is the mask?
In that case new gradients might be the easier way :sweat_smile:

I changed all the offsets as you suggested, this looks super weird, I will explore it further as I do not quite get it yet I think haha.

6

Hmm, I think I get it a bit more, it seems I am still getting the locations wrong though.
I think my rotations were always wrong, I just didn’t notice it.

Did I understand the documentation and explanations correctly that the gradients rotation is along the center point of the axis aligned rectangle?
And the line, would then be a diagonal from top left to bottom right?

I made some changes:
https://observablehq.com/d/dc8572321457b24f

7

SVG gradients have no rotation. The direction is only defined by the start and end position. And how that relates to your element depends on the units that you used as well as the coordinate system (i.e., gradientUnits).

I’d recommend to look up a few introductions on SVG gradients (specifically linearGradient) and to implement your own simple gradient configurator in a separate cell.

1 Like
8

Oh! Thanks so much! I think I was reading all the wrong documentation possibly (CSS linear gradients). I’ll try again. I appreciate your patience!!

1 Like