assets/mixmatter-icon-light.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-labelledby="title desc">
<title id="title">Mixmatter icon — Light</title>
<desc id="desc">Mixmatter layered material icon with source card, architecture card, halftone card, cyan tape and lavender marker.</desc>
<defs>
<linearGradient id="tray" x1="160" y1="90" x2="850" y2="930" gradientUnits="userSpaceOnUse"><stop stop-color="#FCFEFF"/><stop offset="1" stop-color="#F3F7FD"/></linearGradient>
<linearGradient id="sky" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#0D57CE"/><stop offset="1" stop-color="#2387FF"/></linearGradient>
<linearGradient id="concrete" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#F0F2F5"/><stop offset=".55" stop-color="#CCD2D9"/><stop offset="1" stop-color="#AAB2BC"/></linearGradient>
<linearGradient id="lav" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#B2A7FF"/><stop offset="1" stop-color="#8675ED"/></linearGradient>
<filter id="trayShadow" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="30" stdDeviation="34" flood-color="#09111E" flood-opacity=".16"/></filter>
<filter id="cardShadow" x="-30%" y="-30%" width="160%" height="170%"><feDropShadow dx="0" dy="16" stdDeviation="18" flood-color="#08101D" flood-opacity=".20"/></filter>
<filter id="smallShadow" x="-40%" y="-40%" width="180%" height="180%"><feDropShadow dx="0" dy="9" stdDeviation="10" flood-color="#08101D" flood-opacity=".22"/></filter>
<filter id="paperNoise" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency=".7" numOctaves="2" seed="9" result="noise"/><feColorMatrix in="noise" type="saturate" values="0" result="mono"/><feComponentTransfer in="mono" result="softNoise"><feFuncA type="table" tableValues="0 .05"/></feComponentTransfer><feBlend in="SourceGraphic" in2="softNoise" mode="multiply"/></filter>
<pattern id="dots" width="18" height="18" patternUnits="userSpaceOnUse"><circle cx="4" cy="4" r="3.4" fill="#111820"/><circle cx="13" cy="13" r="2.2" fill="#111820" opacity=".82"/></pattern>
<pattern id="fineDots" width="12" height="12" patternUnits="userSpaceOnUse"><circle cx="3" cy="3" r="1.65" fill="#111820" opacity=".82"/><circle cx="9" cy="9" r="1.2" fill="#111820" opacity=".62"/></pattern>
<clipPath id="archClip"><rect x="530" y="220" width="346" height="486" rx="66"/></clipPath>
<clipPath id="halfClip"><rect x="232" y="484" width="406" height="354" rx="58"/></clipPath>
</defs>
<rect x="54" y="54" width="916" height="916" rx="210" fill="url(#tray)" stroke="#DCE7F5" stroke-width="8" filter="url(#trayShadow)"/>
<g transform="rotate(-7 366 339)" filter="url(#cardShadow)"><rect x="188" y="184" width="360" height="310" rx="58" fill="#FCFDFE" stroke="#E5EBF2" stroke-width="4"/><g filter="url(#paperNoise)"><rect x="188" y="184" width="360" height="310" rx="58" fill="#FCFDFE" opacity=".9"/></g><circle cx="284" cy="284" r="39" fill="#126BFF"/><rect x="250" y="365" width="190" height="12" rx="6" fill="#A7AFBC"/><rect x="250" y="397" width="142" height="10" rx="5" fill="#A7AFBC" opacity=".92"/></g>
<g filter="url(#cardShadow)"><g clip-path="url(#archClip)"><rect x="530" y="220" width="346" height="486" rx="66" fill="url(#sky)"/><path d="M500 500 L900 300 L900 760 L665 760 Z" fill="url(#concrete)"/><path d="M706 525 L900 430 L900 760 L793 760 Z" fill="#111820"/><path d="M706 525 L900 430 L900 475 L738 552 Z" fill="#2D343D"/><path d="M500 500 L900 300 L900 344 L527 532 Z" fill="#F7F8FA" opacity=".82"/><g opacity=".2" filter="url(#paperNoise)"><rect x="530" y="220" width="346" height="486" fill="#66717D"/></g></g><rect x="530" y="220" width="346" height="486" rx="66" fill="none" stroke="#9FCCFF" stroke-width="4" opacity=".9"/></g>
<g filter="url(#cardShadow)"><rect x="232" y="484" width="406" height="354" rx="58" fill="#FBFCFE" stroke="#E0E6EE" stroke-width="4"/><g clip-path="url(#halfClip)"><path d="M232 484 H638 V648 C586 638 546 626 504 604 C446 574 404 533 360 516 C316 500 275 500 232 510 Z" fill="#126BFF"/><path d="M232 520 C300 512 356 532 405 566 C454 601 494 640 547 666 C579 681 607 687 638 689 V838 H232 Z" fill="#FFFFFF"/><path d="M232 500 C298 496 350 512 401 545 C454 580 493 619 548 643 C582 658 608 663 638 666 V738 C592 727 548 711 507 686 C454 653 416 617 367 589 C320 562 278 550 232 552 Z" fill="#F6F8FB"/><rect x="232" y="484" width="406" height="354" fill="url(#fineDots)" opacity=".92"/><path d="M232 650 C318 612 390 621 457 665 C519 706 568 748 638 770 V838 H232 Z" fill="url(#dots)" opacity=".98"/></g></g>
<g transform="rotate(-14 520 468)" filter="url(#smallShadow)"><rect x="452" y="425" width="164" height="86" rx="4" fill="#A9E5F6" opacity=".66"/><path d="M452 428 H616" stroke="#D7F4FB" stroke-width="3" opacity=".72" stroke-dasharray="7 5"/></g>
<circle cx="640" cy="690" r="66" fill="url(#lav)" stroke="#9B8BF5" stroke-width="4" filter="url(#smallShadow)"/>
</svg>