mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-19 22:41:52 +00:00
26e04611e6
examples are not considered a feature of ThorVG; hence, they are excluded from the src directory. This change allows developers to concentrate more effectively on the core ThorVG sources for practical usages.
64 lines
4 KiB
XML
64 lines
4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 50 180 180">
|
|
<defs>
|
|
<!-- LINEAR GRAD -->
|
|
<!-- Object bbox -->
|
|
<linearGradient id="linearGradient1" x1="10%" y1="10%" x2="25%" y2="5%" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(4, 0, 0, 0.5, 0, 0)">
|
|
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="linearGradient2" x1="0.1" y1="0.1" x2="0.25" y2="0.05" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(0.5, 0, 0, 4, 0, 0)">
|
|
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
|
|
</linearGradient>
|
|
|
|
<!-- User space -->
|
|
<linearGradient id="linearGradient3" x1="4%" y1="4%" x2="10%" y2="15%" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 1, 0.2, 0.5, 0, 0)">
|
|
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="linearGradient4" x1="7" y1="7" x2="10" y2="40" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 3, 0, 0.5, 0, 0)">
|
|
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
|
|
</linearGradient>
|
|
|
|
<!-- RADIAL GRAD -->
|
|
<!-- Object bbox -->
|
|
<radialGradient id="radialGradient1" r="10%" cx="100%" cy="50%" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(5.4, 1.1, 1, 0.5, 0, 0.3)">
|
|
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="radialGradient2" r="0.1" cx="1" cy="0.5" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(0.5, -0.3, -0.3, 4, 0, 0)">
|
|
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
|
|
</radialGradient>
|
|
|
|
<!-- User space -->
|
|
<radialGradient id="radialGradient3" r="7%" cx="10%" cy="150%" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 0.4, 0.9, 0.5, 0, -10)">
|
|
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="radialGradient4" r="20" cx="20" cy="350" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(5, 1.1, 0, 0.5, 0, -60)">
|
|
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
|
|
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<g transform="matrix(0.9, -0.25, -0.1, 0.8, -12, 80)">
|
|
<g transform="translate(20, -5) scale(0.5, 1)">
|
|
<rect x="50" y="0" width="100" height="50" fill="url(#linearGradient1)" transform="matrix(0.5, 1, 1.4, 1.4, 0, -100)"/>
|
|
<rect x="200" y="0" width="100" height="60" fill="url(#linearGradient2)" transform="matrix(1.1, 0.2, 0.4, 1, -110, -20)"/>
|
|
<rect x="50" y="150" width="100" height="70" fill="url(#linearGradient3)" transform="matrix(0.9, 1.1, 1.4, 0.8, -100, -90)"/>
|
|
<rect x="200" y="150" width="100" height="70" fill="url(#linearGradient4)" transform="matrix(0.6, -0.1, -0.1, 1.3, 0, -60)"/>
|
|
</g>
|
|
<g transform="translate(120, 70) scale(0.5, 0.8) rotate(-25)">
|
|
<circle cx="50" cy="50" r="80" fill="url(#radialGradient1)" transform="matrix(0.5, -0.1, -0.1, 0.9, 50, 30)"/>
|
|
<circle cx="200" cy="50" r="50" fill="url(#radialGradient2)" transform="matrix(0.6, -0.1, 0.1, 1.3, 20, 50)"/>
|
|
<circle cx="50" cy="150" r="70" fill="url(#radialGradient3)" transform="matrix(0.8, 0.1, 0.1, 0.6, 30, 100)"/>
|
|
<circle cx="200" cy="150" r="70" fill="url(#radialGradient4)" transform="matrix(0.5, -0.3, 0.3, 0.5, 50, 160)"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|