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.

https://pbs.twimg.com/media/DzL-jDKUYAAEFn5.png

---

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 ...

https://pbs.twimg.com/media/DzMAoKoUUAAlJuN.jpg

---

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.

https://pbs.twimg.com/media/DzMEb-0UUAAQgVQ.jpg

---

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