@wix/design-system-illustrations 2.25.0 → 2.27.0

package/src/CreateAComponent.svg

@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.1714 46.5853C46.343 47.7568 46.343 49.6562 45.1716 50.8278L38.1216 57.8786C36.9501 59.0503 35.0505 59.0504 33.8789 57.8787L26.8286 50.8285C25.6571 49.657 25.6571 47.7575 26.8286 46.5859L33.879 39.5355C35.0506 38.364 36.9501 38.364 38.1216 39.5355L45.1714 46.5853ZM57.8785 33.8794C59.0501 35.0509 59.0501 36.9504 57.8785 38.122L50.8293 45.1712C49.6578 46.3427 47.7585 46.3428 46.5869 45.1715L39.5362 38.1226C38.3645 36.9511 38.3643 35.0515 39.5359 33.8798L46.5855 26.8293C47.7571 25.6576 49.6567 25.6575 50.8283 26.8291L57.8785 33.8794ZM32.4648 33.8787C33.6364 35.0503 33.6364 36.9497 32.4648 38.1213L25.415 45.1711C24.2435 46.3426 22.3441 46.3427 21.1725 45.1712L14.1223 38.1219C12.9506 36.9504 12.9505 35.0509 14.122 33.8792L21.1718 26.8286C22.3433 25.6569 24.2429 25.6568 25.4146 26.8285L32.4648 33.8787ZM45.1707 21.1716C46.3423 22.3431 46.3423 24.2425 45.1709 25.4141L38.1215 32.4643C36.95 33.636 35.0505 33.6361 33.8789 32.4646L26.8282 25.4148C25.6565 24.2433 25.6565 22.3437 26.8281 21.172L33.8783 14.1218C35.0499 12.9502 36.9494 12.9502 38.1209 14.1218L45.1707 21.1716Z" fill="#002291"/>
+<mask id="mask0_1383_9089" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="13" y="13" width="46" height="46">
+<path d="M45.1714 46.5853C46.343 47.7568 46.343 49.6562 45.1716 50.8278L38.1216 57.8786C36.9501 59.0503 35.0505 59.0504 33.8789 57.8787L26.8286 50.8285C25.6571 49.657 25.6571 47.7575 26.8286 46.5859L33.879 39.5355C35.0506 38.364 36.9501 38.364 38.1216 39.5355L45.1714 46.5853ZM57.8785 33.8794C59.0501 35.0509 59.0501 36.9504 57.8785 38.122L50.8293 45.1712C49.6578 46.3427 47.7585 46.3428 46.5869 45.1715L39.5362 38.1226C38.3645 36.9511 38.3643 35.0515 39.5359 33.8798L46.5855 26.8293C47.7571 25.6576 49.6567 25.6575 50.8283 26.8291L57.8785 33.8794ZM32.4648 33.8787C33.6364 35.0503 33.6364 36.9497 32.4648 38.1213L25.415 45.1711C24.2435 46.3426 22.3441 46.3427 21.1725 45.1712L14.1223 38.1219C12.9506 36.9504 12.9505 35.0509 14.122 33.8792L21.1718 26.8286C22.3433 25.6569 24.2429 25.6568 25.4146 26.8285L32.4648 33.8787ZM45.1707 21.1716C46.3423 22.3431 46.3423 24.2425 45.1709 25.4141L38.1215 32.4643C36.95 33.636 35.0505 33.6361 33.8789 32.4646L26.8282 25.4148C25.6565 24.2433 25.6565 22.3437 26.8281 21.172L33.8783 14.1218C35.0499 12.9502 36.9494 12.9502 38.1209 14.1218L45.1707 21.1716Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1383_9089)">
+<g filter="url(#filter0_f_1383_9089)">
+<rect x="-3.59796" y="20" width="56" height="56" transform="rotate(-45 -3.59796 20)" fill="url(#paint0_linear_1383_9089)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1383_9089" x="-15.598" y="-31.6016" width="103.196" height="103.203" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1383_9089"/>
+</filter>
+<linearGradient id="paint0_linear_1383_9089" x1="44.4598" y1="25.0265" x2="-9.40196" y2="80.0631" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="1" stop-color="#002291"/>
+</linearGradient>
+</defs>
+</svg>

package/src/CreateAContext.svg

@@ -0,0 +1,43 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5541 22.0234H42.505C46.3682 22.0234 49.5 25.1552 49.5 29.0184C49.5 32.8817 46.3682 36.0134 42.505 36.0134H29.495C25.6318 36.0134 22.5 39.1452 22.5 43.0084C22.5 46.8717 25.6318 50.0034 29.495 50.0034H47.1246" stroke="#B8C4FF" stroke-width="2"/>
+<g clip-path="url(#clip0_1383_9075)">
+<rect x="17" y="17" width="10" height="10" rx="5" fill="#002291"/>
+<g filter="url(#filter0_f_1383_9075)">
+<path d="M24.9044 9.74321C24.3667 9.85011 23.8358 9.99839 23.3188 10.1881C21.1954 10.9743 19.3133 12.4709 18.0723 14.5778C15.2354 19.3883 16.8142 25.5505 21.5987 28.3402C26.3832 31.1299 32.5603 29.4885 35.3973 24.678C38.2342 19.8641 36.6554 13.7019 31.8744 10.9157C29.6889 9.63976 27.2174 9.29148 24.9044 9.74321Z" fill="url(#paint0_linear_1383_9075)"/>
+</g>
+</g>
+<g clip-path="url(#clip1_1383_9075)">
+<rect x="46" y="45" width="10" height="10" rx="5" fill="#002291"/>
+<g filter="url(#filter1_f_1383_9075)">
+<path d="M53.9044 37.7432C53.3667 37.8501 52.8358 37.9984 52.3188 38.1881C50.1954 38.9743 48.3133 40.4709 47.0723 42.5778C44.2354 47.3883 45.8142 53.5505 50.5987 56.3402C55.3832 59.1299 61.5603 57.4885 64.3973 52.678C67.2342 47.8641 65.6554 41.7019 60.8744 38.9157C58.6889 37.6398 56.2174 37.2915 53.9044 37.7432Z" fill="url(#paint1_linear_1383_9075)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1383_9075" x="4.66235" y="-2.44531" width="44.145" height="44.1484" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1383_9075"/>
+</filter>
+<filter id="filter1_f_1383_9075" x="33.6624" y="25.5547" width="44.145" height="44.1484" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1383_9075"/>
+</filter>
+<linearGradient id="paint0_linear_1383_9075" x1="33.9503" y1="11.3629" x2="16.718" y2="33.3521" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1383_9075" x1="62.9503" y1="39.3629" x2="45.718" y2="61.3521" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1383_9075">
+<rect x="17" y="17" width="10" height="10" rx="5" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1383_9075">
+<rect x="46" y="45" width="10" height="10" rx="5" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/CreateAFunction.svg

@@ -0,0 +1,29 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1383_9056)">
+<rect x="16" y="16" width="40" height="40" rx="6" fill="#002291"/>
+<g filter="url(#filter0_f_1383_9056)">
+<path d="M16 -19H91V56H16V-19Z" fill="url(#paint0_linear_1383_9056)"/>
+</g>
+<path d="M36.3899 49C33.2099 45.41 33.2099 39.59 36.3899 36" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.6504 49C49.7904 45.41 49.7904 39.59 46.6504 36" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39 40L44 45" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44 40L39 45" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.9998 23C35.1098 23 32.6298 25.05 32.0798 27.89L28.9498 44.11C28.3998 46.95 25.9198 49 23.0298 49H23.0098" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28 32H35" stroke="#2D2D2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_f_1383_9056" x="4" y="-31" width="99" height="99" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1383_9056"/>
+</filter>
+<linearGradient id="paint0_linear_1383_9056" x1="80.3631" y1="-12.268" x2="8.22679" y2="61.4417" gradientUnits="userSpaceOnUse">
+<stop offset="0.176006" stop-color="#EAEFF1"/>
+<stop offset="0.576923" stop-color="#B8C4FF"/>
+<stop offset="1" stop-color="#002291"/>
+</linearGradient>
+<clipPath id="clip0_1383_9056">
+<rect x="16" y="16" width="40" height="40" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/ImageSizeL.svg

@@ -0,0 +1,10 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7882 45H30.9802V27.84H35.1082V41.472H42.7882V45Z" fill="url(#paint0_linear_1383_9046)"/>
+<defs>
+<linearGradient id="paint0_linear_1383_9046" x1="59.4167" y1="12" x2="14.0615" y2="23.3004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002296"/>
+</linearGradient>
+</defs>
+</svg>

package/src/ImageSizeM.svg

@@ -0,0 +1,10 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.0392 42.888H35.0152L30.8152 34.152V45H26.8312V27.84H31.4392L36.5512 38.544L41.6632 27.84H46.1752V45H42.1432V34.344L38.0392 42.888Z" fill="url(#paint0_linear_1383_9036)"/>
+<defs>
+<linearGradient id="paint0_linear_1383_9036" x1="71.6389" y1="12" x2="7.18441" y2="36.624" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002296"/>
+</linearGradient>
+</defs>
+</svg>

package/src/ImageSizeS.svg

@@ -0,0 +1,10 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.0928 42.168L30.8048 39.432C31.1728 39.928 31.6448 40.36 32.2208 40.728C32.8128 41.096 33.4448 41.376 34.1168 41.568C34.7888 41.76 35.4528 41.856 36.1088 41.856C37.1488 41.856 37.9328 41.704 38.4608 41.4C39.0048 41.096 39.2768 40.696 39.2768 40.2C39.2768 39.72 39.0128 39.32 38.4848 39C37.9568 38.664 36.9728 38.392 35.5328 38.184C33.2128 37.864 31.5088 37.272 30.4208 36.408C29.3488 35.528 28.8128 34.384 28.8128 32.976C28.8128 31.904 29.1168 30.952 29.7248 30.12C30.3328 29.288 31.1648 28.64 32.2208 28.176C33.2928 27.696 34.5088 27.456 35.8688 27.456C37.4848 27.456 38.9168 27.752 40.1648 28.344C41.4288 28.936 42.4768 29.704 43.3088 30.648L40.6208 33.384C40.0768 32.632 39.3728 32.04 38.5088 31.608C37.6608 31.176 36.7968 30.96 35.9168 30.96C35.0528 30.96 34.3488 31.12 33.8047 31.44C33.2608 31.76 32.9888 32.176 32.9888 32.688C32.9888 32.976 33.0928 33.224 33.3008 33.432C33.5248 33.64 33.9088 33.824 34.4528 33.984C34.9968 34.128 35.7488 34.28 36.7088 34.44C38.9488 34.792 40.6288 35.416 41.7488 36.312C42.8848 37.208 43.4528 38.416 43.4528 39.936C43.4528 41.056 43.1328 42.024 42.4928 42.84C41.8528 43.656 40.9728 44.288 39.8528 44.736C38.7488 45.168 37.4688 45.384 36.0128 45.384C34.2848 45.384 32.7408 45.088 31.3808 44.496C30.0368 43.888 28.9408 43.112 28.0928 42.168Z" fill="url(#paint0_linear_1383_9026)"/>
+<defs>
+<linearGradient id="paint0_linear_1383_9026" x1="63.5" y1="12" x2="10.4384" y2="27.8646" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAEFF1"/>
+<stop offset="0.5" stop-color="#B8C4FF"/>
+<stop offset="0.85" stop-color="#002296"/>
+</linearGradient>
+</defs>
+</svg>

package/src/animated/ElementsFixedHeight.html

@@ -0,0 +1,261 @@
+<html lang="en">
+  <head>
+    <style>
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.group-mrw4nj39-4 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: group-mrw4nj39-4-transform 3375ms linear infinite both;
+}
+
+@keyframes group-mrw4nj39-4-transform {
+  0% {
+    transform: scale(1, 1);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: scale(0.56, 1);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: scale(1, 1);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.node-10-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-10-3-transform 3375ms linear infinite both;
+}
+
+@keyframes node-10-3-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(9px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.node-14-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-14-3-transform 3375ms linear infinite both;
+}
+
+@keyframes node-14-3-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.node-15 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-15-transform 3375ms linear infinite both;
+}
+
+@keyframes node-15-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.node-4-3 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation:
+    node-4-3-transform 3375ms linear infinite both,
+    node-4-3-width 3375ms linear infinite both;
+}
+
+@keyframes node-4-3-transform {
+  0% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(-37px, 0px);
+  }
+}
+
+@keyframes node-4-3-width {
+  0% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    width: 73px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    width: 147px;
+  }
+}
+
+.node-7-3 {
+  animation:
+    node-7-3-width 3375ms linear infinite both,
+    node-7-3-height 3375ms linear infinite both;
+}
+
+@keyframes node-7-3-width {
+  0% {
+    width: 100px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    width: 100px;
+  }
+}
+
+@keyframes node-7-3-height {
+  0% {
+    height: 58px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  100% {
+    height: 58px;
+  }
+}
+.crop-node-16 {
+  animation: crop-node-16-clip 3375ms linear infinite both;
+}
+
+@keyframes crop-node-16-clip {
+  0% {
+    clip-path: inset(34.3901px 67.7031px 34.6099px 68.2969px round 4px) view-box;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    clip-path: inset(34.3901px 91.7031px 34.6099px 92.2969px round 4px) view-box;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    clip-path: inset(34.3901px 67.7031px 34.6099px 68.2969px round 4px) view-box;
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    clip-path: inset(34.3901px 67.7031px 34.6099px 68.2969px round 4px) view-box;
+  }
+}
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
+      <defs>
+        <linearGradient id="paint0_linear_16_18" x1="104.586" y1="59.1065" x2="137.096" y2="91.7971" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
+        <linearGradient id="paint1_linear_16_18" x1="78.2891" y1="27.4515" x2="139.642" y2="103.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
+        <linearGradient id="paint2_linear_16_18" x1="111.677" y1="34.4475" x2="87.1605" y2="65.7319" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
+        <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_16_18" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <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 dx="1" dy="1"/>
+    <feGaussianBlur stdDeviation="1.5"/>
+    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_16_18"/>
+    </filter>
+        <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_16_18" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="1.37792" result="effect1_foregroundBlur_16_18"/>
+    </filter>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_16_18">
+    <rect x="44.2646" y="22.9559" width="147" height="81" rx="6" fill="white"/>
+    </clipPath>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_16_18">
+    <rect x="44.5781" y="22.9559" width="147" height="81" rx="6" fill="white"/>
+    </clipPath>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_16_18">
+    <rect x="68.2969" y="34.39" width="100" height="58" rx="4" fill="white"/>
+    </clipPath>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_16_18">
+    <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="white"/>
+    </clipPath>
+      </defs>
+      <g>
+        <g fill="none" filter="url(#filter0_i_16_18)">
+          <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="#303030" />
+          <g fill="none" clip-path="url(#clip0_16_18)">
+            <rect class="node-4-3" x="81.2646" y="22.9559" width="73" height="81" rx="6" fill="#F8F6F6" fill-opacity="0.25" />
+            <g class="crop-node-16">
+            <rect x="0" y="0" width="236" height="127" fill="none" />
+              <g fill="none" clip-path="url(#clip1_16_18)">
+                <g fill="none" clip-path="url(#clip2_16_18)">
+                  <rect class="node-7-3" x="68.2969" y="34.39" width="100" height="58" fill="#EAEFFF" />
+                  <g class="group-mrw4nj39-4">
+                    <path d="M119.417 47.2596L91.8188 82.1505L141.04 76.4115L119.417 47.2596Z" fill="url(#paint0_linear_16_18)" />
+                    <path d="M169.012 59.7176C169.012 59.7176 131.172 47.5971 129.327 46.983C127.481 46.369 116.031 43.5279 119.416 51.7194C122.78 59.8597 124.623 62.9902 125.356 64.3802C126.089 65.7703 129.074 71.4339 121.565 73.5239C113.053 75.8916 67.1477 87.1357 67.1477 87.1357V93.5932H169.012V59.7176Z" fill="url(#paint1_linear_16_18)" />
+                  </g>
+                  <g class="node-10-3" fill="none" clip-path="url(#clip3_16_18)">
+                    <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="#002294" />
+                    <g fill="none" filter="url(#filter1_f_16_18)">
+                      <path d="M98.8074 32.1431C98.0424 32.2952 97.2871 32.5062 96.5515 32.776C93.5305 33.8946 90.8528 36.0238 89.0873 39.0214C85.0512 45.8653 87.2973 54.6324 94.1043 58.6014C100.911 62.5704 109.7 60.2351 113.736 53.3912C117.772 46.5424 115.526 37.7753 108.724 33.8112C105.614 31.996 102.098 31.5005 98.8074 32.1431Z" fill="url(#paint2_linear_16_18)" />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+          <path class="node-14-3" d="M41.7646 67.4559V59.4559C41.7646 58.9036 41.3169 58.4559 40.7646 58.4559C40.2124 58.4559 39.7646 58.9036 39.7646 59.4559V67.4559C39.7646 68.0082 40.2124 68.4559 40.7646 68.4559C41.3169 68.4559 41.7646 68.0082 41.7646 67.4559Z" fill="#B8C4FF" />
+          <path class="node-15" d="M195.765 67.4559V59.4559C195.765 58.9036 195.317 58.4559 194.765 58.4559C194.212 58.4559 193.765 58.9036 193.765 59.4559V67.4559C193.765 68.0082 194.212 68.4559 194.765 68.4559C195.317 68.4559 195.765 68.0082 195.765 67.4559Z" fill="#B8C4FF" />
+        </g>
+      </g>
+    </svg>
+  </body>
+</html>

package/src/animated/ElementsFixedMargins.html

@@ -0,0 +1,225 @@
+<html lang="en">
+  <head>
+    <style>
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.group-mrx7juoz-d {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: group-mrx7juoz-d-transform 3375ms linear infinite both;
+}
+
+@keyframes group-mrx7juoz-d-transform {
+  0% {
+    transform: translate(0px, 0px) scale(1, 1);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(0px, -3px) scale(0.38, 0.45);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px) scale(1, 1);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1, 1);
+  }
+}
+
+.node-11 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-11-transform 3375ms linear infinite both;
+}
+
+@keyframes node-11-transform {
+  0% {
+    transform: translate(0px, 0px) scale(1, 1);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(10px, 10px) scale(0.43, 0.43);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px) scale(1, 1);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1, 1);
+  }
+}
+
+.node-4 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation:
+    node-4-transform 3375ms linear infinite both,
+    node-4-width 3375ms linear infinite both;
+}
+
+@keyframes node-4-transform {
+  0% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(-37px, 0px);
+  }
+}
+
+@keyframes node-4-width {
+  0% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    width: 73px;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    width: 147px;
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    width: 147px;
+  }
+}
+
+.node-5 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-5-transform 3375ms linear infinite both;
+}
+
+@keyframes node-5-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.node-6 {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: node-6-transform 3375ms linear infinite both;
+}
+
+@keyframes node-6-transform {
+  0% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    transform: translate(-37px, 0px);
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    transform: translate(0px, 0px);
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.crop-mrxa8x22-k {
+  animation: crop-mrxa8x22-k-clip 3375ms linear infinite both;
+}
+
+@keyframes crop-mrxa8x22-k-clip {
+  0% {
+    clip-path: inset(34.5px 68px 34.5px 68px round 4px) view-box;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  49.392593% {
+    clip-path: inset(49.5px 99px 49.5px 99px round 3px) view-box;
+    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+  }
+  98.755556% {
+    clip-path: inset(34.5px 68px 34.5px 68px round 4px) view-box;
+  }
+  100% {
+    clip-path: inset(34.5px 68px 34.5px 68px round 4px) view-box;
+  }
+}
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
+      <defs>
+        <linearGradient id="paint0_linear_25_1905" x1="104.289" y1="59.2165" x2="136.799" y2="91.907" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
+        <linearGradient id="paint1_linear_25_1905" x1="77.9922" y1="27.5615" x2="139.345" y2="103.66" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
+        <linearGradient id="paint2_linear_25_1905" x1="111.38" y1="34.5575" x2="86.8637" y2="65.8419" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
+        <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_25_1905" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <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 dx="1" dy="1"/>
+    <feGaussianBlur stdDeviation="1.5"/>
+    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_25_1905"/>
+    </filter>
+        <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_25_1905" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="1.37792" result="effect1_foregroundBlur_25_1905"/>
+    </filter>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_25_1905">
+    <rect x="68" y="34.5" width="100" height="58" rx="4" fill="white"/>
+    </clipPath>
+        <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_25_1905">
+    <rect x="86.7842" y="42.0673" width="15.8969" height="16.1237" rx="7.94845" fill="white"/>
+    </clipPath>
+      </defs>
+      <g>
+        <g fill="none" filter="url(#filter0_i_25_1905)">
+          <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="#303030" />
+          <rect class="node-4" x="81.5" y="23" width="73" height="81" rx="6" fill="#F8F6F6" fill-opacity="0.25" />
+          <path class="node-5" d="M42 68V60C42 59.4477 41.5523 59 41 59C40.4477 59 40 59.4477 40 60V68C40 68.5523 40.4477 69 41 69C41.5523 69 42 68.5523 42 68Z" fill="#B8C4FF" />
+          <path class="node-6" d="M196 68V60C196 59.4477 195.552 59 195 59C194.448 59 194 59.4477 194 60V68C194 68.5523 194.448 69 195 69C195.552 69 196 68.5523 196 68Z" fill="#B8C4FF" />
+          <g class="crop-mrxa8x22-k">
+            <rect x="0" y="0" width="236" height="127" fill="none" />
+            <g fill="none" clip-path="url(#clip1_25_1905)">
+              <rect x="68" y="34.5" width="100" height="58" rx="4" fill="#EAEFFF" />
+              <g class="group-mrx7juoz-d">
+                <path d="M119.12 47.3696L91.522 82.2605L140.743 76.5215L119.12 47.3696Z" fill="url(#paint0_linear_25_1905)" />
+                <path d="M168.715 59.8276C168.715 59.8276 130.875 47.7071 129.03 47.093C127.184 46.479 115.734 43.6378 119.119 51.8294C122.483 59.9697 124.326 63.1002 125.059 64.4902C125.792 65.8802 128.777 71.5439 121.268 73.6339C112.756 76.0016 66.8508 87.2457 66.8508 87.2457V93.7032H168.715V59.8276Z" fill="url(#paint1_linear_25_1905)" />
+              </g>
+              <g class="node-11" fill="none" clip-path="url(#clip2_25_1905)">
+                <rect x="86.7842" y="42.0673" width="15.8969" height="16.1237" rx="7.94845" fill="#002294" />
+                <g fill="none" filter="url(#filter1_f_25_1905)">
+                  <path d="M98.5106 32.2531C97.7455 32.4052 96.9903 32.6162 96.2546 32.886C93.2336 34.0046 90.556 36.1338 88.7904 39.1314C84.7543 45.9753 87.0004 54.7424 93.8074 58.7114C100.614 62.6804 109.403 60.3451 113.439 53.5012C117.475 46.6523 115.229 37.8852 108.427 33.9212C105.318 32.1059 101.801 31.6104 98.5106 32.2531Z" fill="url(#paint2_linear_25_1905)" />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </body>
+</html>