Skip to content

SVG: Add examples for repeating angled gradients#42834

Merged
hamishwillee merged 4 commits intomainfrom
estelle-patch-2
Jan 30, 2026
Merged

SVG: Add examples for repeating angled gradients#42834
hamishwillee merged 4 commits intomainfrom
estelle-patch-2

Conversation

@estelle
Copy link
Member

@estelle estelle commented Jan 20, 2026

i spend a long time scouring the web to figure out how to create angles that stayed constant regardless of aspect ratio

@estelle estelle requested a review from a team as a code owner January 20, 2026 10:25
@estelle estelle requested review from hamishwillee and removed request for a team January 20, 2026 10:25
@github-actions github-actions bot added Content:SVG SVG docs size/s [PR only] 6-50 LoC changed labels Jan 20, 2026
github-actions[bot]
github-actions bot reviewed Jan 20, 2026
View reviewed changes
@estelle @github-actions
Apply suggestions from code review
91fbb8a 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@github-actions
Copy link
Contributor

github-actions bot commented Jan 20, 2026 •
edited
Loading

Preview URLs

Flaws (2)

URL: /en-US/docs/Web/SVG/Reference/Element/linearGradient
Title: <linearGradient>
Flaw count: 2

  • macros:
    • Macro svginfo produces link /en-US/docs/Web/SVG/Element which is a redirect
    • Macro svginfo produces link /en-US/docs/Web/SVG/Reference/Element/discard which is a redirect

(comment last updated: 2026-01-20 10:49:50)

This was referenced Jan 20, 2026
Merged
Merged
@caugner
Copy link
Collaborator

caugner commented Jan 20, 2026 •
edited
Loading

FYI

  • Macro svginfo produces link /en-US/docs/Web/SVG/Element which is a redirect

This issue will be fixed via mdn/rari#490.

  • Macro svginfo produces link /en-US/docs/Web/SVG/Reference/Element/discard which is a redirect

This issue will be fixed via #42836.

hamishwillee
hamishwillee approved these changes Jan 30, 2026
View reviewed changes
Copy link
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @estelle - it works and looks pretty cool.

FWIW I do prefer examples that explain how things "work" as well as what they acheive. i.e. I can see that this works but I don't know if I could do it myself in any other context from this, or what changes would be OK vs what would break the aspect ratios being the same.

@hamishwillee hamishwillee merged commit 6aeb1ae into main Jan 30, 2026
13 checks passed
@hamishwillee hamishwillee deleted the estelle-patch-2 branch January 30, 2026 06:11
@estelle
Copy link
Member Author

estelle commented Jan 30, 2026

Thanks @estelle - it works and looks pretty cool.

FWIW I do prefer examples that explain how things "work" as well as what they acheive. i.e. I can see that this works but I don't know if I could do it myself in any other context from this, or what changes would be OK vs what would break the aspect ratios being the same.

I agree, but the supporting docs on mdn don't explain things. When i have time, i should update the gradientUnits attribute page, so we would have docs to link to.

pranjal2004838 pushed a commit to pranjal2004838/content that referenced this pull request Feb 25, 2026
@estelle @pranjal2004838
SVG: Add examples for repeating angled gradients (mdn#42834)
656243d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@hamishwillee hamishwillee hamishwillee approved these changes

Assignees

No one assigned

Labels

Content:SVG SVG docs size/s [PR only] 6-50 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@estelle @caugner @hamishwillee