You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
4.2 KiB
85 lines
4.2 KiB
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512" height="512" viewBox="0 0 512 512">
|
|
<!-- Remove to show images -->
|
|
<style type="text/css">
|
|
#dark-pattern rect { fill: black }
|
|
#light-pattern rect { fill: white }
|
|
#middle-pattern rect { fill: gray }
|
|
</style>
|
|
|
|
<defs>
|
|
<!-- Background patterns -->
|
|
<pattern id="dark-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
|
<image xlink:href="dark.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
|
|
<rect width="100%" height="100%"/>
|
|
</pattern>
|
|
<pattern id="light-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
|
<image xlink:href="light.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
|
|
<rect width="100%" height="100%"/>
|
|
</pattern>
|
|
<pattern id="middle-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
|
<image xlink:href="middle.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
|
|
<rect width="100%" height="100%"/>
|
|
</pattern>
|
|
|
|
<!-- Gradients for arrow -->
|
|
<linearGradient id="dark-arrow-gradient-1" x1="0" x2="1" y1="0" y2="0">
|
|
<stop stop-color="white" offset="50%"/>
|
|
<stop stop-color="black" offset="84%"/>
|
|
</linearGradient>
|
|
<linearGradient id="dark-arrow-gradient-2" x1="0" x2="0" y1="0" y2="1">
|
|
<stop stop-color="white" offset="19%"/>
|
|
<stop stop-color="black" offset="100%"/>
|
|
</linearGradient>
|
|
<linearGradient id="light-arrow-gradient-1" x1="0" x2="0" y1="1" y2="0">
|
|
<stop stop-color="white" offset="50%"/>
|
|
<stop stop-color="black" offset="84%"/>
|
|
</linearGradient>
|
|
<linearGradient id="light-arrow-gradient-2" x1="1" x2="0" y1="0" y2="0">
|
|
<stop stop-color="white" offset="19%"/>
|
|
<stop stop-color="black" offset="100%"/>
|
|
</linearGradient>
|
|
|
|
<!-- Grid definitions -->
|
|
<mask id="dark-grid-mask">
|
|
<rect x="50%" y="46%" width="50%" height="8%" fill="white"/>
|
|
<rect x="46%" y="50%" width="8%" height="50%" fill="white"/>
|
|
<rect x="28%" y="92%" width="72%" height="8%" fill="white"/>
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black"/>
|
|
<rect x="47%" y="63%" width="8%" height="87%" fill="white" transform="rotate(-45 256 256) translate(4)"/>
|
|
<polygon fill="black" points="-1,-1 -1,513 513,-1"/>
|
|
</mask>
|
|
<mask id="light-grid-mask">
|
|
<rect x="0%" y="0%" width="8%" height="72%" fill="white"/>
|
|
<rect x="46%" y="0%" width="8%" height="54%" fill="white"/>
|
|
<rect x="0%" y="46%" width="50%" height="8%" fill="white"/>
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black"/>
|
|
<rect x="47%" y="-50%" width="8%" height="87%" fill="white" transform="rotate(-45 256 256) translate(4)"/>
|
|
<polygon fill="black" points="-1,513 513,513 513,-1"/>
|
|
</mask>
|
|
|
|
<!-- Arrow definitions -->
|
|
<mask id="dark-arrow-mask">
|
|
<rect x="46%" y="-50%" width="8%" height="200%" fill="white" transform="rotate(45 256 256) translate(-82 -82)"/>
|
|
<rect x="50%" y="0%" width="50%" height="8%" fill="url(#dark-arrow-gradient-1)"/>
|
|
<rect x="0%" y="46%" width="50%" height="8%" fill="black"/>
|
|
<rect x="46%" y="0%" width="8%" height="44%" fill="url(#dark-arrow-gradient-2)"/>
|
|
</mask>
|
|
<mask id="light-arrow-mask">
|
|
<rect x="46%" y="-50%" width="8%" height="200%" fill="white" transform="rotate(45 256 256) translate(82 82)"/>
|
|
<rect x="92%" y="0%" width="8%" height="50%" fill="url(#light-arrow-gradient-1)"/>
|
|
<rect x="46%" y="50%" width="8%" height="50%" fill="black"/>
|
|
<rect x="56%" y="46%" width="44%" height="8%" fill="url(#light-arrow-gradient-2)"/>
|
|
</mask>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="100%" height="100%" fill="url(#middle-pattern)"/>
|
|
|
|
<!-- Grids -->
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#dark-grid-mask)"/>
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#light-grid-mask)"/>
|
|
|
|
<!-- Arrows -->
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#dark-arrow-mask)"/>
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#light-arrow-mask)"/>
|
|
</svg>
|