Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <div class="svg-container">
      <div class="svgs svg-1">
        <svg
          width="129"
          height="108"
          viewBox="0 0 129 108"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M70.6309 75.6059L69.4855 77.1356L67.4878 77.323L66.5707 76.8051L65.9571 76.0317L65.8787 74.1272L67.1708 72.7303L68.0468 72.4782L68.9673 72.5838L70.365 73.7286L70.6309 75.6059Z"
            fill="white"
          />
          <path
            d="M77.6051 76.5905L76.7937 78.2395L74.9563 78.7744L73.279 77.8409L72.8392 76.059L73.7972 74.502L75.4881 74.0079L77.0188 74.8597L77.6051 76.5905Z"
            fill="white"
          />
          <path
            d="M84.6626 76.3895L84.1308 78.0828L83.4115 78.6416L82.4808 78.8665L81.5468 78.7608L80.7627 78.2668L80.0706 76.6451L80.6945 75.0063L81.4002 74.5157L82.2286 74.2738L83.0945 74.4066L83.8377 74.8461L84.6626 76.3895Z"
            fill="white"
          />
          <path
            d="M91.6049 75.1801L91.3356 76.8427L89.8867 77.8137H88.9663L88.5538 77.7081L88.1822 77.4969L87.2755 76.0454L87.6606 74.4067L87.9266 74.1034L88.2334 73.824L89.0072 73.5038L90.6197 73.8104L91.6049 75.1801Z"
            fill="white"
          />
          <path
            d="M98.3253 73.0502L98.2878 74.6617L97.7935 75.3397L97.0196 75.7656L95.356 75.6736L94.3299 74.4199L94.4628 72.839L95.6628 71.7726L96.4605 71.667L97.2344 71.8646L98.3253 73.0502Z"
            fill="white"
          />
          <path
            d="M104.786 70.1477L104.878 71.6945L103.828 72.8767L101.125 71.8921L102.097 69.2175L103.627 69.1392L104.786 70.1477Z"
            fill="white"
          />
          <path
            d="M110.91 66.7031L110.242 69.3503L107.62 68.6587L108.312 66.025L110.91 66.7031Z"
            fill="white"
          />
          <path
            d="M116.835 62.8295L116.331 65.3848L113.774 64.8805L114.279 62.3491L116.835 62.8295Z"
            fill="white"
          />
          <path
            d="M122.539 58.6762L122.164 61.0986L119.744 60.7545L120.102 58.3321L122.539 58.6762Z"
            fill="white"
          />
          <path
            d="M128.121 54.3524L127.828 56.6658L125.537 56.3727L125.803 54.073L128.121 54.3524Z"
            fill="white"
          />
        </svg>
      </div>
      <div class="svgs svg-2">
        <svg
          width="129"
          height="108"
          viewBox="0 0 129 108"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M40.2175 32.4587L37.8755 31.6717L37.1153 30.6496L36.7949 29.3038L36.8494 28.6258L37.0369 27.9751L37.7289 26.895L38.7789 26.2034L40.0436 25.9922L41.2982 26.2817L42.3107 26.9631L43.0027 27.9478L43.1868 28.5202L43.2686 29.13L43.0675 30.3021L42.4436 31.3412L40.2175 32.4587Z"
            fill="white"
          />
          <path
            d="M41.2638 39.4194L38.9047 38.9391L37.6025 36.8097L37.6537 35.5183L38.1991 34.4009L40.3059 33.2186L42.6069 33.8694L43.3944 34.7347L43.8206 35.8523L43.2615 38.1145L41.2638 39.4194Z"
            fill="white"
          />
          <path
            d="M43.0118 46.2607L40.6936 46.0188L39.7868 45.2352L39.2141 44.1041L39.163 42.8537L39.5618 41.7225L41.4538 40.3768L43.7686 40.7516L44.6072 41.5079L45.1288 42.5607L45.1935 43.7191L44.8219 44.7957L43.0118 46.2607Z"
            fill="white"
          />
          <path
            d="M45.5009 52.8604L43.21 52.8877L41.5975 51.1842L41.6657 48.8537L43.3702 47.3649L45.6066 47.4977L47.127 49.0684L47.0588 51.2523L45.5009 52.8604Z"
            fill="white"
          />
          <path
            d="M48.78 59.1021L46.5949 59.4224L45.5823 58.9045L44.8255 57.9846L44.5971 55.7223L46.0494 54.0869L48.2346 53.954L49.8573 55.2828L50.1777 56.3083L50.0857 57.3611L48.78 59.1021Z"
            fill="white"
          />
          <path
            d="M52.9654 64.7986L50.9267 65.4255L49.8734 65.0916L48.9938 64.3319L48.4756 63.2689L48.4484 62.165L49.5938 60.3797L51.6597 59.9538L52.6312 60.2877L53.4017 60.9657L53.8551 61.8992L53.9233 62.9077L52.9654 64.7986Z"
            fill="white"
          />
          <path
            d="M58.0751 69.6433L56.2615 70.6143L55.2115 70.4814L54.2263 69.8954L53.5582 68.9925L53.3059 67.9397L54.1036 66.0624L55.982 65.2788L56.9672 65.4253L57.8195 65.9296L58.3922 66.7302L58.6444 67.674L58.0751 69.6433Z"
            fill="white"
          />
          <path
            d="M64.0903 73.3027L63.4664 74.1272L62.6005 74.594L60.5073 74.3691L59.6824 73.6366L59.2289 72.6928L59.2153 71.6946L59.6039 70.7474L60.3369 70.0422L61.2267 69.6435L62.1744 69.589L63.0778 69.882L64.2232 71.3334L64.3187 72.3181L64.0903 73.3027Z"
            fill="white"
          />
          <path
            d="M70.7519 75.6059L69.6065 77.1356L67.6088 77.323L66.6917 76.8051L66.0781 76.0317L65.9997 74.1272L67.2918 72.7303L68.1678 72.4782L69.0883 72.5838L70.486 73.7286L70.7519 75.6059Z"
            fill="white"
          />
          <path
            d="M77.7261 76.5905L76.9147 78.2395L75.0773 78.7744L73.4 77.8409L72.9602 76.059L73.9182 74.502L75.6091 74.0079L77.1398 74.8597L77.7261 76.5905Z"
            fill="white"
          />
          <path
            d="M84.7836 76.3895L84.2518 78.0828L83.5325 78.6416L82.6018 78.8665L81.6678 78.7608L80.8837 78.2668L80.1916 76.6451L80.8155 75.0063L81.5212 74.5157L82.3496 74.2738L83.2155 74.4066L83.9587 74.8461L84.7836 76.3895Z"
            fill="white"
          />
          <path
            d="M91.7259 75.1801L91.4566 76.8427L90.0077 77.8137H89.0873L88.6748 77.7081L88.3032 77.4969L87.3965 76.0454L87.7816 74.4067L88.0476 74.1034L88.3544 73.824L89.1282 73.5038L90.7407 73.8104L91.7259 75.1801Z"
            fill="white"
          />
          <path
            d="M98.4463 73.0502L98.4088 74.6617L97.9145 75.3397L97.1406 75.7656L95.477 75.6736L94.4509 74.4199L94.5838 72.839L95.7838 71.7726L96.5815 71.667L97.3554 71.8646L98.4463 73.0502Z"
            fill="white"
          />
          <path
            d="M104.907 70.1477L104.999 71.6945L103.949 72.8767L101.246 71.8921L102.218 69.2175L103.748 69.1392L104.907 70.1477Z"
            fill="white"
          />
          <path
            d="M111.031 66.7031L110.363 69.3503L107.741 68.6587L108.433 66.025L111.031 66.7031Z"
            fill="white"
          />
          <path
            d="M116.956 62.8295L116.452 65.3848L113.895 64.8805L114.4 62.3491L116.956 62.8295Z"
            fill="white"
          />
          <path
            d="M122.66 58.6762L122.285 61.0986L119.865 60.7545L120.223 58.3321L122.66 58.6762Z"
            fill="white"
          />
          <path
            d="M128.242 54.3524L127.949 56.6658L125.658 56.3727L125.924 54.073L128.242 54.3524Z"
            fill="white"
          />
        </svg>
      </div>
      <div class="svgs svg-3">
        <svg
          width="129"
          height="108"
          viewBox="0 0 129 108"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M41.1511 18.4182L39.0444 16.8339L38.7784 16.1832L38.6591 15.5018L38.833 14.0129L39.6034 12.7216L40.125 12.2412L40.7352 11.9107L43.3738 11.9618L45.184 13.8392L45.3715 14.4252L45.4908 15.0384L45.3033 16.2343L44.7033 17.3007L44.2397 17.713L43.7181 18.0707L41.1511 18.4182Z"
            fill="white"
          />
          <path
            d="M40.1876 25.4062L37.8966 24.2614L37.2864 23.0758L37.1535 22.3842L37.1773 21.6517L37.6308 20.3093L38.5512 19.311L41.0398 18.817L43.1705 20.2139L43.692 21.2939L43.7841 22.5034L43.6375 23.103L43.3852 23.6754L42.5841 24.6056L40.1876 25.4062Z"
            fill="white"
          />
          <path
            d="M40.3385 32.4587L37.9965 31.6717L37.2363 30.6496L36.9159 29.3038L36.9704 28.6258L37.1579 27.9751L37.8499 26.895L38.8999 26.2034L40.1646 25.9922L41.4192 26.2817L42.4317 26.9631L43.1237 27.9478L43.3078 28.5202L43.3896 29.13L43.1885 30.3021L42.5646 31.3412L40.3385 32.4587Z"
            fill="white"
          />
          <path
            d="M41.3848 39.4194L39.0257 38.9391L37.7235 36.8097L37.7747 35.5183L38.3201 34.4009L40.4269 33.2186L42.7279 33.8694L43.5154 34.7347L43.9416 35.8523L43.3825 38.1145L41.3848 39.4194Z"
            fill="white"
          />
          <path
            d="M43.1328 46.2607L40.8146 46.0188L39.9078 45.2352L39.3351 44.1041L39.284 42.8537L39.6828 41.7225L41.5748 40.3768L43.8896 40.7516L44.7282 41.5079L45.2498 42.5607L45.3145 43.7191L44.9429 44.7957L43.1328 46.2607Z"
            fill="white"
          />
          <path
            d="M45.6219 52.8604L43.331 52.8877L41.7185 51.1842L41.7867 48.8537L43.4912 47.3649L45.7276 47.4977L47.248 49.0684L47.1798 51.2523L45.6219 52.8604Z"
            fill="white"
          />
          <path
            d="M48.901 59.1021L46.7159 59.4224L45.7033 58.9045L44.9465 57.9846L44.7181 55.7223L46.1704 54.0869L48.3556 53.954L49.9783 55.2828L50.2987 56.3083L50.2067 57.3611L48.901 59.1021Z"
            fill="white"
          />
          <path
            d="M53.0864 64.7986L51.0477 65.4255L49.9944 65.0916L49.1148 64.3319L48.5966 63.2689L48.5694 62.165L49.7148 60.3797L51.7807 59.9538L52.7522 60.2877L53.5227 60.9657L53.9761 61.8992L54.0443 62.9077L53.0864 64.7986Z"
            fill="white"
          />
          <path
            d="M58.1961 69.6433L56.3825 70.6143L55.3325 70.4814L54.3473 69.8954L53.6792 68.9925L53.4269 67.9397L54.2246 66.0624L56.103 65.2788L57.0882 65.4253L57.9405 65.9296L58.5132 66.7302L58.7654 67.674L58.1961 69.6433Z"
            fill="white"
          />
          <path
            d="M64.2113 73.3027L63.5874 74.1272L62.7215 74.594L60.6283 74.3691L59.8034 73.6366L59.3499 72.6928L59.3363 71.6946L59.7249 70.7474L60.4579 70.0422L61.3477 69.6435L62.2954 69.589L63.1988 69.882L64.3442 71.3334L64.4397 72.3181L64.2113 73.3027Z"
            fill="white"
          />
          <path
            d="M70.8729 75.6059L69.7275 77.1356L67.7298 77.323L66.8127 76.8051L66.1991 76.0317L66.1207 74.1272L67.4128 72.7303L68.2888 72.4782L69.2093 72.5838L70.607 73.7286L70.8729 75.6059Z"
            fill="white"
          />
          <path
            d="M77.8471 76.5905L77.0357 78.2395L75.1983 78.7744L73.521 77.8409L73.0812 76.059L74.0392 74.502L75.7301 74.0079L77.2608 74.8597L77.8471 76.5905Z"
            fill="white"
          />
          <path
            d="M84.9046 76.3895L84.3728 78.0828L83.6535 78.6416L82.7228 78.8665L81.7888 78.7608L81.0047 78.2668L80.3126 76.6451L80.9365 75.0063L81.6422 74.5157L82.4706 74.2738L83.3365 74.4066L84.0797 74.8461L84.9046 76.3895Z"
            fill="white"
          />
          <path
            d="M91.8469 75.1801L91.5776 76.8427L90.1287 77.8137H89.2083L88.7958 77.7081L88.4242 77.4969L87.5175 76.0454L87.9026 74.4067L88.1686 74.1034L88.4754 73.824L89.2492 73.5038L90.8617 73.8104L91.8469 75.1801Z"
            fill="white"
          />
          <path
            d="M98.5673 73.0502L98.5298 74.6617L98.0355 75.3397L97.2616 75.7656L95.598 75.6736L94.5719 74.4199L94.7048 72.839L95.9048 71.7726L96.7025 71.667L97.4764 71.8646L98.5673 73.0502Z"
            fill="white"
          />
          <path
            d="M105.028 70.1477L105.12 71.6945L104.07 72.8767L101.367 71.8921L102.339 69.2175L103.869 69.1392L105.028 70.1477Z"
            fill="white"
          />
          <path
            d="M111.152 66.7031L110.484 69.3503L107.862 68.6587L108.554 66.025L111.152 66.7031Z"
            fill="white"
          />
          <path
            d="M117.077 62.8295L116.573 65.3848L114.016 64.8805L114.521 62.3491L117.077 62.8295Z"
            fill="white"
          />
          <path
            d="M122.781 58.6762L122.406 61.0986L119.986 60.7545L120.344 58.3321L122.781 58.6762Z"
            fill="white"
          />
          <path
            d="M128.363 54.3524L128.07 56.6658L125.779 56.3727L126.045 54.073L128.363 54.3524Z"
            fill="white"
          />
          <path
            d="M47.2504 6.10901L46.1186 5.40375L45.4641 5.26743L44.8129 5.30835L42.4164 6.86537L41.8573 8.26222L41.9221 9.63527L43.5482 11.5909L46.0777 11.8567L47.1549 11.3661L47.9697 10.5381L48.3822 8.344L48.2492 7.74438L48.0208 7.172L47.2504 6.10901Z"
            fill="white"
          />
          <path
            d="M53.3381 2.78005L51.845 0.728985L50.3689 0.463226L49.5302 0.596105L48.7291 0.930021L46.9189 3.28428L46.8644 3.95205L46.9973 4.58921L47.6791 5.68287L48.7018 6.43924L49.2609 6.66752L49.8336 6.82764L51.8075 6.64022L52.1654 6.37446L52.4722 6.0406L52.9495 5.17522L53.3381 2.78005Z"
            fill="white"
          />
          <path
            d="M59.7532 4.93688L60.4827 3.91138L60.5373 2.59282L60.2714 1.90123L59.7771 1.20959L59.0987 0.650834L58.2873 0.238574L57.3805 0.0137277L56.5555 0.000106812L55.7817 0.170418L55.1578 0.490713L54.3328 1.47535L54.0908 2.71208L54.3601 3.925L54.8783 4.93688L56.0885 6.11913L57.6464 5.97606L58.6862 5.58766L59.7532 4.93688Z"
            fill="white"
          />
          <path
            d="M61.669 11.5771L63.7996 10.5789L64.386 7.93158L62.6951 5.58757L61.4678 5.32181L60.3258 5.70678L59.419 6.50743L58.7781 7.39668L58.4065 9.1275L59.4838 10.7799L61.669 11.5771Z"
            fill="white"
          />
          <path
            d="M61.0823 18.5923L63.2811 17.9926L64.3857 15.9416L64.2527 14.7184L63.68 13.7066L61.6278 12.7219L59.4972 13.4544L58.8051 14.3198L58.4846 15.3828L59.1392 17.485L61.0823 18.5923Z"
            fill="white"
          />
          <path
            d="M59.7372 25.5256L61.9053 25.1645L63.1701 23.3008L62.744 21.0931L60.8827 19.9074L58.752 20.4014L57.5656 22.1595L57.9645 24.2616L59.7372 25.5256Z"
            fill="white"
          />
          <path
            d="M57.7535 32.2852L59.8705 32.1387L60.7227 31.4606L61.2545 30.4624L61.0296 28.2921L59.3626 27.0008L57.2455 27.2564L55.9535 28.8645L55.8614 29.9309L56.1546 30.9291L57.7535 32.2852Z"
            fill="white"
          />
          <path
            d="M55.2734 38.8879L58.7608 37.3821L58.7233 35.3071L57.2029 33.8966L55.1541 34.0023L53.77 35.4536L55.2734 38.8879Z"
            fill="white"
          />
          <path
            d="M52.3843 45.3545L55.8343 44.0632L54.5423 40.6426L51.1469 41.9338L52.3843 45.3545Z"
            fill="white"
          />
          <path
            d="M49.2209 51.6507L51.1232 51.8245L52.5755 50.5707L51.4982 47.2045L48.1539 48.3084L48.021 50.1857L49.2209 51.6507Z"
            fill="white"
          />
          <path
            d="M45.8127 57.8242L49.0888 56.9077L48.1547 53.6472L44.9059 54.5637L45.8127 57.8242Z"
            fill="white"
          />
          <path
            d="M42.1497 63.8547L45.3202 63.1086L44.5634 59.94L41.4202 60.6998L42.1497 63.8547Z"
            fill="white"
          />
          <path
            d="M38.246 69.7353L39.896 70.0828L41.3073 69.139L40.7107 66.0761L37.646 66.6757L37.3255 68.3247L38.246 69.7353Z"
            fill="white"
          />
          <path
            d="M34.1154 75.4592L37.0711 75.0061L36.604 72.0522L33.662 72.5189L34.1154 75.4592Z"
            fill="white"
          />
          <path
            d="M29.7645 81.0095L32.6281 80.7165L32.2667 77.8546L29.4576 78.1885L29.7645 81.0095Z"
            fill="white"
          />
          <path
            d="M25.1964 86.4128L27.9271 86.2118L27.7259 83.4964L25.0089 83.6974L25.1964 86.4128Z"
            fill="white"
          />
          <path
            d="M20.4148 91.6018L23.0261 91.5371L23.5341 90.1913L22.9341 88.9273L21.6148 88.4503L20.35 89.0227L20.4148 91.6018Z"
            fill="white"
          />
          <path
            d="M15.436 96.607L17.9246 96.6343V94.1574H15.4735L15.436 96.607Z"
            fill="white"
          />
          <path
            d="M10.2786 101.424L12.6069 101.53L12.7161 99.203L10.3979 99.0974L10.2786 101.424Z"
            fill="white"
          />
          <path
            d="M0.242004 107.945L8.53619 107.986L16.8474 108L8.01798 103.315V93.3054L4.14193 100.627L0.242004 107.945Z"
            fill="white"
          />
        </svg>
      </div>
    </div>


              
            
!

CSS

              
                body {
  background-color: #333;
}
.svg-container {
  position: relative;
}
.svgs {
  position: absolute;
}

              
            
!

JS

              
                let tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
tl.from(".svgs", {
  duration: 0.8,
  stagger: 0.4,
  display: 'none'
});
tl.set(".svgs", { display: 'none'})

              
            
!
999px

Console