imgs/binary-packing.svg

<svg width="375" height="183" viewBox="0 0 375 183" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_53310_27701)">
<rect width="375" height="183" rx="12" fill="#FFFBFE"/>
<rect width="375" height="183" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
<g filter="url(#filter0_dd_53310_27701)">
<rect x="80" y="29" width="90" height="52" rx="12" fill="#FFFBFE"/>
<rect x="80" y="29" width="90" height="52" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
<g filter="url(#filter1_dd_53310_27701)">
<rect x="170" y="29" width="90" height="52" rx="12" fill="#FFFBFE"/>
<rect x="170" y="29" width="90" height="52" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
<g filter="url(#filter2_dd_53310_27701)">
<rect x="260" y="29" width="90" height="52" rx="12" fill="#FFFBFE"/>
<rect x="260" y="29" width="90" height="52" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
<g filter="url(#filter3_dd_53310_27701)">
<g clip-path="url(#clip1_53310_27701)">
<rect x="83" y="31" width="22" height="48" rx="11" fill="#6750A4"/>
</g>
</g>
<g filter="url(#filter4_dd_53310_27701)">
<g clip-path="url(#clip2_53310_27701)">
<rect x="173" y="31" width="29" height="48" rx="12" fill="#6750A4"/>
</g>
</g>
<g filter="url(#filter5_dd_53310_27701)">
<g clip-path="url(#clip3_53310_27701)">
<rect x="263" y="31" width="21" height="48" rx="10.5" fill="#6750A4"/>
</g>
</g>
<line x1="80" y1="95" x2="350" y2="95" stroke="#CAC4D0"/>
<path d="M31.7891 90.4688H33.1016L35.5684 97.0488L38.0293 90.4688H39.3418L36.084 99H35.041L31.7891 90.4688ZM31.1914 90.4688H32.4395L32.6562 96.1641V99H31.1914V90.4688ZM38.6914 90.4688H39.9453V99H38.4746V96.1641L38.6914 90.4688ZM48.9941 94.5V94.9688C48.9941 95.6133 48.9102 96.1914 48.7422 96.7031C48.5742 97.2148 48.334 97.6504 48.0215 98.0098C47.7129 98.3691 47.3418 98.6445 46.9082 98.8359C46.4746 99.0234 45.9941 99.1172 45.4668 99.1172C44.9434 99.1172 44.4648 99.0234 44.0312 98.8359C43.6016 98.6445 43.2285 98.3691 42.9121 98.0098C42.5957 97.6504 42.3496 97.2148 42.1738 96.7031C42.002 96.1914 41.916 95.6133 41.916 94.9688V94.5C41.916 93.8555 42.002 93.2793 42.1738 92.7715C42.3457 92.2598 42.5879 91.8242 42.9004 91.4648C43.2168 91.1016 43.5898 90.8262 44.0195 90.6387C44.4531 90.4473 44.9316 90.3516 45.4551 90.3516C45.9824 90.3516 46.4629 90.4473 46.8965 90.6387C47.3301 90.8262 47.7031 91.1016 48.0156 91.4648C48.3281 91.8242 48.5684 92.2598 48.7363 92.7715C48.9082 93.2793 48.9941 93.8555 48.9941 94.5ZM47.5234 94.9688V94.4883C47.5234 94.0117 47.4766 93.5918 47.3828 93.2285C47.293 92.8613 47.1582 92.5547 46.9785 92.3086C46.8027 92.0586 46.5859 91.8711 46.3281 91.7461C46.0703 91.6172 45.7793 91.5527 45.4551 91.5527C45.1309 91.5527 44.8418 91.6172 44.5879 91.7461C44.334 91.8711 44.1172 92.0586 43.9375 92.3086C43.7617 92.5547 43.627 92.8613 43.5332 93.2285C43.4395 93.5918 43.3926 94.0117 43.3926 94.4883V94.9688C43.3926 95.4453 43.4395 95.8672 43.5332 96.2344C43.627 96.6016 43.7637 96.9121 43.9434 97.166C44.127 97.416 44.3457 97.6055 44.5996 97.7344C44.8535 97.8594 45.1426 97.9219 45.4668 97.9219C45.7949 97.9219 46.0859 97.8594 46.3398 97.7344C46.5938 97.6055 46.8086 97.416 46.9844 97.166C47.1602 96.9121 47.293 96.6016 47.3828 96.2344C47.4766 95.8672 47.5234 95.4453 47.5234 94.9688ZM53.7598 97.4414L56.0039 90.4688H57.627L54.5684 99H53.4727L53.7598 97.4414ZM51.6855 90.4688L53.9121 97.4414L54.2168 99H53.1152L50.0684 90.4688H51.6855ZM64.666 97.834V99H60.1367V97.834H64.666ZM60.5527 90.4688V99H59.082V90.4688H60.5527ZM64.0742 94.0312V95.1797H60.1367V94.0312H64.0742ZM64.6367 90.4688V91.6406H60.1367V90.4688H64.6367Z" fill="#6750A4"/>
<g filter="url(#filter6_dd_53310_27701)">
<g clip-path="url(#clip4_53310_27701)">
<rect x="80" y="109" width="29" height="48" rx="12" fill="#FFFBFE"/>
<rect x="80" y="109" width="29" height="48" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
</g>
<g filter="url(#filter7_dd_53310_27701)">
<g clip-path="url(#clip5_53310_27701)">
<rect x="109" y="109" width="29" height="48" rx="12" fill="#FFFBFE"/>
<rect x="109" y="109" width="29" height="48" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
</g>
<g filter="url(#filter8_dd_53310_27701)">
<g clip-path="url(#clip6_53310_27701)">
<rect x="138" y="109" width="29" height="48" rx="12" fill="#FFFBFE"/>
<rect x="138" y="109" width="29" height="48" rx="12" fill="#6750A4" fill-opacity="0.05"/>
</g>
</g>
<g clip-path="url(#clip7_53310_27701)">
<rect x="80" y="109" width="22" height="48" rx="11" fill="#6750A4"/>
</g>
<g clip-path="url(#clip8_53310_27701)">
<rect x="109" y="109" width="29" height="48" rx="12" fill="#6750A4"/>
</g>
<g clip-path="url(#clip9_53310_27701)">
<rect x="138" y="109" width="21" height="48" rx="10.5" fill="#6750A4"/>
</g>
<defs>
<filter id="filter0_dd_53310_27701" x="76" y="26" width="98" height="60" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter1_dd_53310_27701" x="166" y="26" width="98" height="60" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter2_dd_53310_27701" x="256" y="26" width="98" height="60" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter3_dd_53310_27701" x="79" y="28" width="30" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter4_dd_53310_27701" x="169" y="28" width="37" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter5_dd_53310_27701" x="259" y="28" width="29" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter6_dd_53310_27701" x="76" y="106" width="37" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter7_dd_53310_27701" x="105" y="106" width="37" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<filter id="filter8_dd_53310_27701" x="134" y="106" width="37" height="56" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_53310_27701"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_53310_27701"/>
<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="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_53310_27701" result="effect2_dropShadow_53310_27701"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_53310_27701" result="shape"/>
</filter>
<clipPath id="clip0_53310_27701">
<rect width="375" height="183" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip1_53310_27701">
<rect x="83" y="31" width="22" height="48" rx="11" fill="white"/>
</clipPath>
<clipPath id="clip2_53310_27701">
<rect x="173" y="31" width="29" height="48" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip3_53310_27701">
<rect x="263" y="31" width="21" height="48" rx="10.5" fill="white"/>
</clipPath>
<clipPath id="clip4_53310_27701">
<rect x="80" y="109" width="29" height="48" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip5_53310_27701">
<rect x="109" y="109" width="29" height="48" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip6_53310_27701">
<rect x="138" y="109" width="29" height="48" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip7_53310_27701">
<rect x="80" y="109" width="22" height="48" rx="11" fill="white"/>
</clipPath>
<clipPath id="clip8_53310_27701">
<rect x="109" y="109" width="29" height="48" rx="12" fill="white"/>
</clipPath>
<clipPath id="clip9_53310_27701">
<rect x="138" y="109" width="21" height="48" rx="10.5" fill="white"/>
</clipPath>
</defs>
</svg>