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.
108 lines
5.0 KiB
108 lines
5.0 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%">
|
|
<rect width="100%" height="100%" />
|
|
<image xlink:href="dark.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
|
|
</pattern>
|
|
<pattern id="light-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
|
<rect width="100%" height="100%" />
|
|
<image xlink:href="light.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
|
|
</pattern>
|
|
<pattern id="middle-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
|
<rect width="100%" height="100%" />
|
|
<image xlink:href="middle.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
|
|
</pattern>
|
|
|
|
<!-- Crop masks -->
|
|
<mask id="outer-crop-mask">
|
|
<rect width="100%" height="100%" fill="black" />
|
|
<circle cx="50%" cy="50%" r="50%" fill="white" />
|
|
</mask>
|
|
<mask id="inner-crop-mask">
|
|
<rect width="100%" height="100%" fill="white" />
|
|
<circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
|
|
</mask>
|
|
|
|
<!-- Layer 1 -->
|
|
<linearGradient id="layer-1-gradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop stop-color="white" offset="16%" />
|
|
<stop stop-color="black" offset="91%" />
|
|
</linearGradient>
|
|
<mask id="layer-1-gradient-mask">
|
|
<rect width="100%" height="50%" fill="url(#layer-1-gradient)" />
|
|
</mask>
|
|
<mask id="layer-1-alt-gradient-mask">
|
|
<rect width="100%" height="100%" fill="white" mask="url(#layer-1-gradient-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
|
|
</mask>
|
|
<mask id="layer-1-mask">
|
|
<rect x="46%" width="8%" height="50%" fill="white" />
|
|
</mask>
|
|
<mask id="layer-1-alt-mask">
|
|
<rect width="100%" height="100%" fill="white" mask="url(#layer-1-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
|
|
</mask>
|
|
|
|
<!-- Layer 2 -->
|
|
<linearGradient id="layer-2-gradient" x1="0" x2="1" y1="0" y2="1">
|
|
<stop stop-color="white" offset="50%" />
|
|
<stop stop-color="black" offset="50%" />
|
|
<stop stop-color="white" offset="58.5%" />
|
|
</linearGradient>
|
|
<mask id="layer-2-mask">
|
|
<rect width="100%" height="100%" fill="url(#layer-2-gradient)" />
|
|
<circle cx="50%" cy="50%" r="42%" fill="black" />
|
|
<polygon points="0,0 256,256 0,512 512,512 512,256 256,256 512,0" fill="black" />
|
|
<rect y="46%" width="50%" height="8%" transform="rotate(45 256 256)" fill="white" />
|
|
<rect x="-5%" y="34%" width="60%" height="16%" transform="rotate(-45 256 256)" fill="black" />
|
|
</mask>
|
|
<mask id="layer-2-alt-mask">
|
|
<rect width="100%" height="100%" fill="white" mask="url(#layer-2-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
|
|
</mask>
|
|
|
|
<!-- Layer 3 -->
|
|
<mask id="layer-3-mask">
|
|
<rect y="46%" width="100%" height="8%" transform="translate(58 58) rotate(-45 256 256)" fill="white" />
|
|
</mask>
|
|
<mask id="layer-3-alt-mask">
|
|
<rect width="100%" height="100%" fill="white" mask="url(#layer-3-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
|
|
</mask>
|
|
|
|
<!-- Layer 4 -->
|
|
<mask id="layer-4-mask">
|
|
<rect y="46%" width="50%" height="8%" fill="white" />
|
|
</mask>
|
|
<mask id="layer-4-alt-mask">
|
|
<rect width="100%" height="100%" fill="white" mask="url(#layer-4-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
|
|
</mask>
|
|
</defs>
|
|
|
|
<g mask="url(#outer-crop-mask)">
|
|
<!-- Background -->
|
|
<rect width="100%" height="100%" fill="url(#middle-pattern)" />
|
|
|
|
<!-- Layers -->
|
|
<g mask="url(#inner-crop-mask)">
|
|
<g mask="url(#layer-1-mask)">
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" />
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-1-gradient-mask)" />
|
|
</g>
|
|
<g mask="url(#layer-1-alt-mask)">
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" />
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-1-alt-gradient-mask)" />
|
|
</g>
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-2-mask)" />
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-2-alt-mask)" />
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-3-mask)" />
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-3-alt-mask)" />
|
|
<rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-4-mask)" />
|
|
<rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-4-alt-mask)" />
|
|
</g>
|
|
</g>
|
|
</svg>
|