system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-23 11:04:40 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Base: Add some SVG <radialGradient> examples

Browse source
This commit is contained in:
MacDue 2023-05-03 00:23:00 +01:00 committed by Andreas Kling
parent 9b652842e4
commit 390ade3cf4
1 changed files with 57 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
Base/res/html/misc/svg-gradients.html
View file

@ -1,5 +1,62 @@
<h3>Some simple SVG gradient test cases</h3>
<b>SVG radialGradient <a href="https://www.w3.org/TR/SVG11/pservers.html#ExampleRadGrad01">W3C spec example</a>:</b><br>
<svg width="8cm" height="4cm" viewBox="100 100 600 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<defs>
<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
cx="400" cy="200" r="300" fx="400" fy="200">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="red" />
</radialGradient>
</defs>
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/>
</g>
</svg>
<br>
<b>SVG MDN gradientTransform example (userSpaceOnUse radialGradient)</b><br>
<svg width="400" height="190" viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100">
<stop offset="0%" stop-color="darkblue" />
<stop offset="50%" stop-color="skyblue" />
<stop offset="100%" stop-color="darkblue" />
</radialGradient>
<radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="320" cy="100" r="100" fx="320" fy="100" gradientTransform="skewX(20) translate(-35, 0)">
<stop offset="0%" stop-color="darkblue" />
<stop offset="50%" stop-color="skyblue" />
<stop offset="100%" stop-color="darkblue" />
</radialGradient>
<rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
<rect x="220" y="0" width="200" height="200" fill="url(#gradient2)"/>
</svg>
<br>
<br>
<b>Simple radialGradient gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="500">
<defs>
<radialGradient id="gradA" gradientTransform="rotate(30 0.5 0.5)" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255,0);" />
<stop offset="100%" style="stop-color:rgb(0,0,255)" />
</radialGradient>
</defs>
<rect height="150" width="500" fill="url(#gradA)" />
</svg>
<br>
<br>
<b>radialGradient with non-centered focal point:</b><br>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
<stop stop-color="black" offset="0%"/>
<stop stop-color="teal" offset="50%"/>
<stop stop-color="white" offset="100%"/>
</radialGradient>
</defs>
<circle fill="url(#g1)" cx="100" cy="100" r="100"/>
</svg>
<br>
<br>
<b>Linear gradient using percentages + inline CSS, gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="400">
<defs>