feat: support repeating-linear-gradient

[Jackie1210]

Now that #624 has been merged, let me bringrepeating-linear-gradient to satori~ ❤️

Close #554

Note about the algorithm:

---

Option 1: 0 < deg < 90

define

$$r=(h/w)^2$$

then, calculate the intersection point of the last two lines

$$y = - r / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x + h$$

Finally, we can get (x1, y1), (x2, y2)

about length:

$$y = - 1 / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x + h$$

then, we can get a point: (a, b), so length is $2 ·\sqrt{(a - w/2)^2 + (b - h/2)^2}$

---

Option 2: 90 < deg < 180

define

$$r=(h/w)^2$$

then, calculate the intersection point of the last two lines

$$y = - r / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x$$

Finally, we can get (x1, y1), (x2, y2)

about length:

$$y = - 1 / tan(angle) ·x + w / 2 + h/2+r·w/ (2·tan(angle))$$ $$y=tan(angle) ·x$$

then, we can get a point: (a, b), so length is $2 ·\sqrt{(a - w/2)^2 + (b - h/2)^2}$

Actually, I didn't find any spec of the algorithm on calculating the points. I just came across the algorithm accidentally. It turns out it shows the same result just like chrome renders.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satori-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 4, 2024 2:40pm

[shuding]

This is incredible! Thank you!

[github-actions]

🎉 This PR is included in version 0.11.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀