blob: 124a13d40195a4a6d245c7b1ac682ceaaca09799 [file] [log] [blame]
<html><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000px" height="2000px">
<linearGradient id="base-grad" x1="-100%" y1="-100%" x2="-50%" y2="-50%">
<stop stop-color="green" offset="0"/>
<stop stop-color="green" offset="0.5"/>
<stop stop-color="blue" offset="0.5"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
<linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
<linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
<linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
<mask id="mymask">
<g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
<rect x="100" y="400" width="1100" height="105" fill="white" />
</g>
</mask>
<!-- Invert the mask for the other rect, so that we don't get anti-aliasing differences -->
<mask id="mymask-inv">
<rect x="0" y="0" width="2000" height="2000" fill="white" />
<g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
<rect x="100" y="400" width="1100" height="105" fill="black" />
</g>
</mask>
<mask id="mymask2">
<g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
<rect x="100" y="510" width="1100" height="55" fill="white" />
<rect x="100" y="620" width="1100" height="55" fill="white" />
</g>
</mask>
<mask id="mymask2-inv">
<rect x="0" y="0" width="2000" height="2000" fill="white" />
<g transform="translate(-10 -50) scale(0.5) rotate(-7) translate(-200 0)">
<rect x="100" y="510" width="1100" height="55" fill="black" />
<rect x="100" y="620" width="1100" height="55" fill="black" />
</g>
</mask>
<g transform="translate(200 0) rotate(7) scale(2)">
<rect x="10" y="35" width="460" height="55" fill="blue"/>
<rect x="10" y="120" width="460" height="55" fill="green" mask="url(#mymask-inv)"/>
<rect x="10" y="120" width="460" height="55" fill="blue" mask="url(#mymask)" />
<rect x="10" y="205" width="460" height="55" fill="blue" mask="url(#mymask2-inv)"/>
<rect x="10" y="205" width="460" height="55" fill="green" mask="url(#mymask2)"/>
</g>
<rect x="180" y="65" width="50" height="55" fill="grey" />
<rect x="100" y="295" width="1100" height="10" fill="grey" />
<rect x="100" y="400" width="1100" height="10" fill="grey" />
<rect x="100" y="460" width="1100" height="10" fill="grey" />
<rect x="100" y="517" width="1100" height="10" fill="grey" />
<rect x="100" y="570" width="1100" height="10" fill="grey" />
</svg></html>