@digital-ai/dot-illustrations 1.0.0 → 1.0.1

package/Dot-illustrations/Light/global/features.svg

@@ -0,0 +1,150 @@
+<svg width="235" height="230" viewBox="0 0 235 230" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M195 55H44.9995C38.096 55 32.4995 60.5965 32.4995 67.5V217.5C32.4995 224.404 38.096 230 44.9995 230H195C201.904 230 207.5 224.404 207.5 217.5V67.5C207.5 60.5965 201.904 55 195 55Z" fill="#F3F5F6"/>
+<path d="M113.17 28.677L134.041 25.0843C135.667 24.825 137.32 25.1705 138.639 26.0457C139.957 26.9208 140.832 28.2524 141.071 29.7494L145.131 50.9011C145.37 52.3981 144.953 53.9357 143.972 55.1777C142.992 56.4196 141.527 57.2626 139.902 57.5219L119.031 61.1146C117.406 61.3739 115.752 61.0284 114.433 60.1532C113.115 59.2781 112.24 57.9465 112.001 56.4495L107.941 35.2978C107.702 33.8008 108.119 32.2632 109.1 31.0213C110.08 29.7793 111.545 28.9363 113.17 28.677Z" fill="#E9F0E0"/>
+<path d="M77.2797 53.6285L100.616 49.069C102.238 48.7855 103.897 49.1067 105.228 49.9618C106.559 50.817 107.454 52.1361 107.715 53.629L111.506 75.8071C111.767 77.3 111.373 78.8443 110.411 80.1004C109.449 81.3565 107.997 82.2215 106.375 82.505L83.0387 87.0645C81.4171 87.348 79.7583 87.0268 78.4271 86.1717C77.0959 85.3165 76.2014 83.9974 75.9404 82.5046L72.1497 60.3264C71.8887 58.8335 72.2825 57.2892 73.2446 56.0331C74.2067 54.777 75.6581 53.9121 77.2797 53.6285Z" fill="#E9F0E0"/>
+<path d="M133.582 63.4668L170.98 69.4287C172.61 69.6627 174.087 70.483 175.087 71.7093C176.087 72.9355 176.527 74.4671 176.312 75.9673L174.354 89.1876C174.139 90.6877 173.285 92.0335 171.98 92.9288C170.676 93.8241 169.028 94.1956 167.398 93.9616L130 87.9997C128.37 87.7657 126.893 86.9453 125.893 85.7191C124.894 84.4929 124.453 82.9612 124.668 81.4611L126.626 68.2407C126.841 66.7406 127.695 65.3949 129 64.4996C130.304 63.6043 131.953 63.2328 133.582 63.4668Z" fill="#E9F0E0"/>
+<path d="M97.2433 93.0638L111.991 87.3116C113.523 86.7092 115.212 86.6918 116.688 87.2632C118.163 87.8346 119.304 88.948 119.858 90.3584L125.726 106.655C126.281 108.065 126.204 109.657 125.513 111.08C124.822 112.504 123.573 113.642 122.041 114.244L107.293 119.996C105.761 120.598 104.072 120.616 102.596 120.044C101.121 119.473 99.9806 118.36 99.4261 116.949L93.5578 100.653C93.0032 99.2425 93.08 97.6506 93.7712 96.2274C94.4623 94.8041 95.7113 93.6662 97.2433 93.0638Z" fill="#E9F0E0"/>
+<g filter="url(#filter0_d_2435_1693)">
+<path d="M95.2617 59.6064L85.769 61.3129C81.8369 62.0198 79.2224 65.7803 79.9293 69.7123C80.6361 73.6444 84.3967 76.2589 88.3287 75.552L97.8214 73.8455C101.753 73.1387 104.368 69.3782 103.661 65.4461C102.954 61.5141 99.1937 58.8996 95.2617 59.6064Z" fill="#E9F0E0"/>
+<path d="M85.9459 62.2971L95.4386 60.5907C98.8271 59.9815 102.068 62.2346 102.677 65.6231C103.286 69.0115 101.033 72.2522 97.6445 72.8613L88.1518 74.5678C84.7633 75.1769 81.5226 72.9238 80.9135 69.5354C80.3044 66.1469 82.5574 62.9063 85.9459 62.2971Z" stroke="#498500" stroke-width="2"/>
+</g>
+<path d="M98.4231 66.3877C98.6098 67.4266 97.919 68.4202 96.8801 68.6069C95.8413 68.7937 94.8477 68.1029 94.6609 67.064C94.4742 66.0251 95.1649 65.0315 96.2038 64.8448C97.2427 64.658 98.2363 65.3488 98.4231 66.3877Z" fill="#498500" stroke="#498500"/>
+<g filter="url(#filter1_d_2435_1693)">
+<path d="M121.957 40.002L127.062 52.2542L128.9 46.9449L134.209 45.1071L121.957 40.002Z" fill="#E9F0E0"/>
+<path d="M121.957 40.002L127.062 52.2542L128.9 46.9449L134.209 45.1071L121.957 40.002Z" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter2_d_2435_1693)">
+<path d="M120.119 33.0596L120.935 36.0205" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter3_d_2435_1693)">
+<path d="M117.975 38.9819L115.014 38.165" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter4_d_2435_1693)">
+<path d="M127.062 34.999L125.02 36.939" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter5_d_2435_1693)">
+<path d="M118.894 43.0645L116.954 45.1065" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter6_d_2435_1693)">
+<path d="M107.915 105.738C111.02 105.738 113.537 103.221 113.537 100.117C113.537 97.012 111.02 94.4951 107.915 94.4951C104.81 94.4951 102.293 97.012 102.293 100.117C102.293 103.221 104.81 105.738 107.915 105.738Z" fill="#E9F0E0"/>
+<path d="M112.537 100.117C112.537 102.669 110.468 104.738 107.915 104.738C105.363 104.738 103.293 102.669 103.293 100.117C103.293 97.5643 105.363 95.4951 107.915 95.4951C110.468 95.4951 112.537 97.5643 112.537 100.117Z" stroke="#498500" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_d_2435_1693)">
+<path d="M115.266 107.467L111.519 103.72" stroke="#498500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter8_d_2435_1693)">
+<rect x="131.693" y="70.4775" width="10.754" height="10.754" rx="2" transform="rotate(8.77358 131.693 70.4775)" fill="#E9F0E0"/>
+<rect x="132.529" y="71.6184" width="8.75399" height="8.75399" rx="1" transform="rotate(8.77358 132.529 71.6184)" stroke="#498500" stroke-width="2"/>
+</g>
+<g filter="url(#filter9_d_2435_1693)">
+<path d="M148.981 75.0918L161.09 76.9606" stroke="#498500" stroke-width="2" stroke-linecap="round"/>
+</g>
+<g filter="url(#filter10_d_2435_1693)">
+<path d="M148.102 80.79L167.334 83.7582" stroke="#498500" stroke-width="2" stroke-linecap="round"/>
+</g>
+<path d="M58.46 128.239H179.541V197.753C179.541 199.962 177.75 201.753 175.541 201.753H62.46C60.2508 201.753 58.46 199.962 58.46 197.753V128.239Z" fill="white"/>
+<path d="M117.559 128.239H179.541V197.753C179.541 199.962 177.75 201.753 175.541 201.753H117.559V128.239Z" fill="#E3E5E8"/>
+<path d="M134.136 103.734H199L179.541 128.239H117.559L134.136 103.734Z" fill="white"/>
+<path d="M100.261 103.734H38.9998L58.4592 128.239H117.559L100.261 103.734Z" fill="#E3E5E8"/>
+<defs>
+<filter id="filter0_d_2435_1693" x="15.814" y="27.4912" width="151.962" height="144.176" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter1_d_2435_1693" x="56.957" y="7.00195" width="142.252" height="142.252" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter2_d_2435_1693" x="55.1182" y="0.0595703" width="130.817" height="132.961" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter3_d_2435_1693" x="50.0132" y="5.16504" width="132.962" height="130.817" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter4_d_2435_1693" x="60.0195" y="1.99902" width="132.042" height="131.939" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter5_d_2435_1693" x="51.9536" y="10.0645" width="131.94" height="132.042" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter6_d_2435_1693" x="38.2935" y="62.4951" width="139.243" height="139.243" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter7_d_2435_1693" x="46.5186" y="70.7197" width="133.748" height="133.748" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter8_d_2435_1693" x="66.3345" y="38.7588" width="139.706" height="139.706" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter9_d_2435_1693" x="83.9814" y="42.0918" width="142.109" height="131.869" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+<filter id="filter10_d_2435_1693" x="83.1021" y="47.79" width="149.232" height="132.969" 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="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2435_1693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2435_1693" result="shape"/>
+</filter>
+</defs>
+</svg>

package/Dot-illustrations/Light/global/launch.svg

@@ -0,0 +1,17 @@
+<svg width="190" height="203" viewBox="0 0 190 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95 203C147.467 203 190 160.467 190 108C190 55.5329 147.467 13 95 13C42.5329 13 0 55.5329 0 108C0 160.467 42.5329 203 95 203Z" fill="#F3F5F6"/>
+<path d="M88.0125 2.95437L80.4113 17.4745C78.1696 21.7512 76.9983 26.5189 77 31.3601V132.383L90.3264 141H99.5656L112 132.383V31.8032C111.989 27.1599 110.902 22.5839 108.827 18.4429L101.09 2.87231C100.66 2.00798 100.001 1.28165 99.1869 0.774432C98.3725 0.267217 97.4349 -0.000910023 96.4787 2.32055e-06H92.6511C91.6818 0.00217709 90.7327 0.280414 89.9124 0.802883C89.0921 1.32535 88.4337 2.07095 88.0125 2.95437Z" fill="#5A82AD"/>
+<mask id="mask0_2435_1694" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="13" width="190" height="190">
+<path d="M95 203C147.467 203 190 160.467 190 108C190 55.533 147.467 13 95 13C42.533 13 0 55.533 0 108C0 160.467 42.533 203 95 203Z" fill="#F3F5F6"/>
+</mask>
+<g mask="url(#mask0_2435_1694)">
+<path d="M148.063 183.738C145.062 182.37 141.838 181.555 138.547 181.334C129.218 180.688 120.499 176.49 113.537 170.211C113.25 169.952 112.963 169.701 112.676 169.457C108.234 165.725 103.577 159.862 102.629 154.142C99.041 132.893 96.4001 103.613 96.5866 88.2266H94.4337C94.4337 88.2266 94.1969 125.623 87.2572 157.25C86.8946 158.811 86.1613 160.262 85.1196 161.48C84.0778 162.698 82.7581 163.647 81.2721 164.247C74.478 167.119 68.8467 172.192 65.2829 178.65C64.2748 180.448 62.7437 181.897 60.8928 182.804C59.0419 183.712 56.9589 184.035 54.9201 183.731C48.6625 182.862 42.3118 184.455 37.2043 188.173C32.0967 191.891 28.6304 197.445 27.5347 203.667L163.687 203.739C162.834 199.413 160.975 195.349 158.261 191.875C155.547 188.4 152.054 185.613 148.063 183.738Z" fill="#E3E5E8"/>
+<path d="M87.9832 3.15702L80.3049 17.6508C78.0404 21.9198 76.8572 26.6788 76.8589 31.5112V132.351L90.3206 140.952H99.6536L112.214 132.351V31.9535C112.203 27.3186 111.105 22.7509 109.009 18.6175L101.194 3.0751C100.759 2.21234 100.094 1.48733 99.271 0.981034C98.4484 0.474739 97.5012 0.207099 96.5353 0.20801H92.6688C91.6897 0.210181 90.731 0.487913 89.9024 1.00943C89.0738 1.53095 88.4087 2.2752 87.9832 3.15702Z" fill="#5A82AD"/>
+<path d="M76.859 124.312H43C43 124.312 43 109.386 57.1607 98.7645C71.3214 88.1426 76.8644 64.1191 76.8644 64.1191L76.859 124.312Z" fill="#3D6C9E"/>
+<path d="M112.204 124.312H146.063C146.063 124.312 146.063 109.386 131.902 98.7645C117.741 88.1426 112.204 64.1191 112.204 64.1191V124.312Z" fill="#3D6C9E"/>
+<path opacity="0.2" d="M76.859 124.312H43C43 124.312 43 109.386 57.1607 98.7645C71.3214 88.1426 76.8644 64.1191 76.8644 64.1191L76.859 124.312Z" fill="#274F82"/>
+<path opacity="0.2" d="M112.204 124.312H146.063C146.063 124.312 146.063 109.386 131.902 98.7645C117.741 88.1426 112.204 64.1191 112.204 64.1191V124.312Z" fill="#274F82"/>
+<path d="M97.4474 34.8038H91.6094C89.9119 34.8038 88.2839 34.1295 87.0836 32.9292C85.8833 31.7288 85.209 30.1009 85.209 28.4034C85.209 26.7059 85.8833 25.0779 87.0836 23.8776C88.2839 22.6773 89.9119 22.0029 91.6094 22.0029H97.4474C98.2881 22.0022 99.1207 22.1673 99.8976 22.4887C100.674 22.8101 101.38 23.2815 101.975 23.876C102.569 24.4705 103.041 25.1763 103.362 25.9532C103.683 26.73 103.849 27.5626 103.848 28.4034C103.848 30.1009 103.173 31.7288 101.973 32.9292C100.773 34.1295 99.1449 34.8038 97.4474 34.8038Z" fill="#F3F5F6"/>
+<path opacity="0.4" d="M76.8589 132.351L90.3205 140.947H99.6536L112.203 132.351V128.807H76.8589V132.351Z" fill="#274F82"/>
+</g>
+</svg>

package/Dot-illustrations/Light/global/nothing-defined.svg

@@ -0,0 +1,13 @@
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95 190C147.467 190 190 147.467 190 95C190 42.5329 147.467 0 95 0C42.5329 0 0 42.5329 0 95C0 147.467 42.5329 190 95 190Z" fill="#F3F5F6"/>
+<mask id="mask0_2436_2338" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="190" height="190">
+<path d="M95 190C147.467 190 190 147.467 190 95C190 42.5329 147.467 0 95 0C42.5329 0 0 42.5329 0 95C0 147.467 42.5329 190 95 190Z" fill="#F3F5F6"/>
+</mask>
+<g mask="url(#mask0_2436_2338)">
+<path d="M152 189.866H38V67.114C43.3732 67.108 48.5246 64.9728 52.324 61.1769C56.1235 57.381 58.2606 52.2344 58.2667 46.8662H131.733C131.728 49.5255 132.25 52.1595 133.27 54.6158C134.29 57.0721 135.787 59.302 137.675 61.1763C139.551 63.0633 141.783 64.5597 144.242 65.5789C146.701 66.5982 149.338 67.1199 152 67.114V189.866Z" fill="white"/>
+<path d="M95.0001 129.2C111.79 129.2 125.4 115.59 125.4 98.8004C125.4 82.0109 111.79 68.4004 95.0001 68.4004C78.2106 68.4004 64.6001 82.0109 64.6001 98.8004C64.6001 115.59 78.2106 129.2 95.0001 129.2Z" fill="#E26264"/>
+<path d="M105.748 113.131L95 102.383L84.252 113.131L80.6693 109.548L91.4173 98.8004L80.6693 88.0524L84.252 84.4697L95 95.2177L105.748 84.4697L109.331 88.0524L98.5827 98.8004L109.331 109.548L105.748 113.131Z" fill="white"/>
+<path d="M111.467 136.8H78.5334C76.4347 136.8 74.7334 138.501 74.7334 140.6C74.7334 142.698 76.4347 144.4 78.5334 144.4H111.467C113.565 144.4 115.267 142.698 115.267 140.6C115.267 138.501 113.565 136.8 111.467 136.8Z" fill="#E3E5E8"/>
+<path d="M122.867 152H67.1335C65.0348 152 63.3335 153.701 63.3335 155.8C63.3335 157.899 65.0348 159.6 67.1335 159.6H122.867C124.966 159.6 126.667 157.899 126.667 155.8C126.667 153.701 124.966 152 122.867 152Z" fill="#E3E5E8"/>
+</g>
+</svg>

package/Dot-illustrations/Light/global/survey.svg

@@ -0,0 +1,23 @@
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95 190C147.467 190 190 147.467 190 95C190 42.5329 147.467 0 95 0C42.5329 0 0 42.5329 0 95C0 147.467 42.5329 190 95 190Z" fill="#F3F5F6"/>
+<mask id="mask0_2435_1692" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="190" height="190">
+<path d="M95 190C147.467 190 190 147.467 190 95C190 42.5329 147.467 0 95 0C42.5329 0 0 42.5329 0 95C0 147.467 42.5329 190 95 190Z" fill="#F3F5F6"/>
+</mask>
+<g mask="url(#mask0_2435_1692)">
+<rect x="38" y="47" width="114" height="143" rx="8" fill="white"/>
+<rect x="52" y="68.5" width="18" height="18" rx="4" fill="#5A82AD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.3458 73.5539C66.6846 73.8927 66.6846 74.4421 66.3458 74.7809L59.8387 81.2879C59.4999 81.6268 58.9506 81.6268 58.6118 81.2879L55.654 78.3302C55.3152 77.9914 55.3152 77.442 55.654 77.1032C55.9928 76.7644 56.5422 76.7644 56.881 77.1032L59.2253 79.4475L65.1188 73.5539C65.4576 73.2151 66.007 73.2151 66.3458 73.5539Z" fill="white"/>
+<path d="M114.25 67H81.75C79.6789 67 78 68.6789 78 70.75C78 72.8211 79.6789 74.5 81.75 74.5H114.25C116.321 74.5 118 72.8211 118 70.75C118 68.6789 116.321 67 114.25 67Z" fill="#5A82AD"/>
+<path d="M136.75 80.5H81.75C79.6789 80.5 78 82.1789 78 84.25C78 86.3211 79.6789 88 81.75 88H136.75C138.821 88 140.5 86.3211 140.5 84.25C140.5 82.1789 138.821 80.5 136.75 80.5Z" fill="#5A82AD"/>
+<rect x="53" y="106.001" width="16" height="16" rx="3" fill="#F3F5F6" stroke="#C1C6CD" stroke-width="2"/>
+<path d="M114.25 103.501H81.75C79.6789 103.501 78 105.18 78 107.251C78 109.322 79.6789 111.001 81.75 111.001H114.25C116.321 111.001 118 109.322 118 107.251C118 105.18 116.321 103.501 114.25 103.501Z" fill="#C1C6CD"/>
+<path d="M136.75 117.001H81.75C79.6789 117.001 78 118.68 78 120.751C78 122.822 79.6789 124.501 81.75 124.501H136.75C138.821 124.501 140.5 122.822 140.5 120.751C140.5 118.68 138.821 117.001 136.75 117.001Z" fill="#C1C6CD"/>
+<rect x="79" y="146" width="37" height="14" rx="7" fill="#C1C6CD"/>
+<mask id="path-13-outside-1_2435_1692" maskUnits="userSpaceOnUse" x="107.143" y="83" width="22" height="22" fill="black">
+<rect fill="white" x="107.143" y="83" width="22" height="22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M110.403 86.2604C110.644 86.0189 111.003 85.9371 111.325 86.0499L125.547 91.0277C125.891 91.1481 126.127 91.4663 126.142 91.8304C126.157 92.1946 125.948 92.5309 125.615 92.679L119.527 95.3845L116.822 101.472C116.674 101.805 116.337 102.014 115.973 101.999C115.609 101.984 115.291 101.749 115.17 101.405L110.193 87.1825C110.08 86.8603 110.161 86.5018 110.403 86.2604Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M110.403 86.2604C110.644 86.0189 111.003 85.9371 111.325 86.0499L125.547 91.0277C125.891 91.1481 126.127 91.4663 126.142 91.8304C126.157 92.1946 125.948 92.5309 125.615 92.679L119.527 95.3845L116.822 101.472C116.674 101.805 116.337 102.014 115.973 101.999C115.609 101.984 115.291 101.749 115.17 101.405L110.193 87.1825C110.08 86.8603 110.161 86.5018 110.403 86.2604Z" fill="#3D6C9E"/>
+<path d="M111.325 86.0499L112.316 83.2183L111.325 86.0499ZM110.403 86.2604L108.282 84.139L108.282 84.139L110.403 86.2604ZM125.547 91.0277L124.556 93.8593L124.556 93.8593L125.547 91.0277ZM126.142 91.8304L123.144 91.9527L123.144 91.9527L126.142 91.8304ZM125.615 92.679L126.833 95.4204L126.833 95.4204L125.615 92.679ZM119.527 95.3845L118.309 92.6431C117.63 92.9448 117.087 93.4874 116.786 94.1661L119.527 95.3845ZM116.822 101.472L119.563 102.691L119.563 102.691L116.822 101.472ZM115.17 101.405L118.002 100.414L118.002 100.414L115.17 101.405ZM110.193 87.1825L113.024 86.1915L113.024 86.1915L110.193 87.1825ZM112.316 83.2183C110.906 82.7248 109.338 83.0827 108.282 84.139L112.524 88.3817C111.951 88.9551 111.1 89.1494 110.334 88.8815L112.316 83.2183ZM126.538 88.1961L112.316 83.2183L110.334 88.8815L124.556 93.8593L126.538 88.1961ZM129.139 91.7082C129.074 90.115 128.043 88.7229 126.538 88.1961L124.556 93.8593C123.739 93.5733 123.18 92.8176 123.144 91.9527L129.139 91.7082ZM126.833 95.4204C128.29 94.7728 129.204 93.3013 129.139 91.7081L123.144 91.9527C123.109 91.0879 123.605 90.2891 124.396 89.9375L126.833 95.4204ZM120.746 98.126L126.833 95.4204L124.396 89.9375L118.309 92.6431L120.746 98.126ZM119.563 102.691L122.269 96.603L116.786 94.1661L114.08 100.254L119.563 102.691ZM115.851 104.997C117.444 105.062 118.915 104.148 119.563 102.691L114.08 100.254C114.432 99.4627 115.23 98.9665 116.095 99.0018L115.851 104.997ZM112.339 102.396C112.865 103.901 114.258 104.932 115.851 104.997L116.095 99.0018C116.96 99.037 117.716 99.5967 118.002 100.414L112.339 102.396ZM107.361 88.1736L112.339 102.396L118.002 100.414L113.024 86.1915L107.361 88.1736ZM108.282 84.139C107.225 85.1954 106.867 86.7635 107.361 88.1736L113.024 86.1915C113.292 86.957 113.098 87.8082 112.524 88.3817L108.282 84.139Z" fill="white" mask="url(#path-13-outside-1_2435_1692)"/>
+</g>
+</svg>

package/Dot-illustrations/Light/processes/assets.svg

@@ -0,0 +1,40 @@
+<svg width="247" height="175" viewBox="0 0 247 175" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M200 0H49.9995C43.096 0 37.4995 5.59646 37.4995 12.5V162.5C37.4995 169.404 43.096 175 49.9995 175H200C206.904 175 212.5 169.404 212.5 162.5V12.5C212.5 5.59646 206.904 0 200 0Z" fill="#F3F5F6"/>
+<path d="M11.2069 14.5H178.793C181.985 14.5 184.5 16.8726 184.5 19.7143V48.2857C184.5 51.1274 181.985 53.5 178.793 53.5H11.2069C8.01533 53.5 5.5 51.1274 5.5 48.2857V19.7143C5.5 16.8726 8.01533 14.5 11.2069 14.5Z" fill="#E9F0E0" stroke="#498500"/>
+<rect x="17" y="25.5" width="18" height="18" rx="4" fill="#498500"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3458 30.5539C31.6846 30.8927 31.6846 31.4421 31.3458 31.7809L24.8387 38.2879C24.4999 38.6268 23.9506 38.6268 23.6118 38.2879L20.654 35.3302C20.3152 34.9914 20.3152 34.442 20.654 34.1032C20.9928 33.7644 21.5422 33.7644 21.881 34.1032L24.2253 36.4475L30.1188 30.5539C30.4576 30.2151 31.007 30.2151 31.3458 30.5539Z" fill="white"/>
+<path d="M82.2501 24H49.75C47.6789 24 46 25.6789 46 27.75C46 29.8211 47.6789 31.5 49.75 31.5H82.2501C84.3212 31.5 86.0001 29.8211 86.0001 27.75C86.0001 25.6789 84.3212 24 82.2501 24Z" fill="#A4ACB6"/>
+<path d="M104.75 37.5H49.75C47.6789 37.5 46 39.1789 46 41.25C46 43.3211 47.6789 45 49.75 45H104.75C106.821 45 108.5 43.3211 108.5 41.25C108.5 39.1789 106.821 37.5 104.75 37.5Z" fill="#F3F5F6"/>
+<g filter="url(#filter0_d_2414_121208)">
+<path d="M11.2069 121.25H178.793C180.439 121.25 182.018 121.852 183.182 122.924C184.346 123.995 185 125.449 185 126.964V155.536C185 157.051 184.346 158.505 183.182 159.576C182.018 160.648 180.439 161.25 178.793 161.25H11.2069C9.56073 161.25 7.98198 160.648 6.81796 159.576C5.65394 158.505 5 157.051 5 155.536V126.964C5 125.449 5.65394 123.995 6.81796 122.924C7.98198 121.852 9.56073 121.25 11.2069 121.25V121.25Z" fill="white"/>
+</g>
+<rect x="18" y="133.751" width="16" height="16" rx="3" fill="#E3E5E8" stroke="#C1C6CD" stroke-width="2"/>
+<path d="M82.2501 131.251H49.75C47.6789 131.251 46 132.93 46 135.001C46 137.072 47.6789 138.751 49.75 138.751H82.2501C84.3212 138.751 86.0001 137.072 86.0001 135.001C86.0001 132.93 84.3212 131.251 82.2501 131.251Z" fill="#A4ACB6"/>
+<path d="M104.75 144.751H49.75C47.6789 144.751 46 146.43 46 148.501C46 150.572 47.6789 152.251 49.75 152.251H104.75C106.821 152.251 108.5 150.572 108.5 148.501C108.5 146.43 106.821 144.751 104.75 144.751Z" fill="#F3F5F6"/>
+<g filter="url(#filter1_d_2414_121208)">
+<path d="M64.9554 67.5H232.542C234.188 67.5 235.767 68.102 236.931 69.1737C238.095 70.2453 238.749 71.6988 238.749 73.2143V101.786C238.749 103.301 238.095 104.755 236.931 105.826C235.767 106.898 234.188 107.5 232.542 107.5H64.9554C63.3093 107.5 61.7305 106.898 60.5665 105.826C59.4025 104.755 58.7485 103.301 58.7485 101.786V73.2143C58.7485 71.6988 59.4025 70.2453 60.5665 69.1737C61.7305 68.102 63.3093 67.5 64.9554 67.5Z" fill="white"/>
+</g>
+<rect x="74" y="80.001" width="16" height="16" rx="3" fill="#E3E5E8" stroke="#C1C6CD" stroke-width="2"/>
+<path d="M135.25 77.501H102.75C100.679 77.501 99 79.1799 99 81.251C99 83.3221 100.679 85.001 102.75 85.001H135.25C137.321 85.001 139 83.3221 139 81.251C139 79.1799 137.321 77.501 135.25 77.501Z" fill="#A4ACB6"/>
+<path d="M157.75 91.001H102.75C100.679 91.001 99 92.6799 99 94.751C99 96.8221 100.679 98.501 102.75 98.501H157.75C159.821 98.501 161.5 96.8221 161.5 94.751C161.5 92.6799 159.821 91.001 157.75 91.001Z" fill="#F3F5F6"/>
+<defs>
+<filter id="filter0_d_2414_121208" x="0" y="119.25" width="190" height="50" 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="3"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.230539 0 0 0 0 0.370572 0 0 0 0 0.482993 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_121208"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_121208" result="shape"/>
+</filter>
+<filter id="filter1_d_2414_121208" x="56.7485" y="65.5" width="190" height="50" 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 dx="3" dy="3"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.230539 0 0 0 0 0.370572 0 0 0 0 0.482993 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_121208"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_121208" result="shape"/>
+</filter>
+</defs>
+</svg>

package/Dot-illustrations/Light/processes/work-item.svg

@@ -0,0 +1,26 @@
+<svg width="200" height="230" viewBox="0 0 200 230" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 218.667C155.228 218.667 200 173.896 200 118.667C200 63.4388 155.228 18.6672 100 18.6672C44.7715 18.6672 0 63.4388 0 118.667C0 173.896 44.7715 218.667 100 218.667Z" fill="#F3F5F6"/>
+<path d="M157.334 76.001H42.6669C38.985 76.001 36.0002 78.9857 36.0002 82.6676V222.668C36.0002 226.35 38.985 229.334 42.6669 229.334H157.334C161.015 229.334 164 226.35 164 222.668V82.6676C164 78.9857 161.015 76.001 157.334 76.001Z" fill="white"/>
+<path d="M86.6667 96.0005H52C49.7909 96.0005 48 97.7913 48 100C48 102.21 49.7909 104 52 104H86.6667C88.8758 104 90.6667 102.21 90.6667 100C90.6667 97.7913 88.8758 96.0005 86.6667 96.0005Z" fill="#9EB6CF"/>
+<path d="M110.667 113.334H52C49.7909 113.334 48 115.125 48 117.334C48 119.543 49.7909 121.334 52 121.334H110.667C112.876 121.334 114.667 119.543 114.667 117.334C114.667 115.125 112.876 113.334 110.667 113.334Z" fill="#F3F5F6"/>
+<path d="M86.6667 132.001H52C49.7909 132.001 48 133.792 48 136.001C48 138.21 49.7909 140.001 52 140.001H86.6667C88.8758 140.001 90.6667 138.21 90.6667 136.001C90.6667 133.792 88.8758 132.001 86.6667 132.001Z" fill="#E3E5E8"/>
+<path d="M110.667 149.334H52C49.7909 149.334 48 151.125 48 153.334C48 155.543 49.7909 157.334 52 157.334H110.667C112.876 157.334 114.667 155.543 114.667 153.334C114.667 151.125 112.876 149.334 110.667 149.334Z" fill="#F3F5F6"/>
+<path d="M86.6667 168.001H52C49.7909 168.001 48 169.792 48 172.001C48 174.21 49.7909 176.001 52 176.001H86.6667C88.8758 176.001 90.6667 174.21 90.6667 172.001C90.6667 169.792 88.8758 168.001 86.6667 168.001Z" fill="#E3E5E8"/>
+<path d="M110.667 185.334H52C49.7909 185.334 48 187.125 48 189.334C48 191.544 49.7909 193.334 52 193.334H110.667C112.876 193.334 114.667 191.544 114.667 189.334C114.667 187.125 112.876 185.334 110.667 185.334Z" fill="#F3F5F6"/>
+<g filter="url(#filter0_d_2414_59693)">
+<path d="M157.333 8H42.6667C38.9848 8 36 10.9848 36 14.6667V54.6667C36 58.3486 38.9848 61.3333 42.6667 61.3333H157.333C161.015 61.3333 164 58.3486 164 54.6667V14.6667C164 10.9848 161.015 8 157.333 8Z" fill="#9EB6CF"/>
+</g>
+<path d="M86.6664 22.6675H51.9998C49.7906 22.6675 47.9998 24.4583 47.9998 26.6675C47.9998 28.8766 49.7906 30.6675 51.9998 30.6675H86.6664C88.8756 30.6675 90.6664 28.8766 90.6664 26.6675C90.6664 24.4583 88.8756 22.6675 86.6664 22.6675Z" fill="#F3F5F6"/>
+<path d="M110.666 40.001H51.9998C49.7906 40.001 47.9998 41.7918 47.9998 44.001C47.9998 46.2101 49.7906 48.001 51.9998 48.001H110.666C112.876 48.001 114.666 46.2101 114.666 44.001C114.666 41.7918 112.876 40.001 110.666 40.001Z" fill="#F3F5F6"/>
+<defs>
+<filter id="filter0_d_2414_59693" x="20" y="0" width="160" height="85.3333" 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="8"/>
+<feGaussianBlur stdDeviation="8"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_59693"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_59693" result="shape"/>
+</filter>
+</defs>
+</svg>

package/README.md

@@ -1,2 +1,74 @@
 # dot-illustrations
 A central place for the design team to keep illustrations and for dev teams to find them.
+
+Files are organized in 2 separate folders 
+- Dot-illustrations
+- Agility-illustrations
+
+![image](https://github.com/digital-ai/dot-illustrations/assets/23736763/ab05aff4-925a-4496-ab6f-468d6a747d49)
+
+
+In each one of those, there is a Light and Dark folder to match the color style if you using a material theme do not forget to update the illustration folder directory Light / Dark to match the theme of the switch
+
+
+## Usage
+
+### React Component via `dot-components`
+
+(PENDING WIP): If you are already consuming `dot-components` then the easiest way would be to use the `DotIllustration` component, [documentation is available here](https://digital-ai.github.io/dot-components/?path=/story/components-illustration--default)
+
+### Standard HTML
+
+If not using `dot-components` then import `@digital-ai/dot-illustrations` into your project as an npm package or as a git submodule. You can also download the contents of this repository and copy the `index.css` and asset folders into your project.
+
+```html
+<link rel="stylesheet" href="./index.css" />
+
+...
+
+<span class="dot-illustration">
+  <img class="illustration-agility-global-disconnected"></i>
+</span>
+```
+
+## Contributing
+
+To add new illustrations, first add the new file to the appropriate location in one of the asset folders (Agility-illustrations, Dot-illustrations, etc.).
+
+Next, add new class selectors to `index.css` that set the content to your new files. Define the light version first, then if you have a dark version, define it second with an additional .dark-theme class selector. For example:
+```css
+/* Light illustrations */
+
+.dot-illustration img.illustration-agility-global-disconnected {
+    content: url('./Agility-illustrations/Light/global/disconnected.svg');
+}
+
+/* Dark illustrations */
+
+.dot-illustration img.illustration-agility-global-disconnected.dark-theme {
+    content: url('./Agility-illustrations/Dark/global/disconnected.svg');
+}
+```
+
+Finally, update `demo/index.html` by adding your new illustrations like so:
+
+```html
+<div>
+  <i class="illustration-agility-global-disconnected"></i>
+  <span>illustration-agility-global-disconnected</span>
+</div>
+```
+
+Once complete, please submit a pull request with the updated files and request someone to review in the [#dot-components](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) channel on slack.
+
+More information is available in the [.dot design system](https://zeroheight.com/4a9ac476a/p/86a804-illustrations)
+
+## Troubleshooting
+
+If for some reason the latest version of `dot-illustrations` is not available in `dot-components` then you can update your `package.json` to use the latest version of `dot-illustrations` by adding the following to your `resolutions` section.
+
+```json
+  "resolutions": {
+    "@digital-ai/dot-illustrations": "latest",
+  }
+``` 

package/demo/demo.css

@@ -0,0 +1,60 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  margin: 0;
+  text-align: center;
+}
+
+.search-wrapper {
+  display: flex;
+  width: 720px;
+  height: 48px;
+  flex-direction: column;
+  margin: 24px auto;
+  gap: 4px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+input {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.demo-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 2.5rem;
+  justify-content: center;
+  width: 100vw;
+}
+
+.demo-wrapper>div {
+  align-items: center;
+  background: #eee;
+  display: flex;
+  flex-direction: column;
+  height: 13vw;
+  justify-content: center;
+  margin: 0.25vw;
+  padding: 0 0.5vw;
+  width: 24vw;
+}
+
+img {
+  align-items: center;
+  display: flex;
+  height: 10vw;
+}
+
+span {
+  display: flex;
+  flex-wrap: nowrap;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+  text-align: center;
+}

package/demo/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dot Illustrations Library</title>
+    <link rel="stylesheet" href="../index.css" />
+    <link rel="stylesheet" href="./demo.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>Dot Illustrations</h1>
+    <p>
+      For more details please see
+      <a href="https://github.com/digital-ai/dot-illustrations" target="_blank">
+        https://github.com/digital-ai/dot-illustrations
+      </a>
+    </p>
+      <input class="search-wrapper" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for illustrations...">
+    <div class="demo-wrapper dot-illustration">
+      <div>
+        <img class="illustration-agility-global-disconnected"></i>
+        <span>illustration-agility-global-disconnected</span>
+      </div>
+      <div>
+        <img class="illustration-agility-global-features"></i>
+        <span>illustration-agility-global-features</span>
+      </div>
+      <div>
+        <img class="illustration-agility-global-launch"></i>
+        <span>illustration-agility-global-launch</span>
+      </div>
+      <div>
+        <img class="illustration-agility-global-nothing-defined"></i>
+        <span>illustration-agility-global-nothing-defined</span>
+      </div>
+      <div>
+        <img class="illustration-agility-global-survey"></i>
+        <span>illustration-agility-global-survey</span>
+      </div>
+      <div>
+        <img class="illustration-agility-processes-assets"></i>
+        <span>illustration-agility-processes-assets</span>
+      </div>
+      <div>
+        <img class="illustration-agility-processes-work-item"></i>
+        <span>illustration-agility-processes-work-item</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-custom"></i>
+        <span>illustration-dashboards-custom</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-dora"></i>
+        <span>illustration-dashboards-dora</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-onboarding"></i>
+        <span>illustration-dashboards-onboarding</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-release-dependency"></i>
+        <span>illustration-dashboards-release-dependency</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-release-executive-overview"></i>
+        <span>illustration-dashboards-release-executive-overview</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-release-late-task"></i>
+        <span>illustration-dashboards-release-late-task</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-release-open-task"></i>
+        <span>illustration-dashboards-release-open-task</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-workflow-adoption"></i>
+        <span>illustration-dashboards-workflow-adoption</span>
+      </div>
+      <div>
+        <img class="illustration-dot-global-disconnected"></i>
+        <span>illustration-dot-global-disconnected</span>
+      </div>
+      <div>
+        <img class="illustration-dot-global-features"></i>
+        <span>illustration-dot-global-features</span>
+      </div>
+      <div>
+        <img class="illustration-dot-global-launch"></i>
+        <span>illustration-dot-global-launch</span>
+      </div>
+      <div>
+        <img class="illustration-dot-global-nothing-defined"></i>
+        <span>illustration-dot-global-nothing-defined</span>
+      </div>
+      <div>
+        <img class="illustration-dot-global-survey"></i>
+        <span>illustration-dot-global-survey</span>
+      </div>
+      <div>
+        <img class="illustration-dot-processes-assets"></i>
+        <span>illustration-dot-processes-assets</span>
+      </div>
+      <div>
+        <img class="illustration-dot-processes-work-item"></i>
+        <span>illustration-dot-processes-work-item</span>
+      </div>
+    </div>
+  </body>
+</html>

package/demo/script.js

@@ -0,0 +1,16 @@
+function myFunction() {
+    var input, filter, divs, i, div, txtValue;
+    input = document.getElementById('myInput');
+    filter = input.value.toUpperCase();
+    divs = document.querySelectorAll('div');
+  
+    for (i = 0; i < divs.length; i++) {
+      div = divs[i];
+      txtValue = div.textContent || div.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        divs[i].style.display = "";
+      } else {
+        divs[i].style.display = "none";
+      }
+    }
+  }