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.
135 lines
6.7 KiB
135 lines
6.7 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" x1="0" x2="1" y1="0" y2="1">
|
|
<stop stop-color="white" offset="41.5%" />
|
|
<stop stop-color="black" offset="49.9%" />
|
|
</linearGradient>
|
|
<linearGradient id="light-arrow-gradient" x1="1" x2="0" y1="1" y2="0">
|
|
<stop stop-color="white" offset="41.5%" />
|
|
<stop stop-color="black" offset="49.9%" />
|
|
</linearGradient>
|
|
<linearGradient id="x-gradient" x1="0" x2="1" y1="0" y2="0">
|
|
<stop stop-color="white" offset="11%" />
|
|
<stop stop-color="black" offset="84%" />
|
|
</linearGradient>
|
|
<linearGradient id="y-gradient" x1="0" x2="0" y1="1" y2="0">
|
|
<stop stop-color="white" offset="11%" />
|
|
<stop stop-color="black" offset="84%" />
|
|
</linearGradient>
|
|
|
|
<!-- Cutoff mask -->
|
|
<mask id="cutoff-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="black" />
|
|
<circle cx="50%" cy="50%" r="50%" fill="white" />
|
|
</mask>
|
|
|
|
<!-- Crossover definitions -->
|
|
<mask id="x-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<rect x="0%" y="0%" width="100%" height="46%" fill="black" />
|
|
<rect x="0%" y="54%" width="100%" height="46%" fill="black" />
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
|
|
</mask>
|
|
<mask id="y-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<rect x="0%" y="0%" width="46%" height="100%" fill="black" />
|
|
<rect x="54%" y="0%" width="46%" height="100%" fill="black" />
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
|
|
</mask>
|
|
<mask id="x-gradient-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<rect x="50%" y="0%" width="50%" height="100%" fill="url(#x-gradient)" />
|
|
</mask>
|
|
<mask id="y-gradient-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<rect x="0%" y="0%" width="100%" height="50%" fill="url(#y-gradient)" />
|
|
</mask>
|
|
|
|
<!-- Grid definitions -->
|
|
<mask id="dark-grid-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<circle cx="50%" cy="50%" r="42%" fill="black" />
|
|
<rect x="46%" y="70%" width="8%" height="25%" fill="white" transform="rotate(-45 256 256)" />
|
|
<rect x="0%" y="0%" width="100%" height="50%" fill="black" transform="rotate(45 256 256) translate(0 -20)" />
|
|
<rect x="46%" y="50%" width="8%" height="46%" fill="white" />
|
|
<rect x="-4%" y="40%" width="25%" height="25%" fill="black" transform="rotate(-45 256 256)" />
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
|
|
<polygon fill="black" points="-1,-1 -1,513 513,-1" />
|
|
</mask>
|
|
<mask id="light-grid-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="white" />
|
|
<circle cx="50%" cy="50%" r="42%" fill="black" />
|
|
<rect x="46%" y="6%" width="8%" height="25%" fill="white" transform="rotate(-45 256 256)" />
|
|
<rect x="0%" y="0%" width="100%" height="50%" fill="black" transform="rotate(45 256 256) translate(0 -20)" />
|
|
<rect x="4%" y="46%" width="50%" height="8%" fill="white" />
|
|
<rect x="-4%" y="30%" width="25%" height="25%" fill="black" transform="rotate(-45 256 256)" />
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
|
|
<polygon fill="black" points="-1,513 513,513 513,-1" />
|
|
</mask>
|
|
|
|
<!-- Arrow definitions -->
|
|
<mask id="dark-arrow-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#dark-arrow-gradient)" />
|
|
<circle cx="50%" cy="50%" r="42%" fill="black" />
|
|
<rect x="0%" y="0%" width="46%" height="100%" fill="black" />
|
|
<rect x="0%" y="54%" width="100%" height="46%" fill="black" />
|
|
<rect x="46%" y="-50%" width="8%" height="110%" fill="white" transform="rotate(45 256 256) translate(-82 282)" />
|
|
<rect x="0%" y="46%" width="50%" height="8%" fill="black" />
|
|
<rect x="40%" y="0%" width="10%" height="10%" fill="black" />
|
|
</mask>
|
|
<mask id="light-arrow-mask">
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#light-arrow-gradient)" />
|
|
<circle cx="50%" cy="50%" r="42%" fill="black" />
|
|
<rect x="0%" y="0%" width="46%" height="100%" fill="black" />
|
|
<rect x="0%" y="54%" width="100%" height="46%" fill="black" />
|
|
<rect x="46%" y="-50%" width="8%" height="110%" fill="white" transform="rotate(45 256 256) translate(82 282)" />
|
|
<rect x="46%" y="50%" width="8%" height="50%" fill="black" />
|
|
<rect x="90%" y="50%" width="10%" height="10%" fill="black" />
|
|
</mask>
|
|
</defs>
|
|
|
|
<g mask="url(#cutoff-mask)">
|
|
<!-- Background -->
|
|
<rect width="100%" height="100%" fill="url(#middle-pattern)" />
|
|
|
|
<!-- Crossovers -->
|
|
<g mask="url(#x-mask)">
|
|
<rect x="50%" y="0%" width="50%" height="100%" fill="url(#light-pattern)" />
|
|
<rect x="50%" y="0%" width="50%" height="100%" fill="url(#dark-pattern)" mask="url(#x-gradient-mask)" />
|
|
</g>
|
|
<g mask="url(#y-mask)">
|
|
<rect x="0%" y="0%" width="100%" height="50%" fill="url(#dark-pattern)" />
|
|
<rect x="0%" y="0%" width="100%" height="50%" fill="url(#light-pattern)" mask="url(#y-gradient-mask)" />
|
|
</g>
|
|
|
|
<!-- 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)" />
|
|
</g>
|
|
</svg>
|