qwik-site/assets/images/design-colors-showcase.svg

110 lines
8.8 KiB
XML
Raw Normal View History

2021-08-10 20:18:29 +02:00
<svg viewBox="0 0 550 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="550" height="350" fill="#20203F"/>
<g filter="url(#filter0_d)">
<rect x="41" y="241" width="50.7" height="46.8" transform="rotate(-90 41 241)" fill="#BF3638"/>
<rect x="187.25" y="241" width="50.7" height="56.55" transform="rotate(-90 187.25 241)" fill="#53A545"/>
<rect x="347.15" y="241" width="50.7" height="48.75" transform="rotate(-90 347.15 241)" fill="#2143CA"/>
<rect x="109.25" y="241" width="50.7" height="56.55" transform="rotate(-90 109.25 241)" fill="#BD920F"/>
<rect x="271.1" y="241" width="50.7" height="50.7" transform="rotate(-90 271.1 241)" fill="#2CA3A5"/>
<rect x="425.15" y="241" width="50.7" height="50.7" transform="rotate(-90 425.15 241)" fill="#B63AB0"/>
<rect x="80" y="241" width="50.7" height="39" transform="rotate(-90 80 241)" fill="#AF6118"/>
<rect x="236" y="241" width="50.7" height="39" transform="rotate(-90 236 241)" fill="#2AA764"/>
<rect x="392" y="241" width="50.7" height="39" transform="rotate(-90 392 241)" fill="#613FD9"/>
<rect x="158" y="241" width="50.7" height="39" transform="rotate(-90 158 241)" fill="#7D9A37"/>
<rect x="314" y="241" width="50.7" height="39" transform="rotate(-90 314 241)" fill="#1C67B5"/>
<rect x="470" y="241" width="50.7" height="39" transform="rotate(-90 470 241)" fill="#D0356D"/>
<rect x="41" y="98.65" width="52.65" height="42.9" transform="rotate(-90 41 98.65)" fill="#FA999A"/>
<rect x="181.4" y="98.65" width="52.65" height="74.1" transform="rotate(-90 181.4 98.65)" fill="#BCF0B2"/>
<rect x="341.3" y="98.65" width="52.65" height="66.3" transform="rotate(-90 341.3 98.65)" fill="#B1C0FC"/>
<rect x="109.25" y="98.65" width="52.65" height="62.4" transform="rotate(-90 109.25 98.65)" fill="#FFE38F"/>
<rect x="255.5" y="98.65" width="52.65" height="78" transform="rotate(-90 255.5 98.65)" fill="#B7EFF0"/>
<rect x="413.45" y="98.65" width="52.65" height="72.15" transform="rotate(-90 413.45 98.65)" fill="#EFB1F1"/>
<rect x="80" y="98.65" width="52.65" height="39" transform="rotate(-90 80 98.65)" fill="#F9AE67"/>
<rect x="236" y="98.65" width="52.65" height="39" transform="rotate(-90 236 98.65)" fill="#A9F4CC"/>
<rect x="392" y="98.65" width="52.65" height="39" transform="rotate(-90 392 98.65)" fill="#CFC2FE"/>
<rect x="158" y="98.65" width="52.65" height="39" transform="rotate(-90 158 98.65)" fill="#BCF0B2"/>
<rect x="314" y="98.65" width="52.65" height="39" transform="rotate(-90 314 98.65)" fill="#A3CEFA"/>
<rect x="470" y="98.65" width="52.65" height="39" transform="rotate(-90 470 98.65)" fill="#FBA7C6"/>
<rect x="41" y="176.65" width="72.15" height="46.8" transform="rotate(-90 41 176.65)" fill="#EF5255"/>
<rect x="187.25" y="176.65" width="72.15" height="56.55" transform="rotate(-90 187.25 176.65)" fill="#72D661"/>
<rect x="347.15" y="176.65" width="72.15" height="48.75" transform="rotate(-90 347.15 176.65)" fill="#4C6DEF"/>
<rect x="109.25" y="176.65" width="72.15" height="56.55" transform="rotate(-90 109.25 176.65)" fill="#F4C025"/>
<rect x="271.1" y="176.65" width="72.15" height="50.7" transform="rotate(-90 271.1 176.65)" fill="#4CDCDF"/>
<rect x="425.15" y="176.65" width="72.15" height="50.7" transform="rotate(-90 425.15 176.65)" fill="#E175DB"/>
<rect x="80" y="176.65" width="72.15" height="39" transform="rotate(-90 80 176.65)" fill="#EB801B"/>
<rect x="236" y="176.65" width="72.15" height="39" transform="rotate(-90 236 176.65)" fill="#3DDF89"/>
<rect x="392" y="176.65" width="72.15" height="39" transform="rotate(-90 392 176.65)" fill="#967CF4"/>
<rect x="158" y="176.65" width="72.15" height="39" transform="rotate(-90 158 176.65)" fill="#AED651"/>
<rect x="314" y="176.65" width="72.15" height="39" transform="rotate(-90 314 176.65)" fill="#4C9CEF"/>
<rect x="470" y="176.65" width="72.15" height="39" transform="rotate(-90 470 176.65)" fill="#EE588F"/>
<rect x="41" y="202" width="39" height="46.8" transform="rotate(-90 41 202)" fill="#D5484A"/>
<rect x="187.25" y="202" width="39" height="56.55" transform="rotate(-90 187.25 202)" fill="#61C350"/>
<rect x="347.15" y="202" width="39" height="48.75" transform="rotate(-90 347.15 202)" fill="#3457E5"/>
<rect x="109.25" y="202" width="39" height="56.55" transform="rotate(-90 109.25 202)" fill="#DFAC11"/>
<rect x="271.1" y="202" width="39" height="50.7" transform="rotate(-90 271.1 202)" fill="#2DCACD"/>
<rect x="425.15" y="202" width="39" height="50.7" transform="rotate(-90 425.15 202)" fill="#D152CB"/>
<rect x="80" y="202" width="39" height="39" transform="rotate(-90 80 202)" fill="#DA7516"/>
<rect x="236" y="202" width="39" height="39" transform="rotate(-90 236 202)" fill="#2ACB75"/>
<rect x="392" y="202" width="39" height="39" transform="rotate(-90 392 202)" fill="#7C5DE9"/>
<rect x="158" y="202" width="39" height="39" transform="rotate(-90 158 202)" fill="#96BB3E"/>
<rect x="314" y="202" width="39" height="39" transform="rotate(-90 314 202)" fill="#2A83DF"/>
<rect x="470" y="202" width="39" height="39" transform="rotate(-90 470 202)" fill="#E2407C"/>
<rect x="41" y="124" width="39" height="46.8" transform="rotate(-90 41 124)" fill="#FA7A7C"/>
<rect x="187.25" y="124" width="39" height="56.55" transform="rotate(-90 187.25 124)" fill="#93E684"/>
<rect x="347.15" y="124" width="39" height="48.75" transform="rotate(-90 347.15 124)" fill="#748FFB"/>
<rect x="109.25" y="124" width="39" height="56.55" transform="rotate(-90 109.25 124)" fill="#FFD147"/>
<rect x="271.1" y="124" width="39" height="50.7" transform="rotate(-90 271.1 124)" fill="#6BE8EB"/>
<rect x="425.15" y="124" width="39" height="50.7" transform="rotate(-90 425.15 124)" fill="#EC9AEF"/>
<rect x="80" y="124" width="39" height="39" transform="rotate(-90 80 124)" fill="#F99434"/>
<rect x="236" y="124" width="39" height="39" transform="rotate(-90 236 124)" fill="#5DEEA1"/>
<rect x="392" y="124" width="39" height="39" transform="rotate(-90 392 124)" fill="#BCAAFC"/>
<rect x="158" y="124" width="39" height="39" transform="rotate(-90 158 124)" fill="#C2E571"/>
<rect x="314" y="124" width="39" height="39" transform="rotate(-90 314 124)" fill="#74B6FB"/>
<rect x="470" y="124" width="39" height="39" transform="rotate(-90 470 124)" fill="#FA80AC"/>
</g>
<g filter="url(#filter1_d)">
<rect x="35" y="272" width="38" height="32" fill="#00001F"/>
<rect x="156" y="272" width="45" height="32" fill="#40405F"/>
<rect x="285" y="272" width="51" height="32" fill="#80809F"/>
<rect x="415" y="272" width="42" height="32" fill="#C0C0DF"/>
<rect x="93" y="272" width="46" height="32" fill="#20203F"/>
<rect x="219" y="272" width="50" height="32" fill="#60607F"/>
<rect x="349" y="272" width="42" height="32" fill="#A0A0BF"/>
<rect x="475" y="272" width="40" height="32" fill="#E0E0FF"/>
<rect x="67" y="272" width="32" height="32" fill="#10102F"/>
<rect x="195" y="272" width="32" height="32" fill="#50506F"/>
<rect x="323" y="272" width="32" height="32" fill="#9090AF"/>
<rect x="451" y="272" width="32" height="32" fill="#D0D0EF"/>
<rect x="131" y="272" width="32" height="32" fill="#30304F"/>
<rect x="259" y="272" width="32" height="32" fill="#70708F"/>
<rect x="387" y="272" width="32" height="32" fill="#B0B0CF"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="5" y="16" width="540" height="267" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="18"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.121569 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="-1" y="242" width="552" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="18"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.121569 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="550" height="350" fill="white"/>
</clipPath>
</defs>
</svg>