loading words...

Feb 11, 2019 23:36:52

svg gradients are hard

by @swizecteller | 206 words | 🐣 | 116💌

Swizec Teller

Current day streak: 0🐣
Total posts: 116💌
Total words: 32303 (129 pages 📄)

Brushing up on React Portals so I can define <radialGradient> in a different coordinate space than the component that renders and uses it.


Nevermind, radialGradient defines its coordinate system at time of application, not time of definition.

That actually makes this problem harder to solve ?


By the way this works to make a React Portal on the fly. Ref and size in context, rendering from a random child, placing into a different node.

This might be the most minimal portals example you've ever seen ...

... but it does not solve my coordinate system problem.



This is the problem I'm solving by the way. Making this gradient look like it's coming from the center of the big circle.

I wonder if @sarah_edo or @sxywu have any suggestions ...



Okay so I was able to kinda fake it with these settings:

Units have to be in percents ...


And then you rotate the circle and oh no ...

Yes linearGradients have the same problem.



Maybe I should use a rotate transform instead of changing d3.pie().startAngle ?


But anyway SVG gradients are ridiculously powerful and ridiculously hard to use. That's what I learned today. #200wordsTIL

Originally published at twitter.com

contact: email - twitter / Terms / Privacy