Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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

              
                <svg class="bag" width="973" height="978" viewBox="0 0 973 978" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="bag area">
<g id="premium">
<g id="confetti">
<path class="left"  d="M586.434 510.719C587.982 510.719 589.466 510.104 590.561 509.01C591.655 507.915 592.27 506.431 592.27 504.883C592.27 503.335 591.655 501.851 590.561 500.756C589.466 499.662 587.982 499.047 586.434 499.047C584.886 499.047 583.402 499.662 582.307 500.756C581.213 501.851 580.598 503.335 580.598 504.883C580.598 506.431 581.213 507.915 582.307 509.01C583.402 510.104 584.886 510.719 586.434 510.719V510.719Z" fill="#231F20"/>
<path class="right" d="M514.856 504.981C521.638 504.981 527.135 499.484 527.135 492.703C527.135 485.921 521.638 480.424 514.856 480.424C508.075 480.424 502.577 485.921 502.577 492.703C502.577 499.484 508.075 504.981 514.856 504.981Z" fill="#231F20"/>
<path class="center" d="M646.32 547.889C653.102 547.889 658.599 542.392 658.599 535.61C658.599 528.829 653.102 523.331 646.32 523.331C639.539 523.331 634.041 528.829 634.041 535.61C634.041 542.392 639.539 547.889 646.32 547.889Z" fill="#5AAEAE"/>
<path class="left" d="M191.279 484.008C198.06 484.008 203.558 478.51 203.558 471.729C203.558 464.947 198.06 459.45 191.279 459.45C184.497 459.45 179 464.947 179 471.729C179 478.51 184.497 484.008 191.279 484.008Z" fill="#5AAEAE"/>
<path class="right" d="M393.302 440.395C394.075 440.405 394.842 440.262 395.559 439.973C396.276 439.684 396.928 439.256 397.478 438.713C398.028 438.17 398.465 437.524 398.763 436.811C399.061 436.098 399.214 435.332 399.214 434.56C399.214 433.787 399.061 433.022 398.763 432.309C398.465 431.596 398.028 430.949 397.478 430.406C396.928 429.863 396.276 429.435 395.559 429.146C394.842 428.857 394.075 428.714 393.302 428.724C391.768 428.744 390.303 429.368 389.225 430.46C388.147 431.552 387.542 433.025 387.542 434.56C387.542 436.094 388.147 437.567 389.225 438.659C390.303 439.751 391.768 440.375 393.302 440.395Z" fill="#5AAEAE"/>
<path class="center" d="M268.242 341.166C269.79 341.166 271.274 340.551 272.369 339.457C273.463 338.362 274.078 336.878 274.078 335.33C274.078 333.782 273.463 332.298 272.369 331.203C271.274 330.109 269.79 329.494 268.242 329.494C266.694 329.494 265.21 330.109 264.115 331.203C263.021 332.298 262.406 333.782 262.406 335.33C262.406 336.878 263.021 338.362 264.115 339.457C265.21 340.551 266.694 341.166 268.242 341.166V341.166Z" fill="#5AAEAE"/>
<path class="left" d="M546.229 325.244C547.777 325.244 549.261 324.629 550.355 323.535C551.45 322.44 552.065 320.956 552.065 319.408C552.065 317.861 551.45 316.377 550.355 315.282C549.261 314.188 547.777 313.573 546.229 313.573C544.695 313.593 543.23 314.217 542.152 315.309C541.074 316.401 540.469 317.874 540.469 319.408C540.469 320.943 541.074 322.416 542.152 323.508C543.23 324.6 544.695 325.224 546.229 325.244V325.244Z" fill="#5AAEAE"/>
<path class="right"d="M237.418 529.754C239.719 529.754 241.925 528.84 243.552 527.213C245.179 525.586 246.093 523.38 246.093 521.079C246.093 518.778 245.179 516.572 243.552 514.945C241.925 513.318 239.719 512.404 237.418 512.404C235.117 512.404 232.911 513.318 231.284 514.945C229.657 516.572 228.743 518.778 228.743 521.079C228.743 523.38 229.657 525.586 231.284 527.213C232.911 528.84 235.117 529.754 237.418 529.754Z" fill="#AD97B1"/>
<path class="center" d="M461.296 271.821C468.077 271.821 473.574 266.323 473.574 259.542C473.574 252.761 468.077 247.263 461.296 247.263C454.514 247.263 449.017 252.761 449.017 259.542C449.017 266.323 454.514 271.821 461.296 271.821Z" fill="#AD97B1"/>
<path class="left" d="M207.063 444.978C208.611 444.978 210.095 444.363 211.19 443.269C212.284 442.174 212.899 440.69 212.899 439.142C212.899 437.594 212.284 436.11 211.19 435.015C210.095 433.921 208.611 433.306 207.063 433.306C205.515 433.306 204.031 433.921 202.936 435.015C201.842 436.11 201.227 437.594 201.227 439.142C201.227 440.69 201.842 442.174 202.936 443.269C204.031 444.363 205.515 444.978 207.063 444.978V444.978Z" fill="#AD97B1"/>
<path class="right" d="M339.036 415.916C345.818 415.916 351.315 410.418 351.315 403.637C351.315 396.856 345.818 391.358 339.036 391.358C332.255 391.358 326.757 396.856 326.757 403.637C326.757 410.418 332.255 415.916 339.036 415.916Z" fill="#AD97B1"/>
<path class="center" d="M327.306 594.596C328.072 594.596 328.831 594.445 329.539 594.152C330.247 593.858 330.89 593.429 331.432 592.887C331.974 592.345 332.404 591.701 332.697 590.993C332.99 590.285 333.141 589.526 333.141 588.76C333.141 587.212 332.526 585.728 331.432 584.634C330.337 583.539 328.853 582.925 327.305 582.925C325.758 582.925 324.274 583.539 323.179 584.634C322.085 585.728 321.47 587.212 321.47 588.76C321.47 589.526 321.621 590.285 321.914 590.993C322.208 591.701 322.637 592.345 323.179 592.887C323.721 593.429 324.365 593.859 325.073 594.152C325.781 594.445 326.54 594.596 327.306 594.596V594.596Z" fill="#AD97B1"/>
<path class="left" d="M575.095 465.952C581.876 465.952 587.374 460.454 587.374 453.673C587.374 446.891 581.876 441.394 575.095 441.394C568.314 441.394 562.816 446.891 562.816 453.673C562.816 460.454 568.314 465.952 575.095 465.952Z" fill="#AD97B1"/>
<path class="right" d="M399.863 511.326C406.644 511.326 412.141 505.829 412.141 499.048C412.141 492.266 406.644 486.769 399.863 486.769C393.081 486.769 387.584 492.266 387.584 499.048C387.584 505.829 393.081 511.326 399.863 511.326Z" fill="#682875"/>
<path class="center" d="M249.697 616.49C256.478 616.49 261.975 610.992 261.975 604.211C261.975 597.43 256.478 591.932 249.697 591.932C242.915 591.932 237.418 597.43 237.418 604.211C237.418 610.992 242.915 616.49 249.697 616.49Z" fill="#682875"/>
<path class="left" d="M434.878 381.39C437.179 381.39 439.385 380.476 441.012 378.849C442.639 377.222 443.553 375.016 443.553 372.715C443.553 370.414 442.639 368.207 441.012 366.581C439.385 364.954 437.178 364.04 434.878 364.04C432.577 364.04 430.37 364.954 428.743 366.581C427.116 368.207 426.202 370.414 426.202 372.715C426.202 375.016 427.116 377.222 428.744 378.849C430.371 380.476 432.577 381.39 434.878 381.39V381.39Z" fill="#682875"/>
<path class="right" d="M267.478 418.521C268.617 418.521 269.746 418.297 270.798 417.861C271.851 417.425 272.807 416.785 273.613 415.98C274.418 415.174 275.058 414.218 275.494 413.165C275.93 412.113 276.154 410.984 276.154 409.845C276.154 408.706 275.93 407.577 275.494 406.525C275.058 405.472 274.418 404.516 273.613 403.71C272.807 402.904 271.851 402.265 270.798 401.829C269.746 401.393 268.617 401.169 267.478 401.169C265.177 401.169 262.97 402.083 261.343 403.71C259.716 405.337 258.802 407.544 258.802 409.845C258.802 412.146 259.716 414.353 261.343 415.98C262.97 417.607 265.177 418.521 267.478 418.521V418.521Z" fill="#682875"/>
<path class="center" d="M638.35 330.042C645.131 330.042 650.629 324.545 650.629 317.764C650.629 310.982 645.131 305.485 638.35 305.485C631.568 305.485 626.071 310.982 626.071 317.764C626.071 324.545 631.568 330.042 638.35 330.042Z" fill="#682875"/>
<path class="left" d="M304.001 535.59C304.767 535.59 305.526 535.439 306.234 535.146C306.942 534.853 307.585 534.423 308.127 533.881C308.669 533.339 309.099 532.696 309.392 531.988C309.685 531.28 309.836 530.522 309.836 529.755C309.837 528.989 309.686 528.23 309.393 527.522C309.099 526.814 308.67 526.171 308.128 525.629C307.586 525.087 306.943 524.658 306.235 524.364C305.527 524.071 304.768 523.92 304.002 523.92C302.454 523.92 300.97 524.534 299.876 525.629C298.782 526.723 298.167 528.207 298.167 529.754C298.166 531.302 298.781 532.786 299.875 533.881C300.969 534.975 302.453 535.59 304.001 535.59V535.59Z" fill="#3C4C6C"/>
<path class="right" d="M455.46 519.924C457.008 519.924 458.492 519.309 459.587 518.215C460.681 517.12 461.296 515.636 461.296 514.088C461.296 512.54 460.681 511.056 459.587 509.961C458.492 508.867 457.008 508.252 455.46 508.252C453.912 508.252 452.428 508.867 451.333 509.961C450.239 511.056 449.624 512.54 449.624 514.088C449.624 515.636 450.239 517.12 451.333 518.215C452.428 519.309 453.912 519.924 455.46 519.924Z" fill="#3C4C6C"/>
<path class="center" d="M580.579 597.435C581.718 597.435 582.846 597.211 583.899 596.775C584.951 596.339 585.908 595.699 586.713 594.894C587.519 594.088 588.158 593.132 588.594 592.079C589.03 591.026 589.254 589.898 589.254 588.759C589.254 586.458 588.34 584.252 586.713 582.625C585.086 580.998 582.88 580.084 580.579 580.084C579.432 580.072 578.294 580.287 577.23 580.717C576.167 581.148 575.199 581.785 574.384 582.592C573.568 583.399 572.921 584.359 572.479 585.418C572.037 586.476 571.81 587.612 571.81 588.759C571.81 589.907 572.037 591.042 572.479 592.101C572.921 593.16 573.568 594.12 574.384 594.927C575.199 595.734 576.167 596.371 577.23 596.802C578.294 597.232 579.432 597.447 580.579 597.435V597.435Z" fill="#3C4C6C"/>
<path class="left" d="M371.133 624.5C371.906 624.51 372.673 624.367 373.39 624.078C374.107 623.789 374.759 623.361 375.309 622.818C375.859 622.275 376.296 621.629 376.594 620.916C376.892 620.203 377.045 619.437 377.045 618.665C377.045 617.892 376.892 617.127 376.594 616.414C376.296 615.701 375.859 615.054 375.309 614.511C374.759 613.968 374.107 613.54 373.39 613.251C372.673 612.962 371.906 612.819 371.133 612.829C369.599 612.849 368.134 613.473 367.056 614.565C365.978 615.657 365.373 617.13 365.373 618.665C365.373 620.199 365.978 621.672 367.056 622.764C368.134 623.856 369.599 624.48 371.133 624.5V624.5Z" fill="#3C4C6C"/>
<path class="right" d="M510.979 648.783C517.76 648.783 523.258 643.286 523.258 636.504C523.258 629.723 517.76 624.225 510.979 624.225C504.197 624.225 498.7 629.723 498.7 636.504C498.7 643.286 504.197 648.783 510.979 648.783Z" fill="#3C4C6C"/>
<path class="center" d="M402.741 680.567C404.289 680.567 405.773 679.952 406.868 678.858C407.962 677.763 408.577 676.279 408.577 674.731C408.577 673.183 407.962 671.699 406.868 670.604C405.773 669.51 404.289 668.895 402.741 668.895C401.193 668.895 399.709 669.51 398.614 670.604C397.52 671.699 396.905 673.183 396.905 674.731C396.905 676.279 397.52 677.763 398.614 678.858C399.709 679.952 401.193 680.567 402.741 680.567Z" fill="#3C4C6C"/>
<path class="left" d="M516.815 565.534C518.363 565.534 519.847 564.919 520.942 563.825C522.036 562.73 522.651 561.246 522.651 559.698C522.651 558.15 522.036 556.666 520.942 555.571C519.847 554.477 518.363 553.862 516.815 553.862C515.267 553.862 513.783 554.477 512.688 555.571C511.594 556.666 510.979 558.15 510.979 559.698C510.979 561.246 511.594 562.73 512.688 563.825C513.783 564.919 515.267 565.534 516.815 565.534V565.534Z" fill="#756328"/>
<path class="right" d="M195.842 588.76C197.39 588.76 198.874 588.145 199.969 587.051C201.063 585.956 201.678 584.472 201.678 582.924C201.678 581.376 201.063 579.892 199.969 578.797C198.874 577.703 197.39 577.088 195.842 577.088C194.294 577.088 192.81 577.703 191.715 578.797C190.621 579.892 190.006 581.376 190.006 582.924C190.006 584.472 190.621 585.956 191.715 587.051C192.81 588.145 194.294 588.76 195.842 588.76V588.76Z" fill="#756328"/>
<path class="center" d="M376.989 335.643C383.77 335.643 389.268 330.146 389.268 323.364C389.268 316.583 383.77 311.086 376.989 311.086C370.208 311.086 364.71 316.583 364.71 323.364C364.71 330.146 370.208 335.643 376.989 335.643Z" fill="#756328"/>
<path class="left" d="M579.502 386.403C580.652 386.42 581.795 386.209 582.862 385.78C583.93 385.352 584.902 384.716 585.722 383.909C586.541 383.101 587.192 382.139 587.636 381.078C588.08 380.016 588.309 378.877 588.309 377.727C588.309 376.577 588.08 375.438 587.635 374.377C587.191 373.315 586.54 372.353 585.72 371.546C584.9 370.739 583.928 370.103 582.861 369.675C581.793 369.247 580.65 369.035 579.5 369.053C577.222 369.088 575.049 370.017 573.451 371.641C571.852 373.264 570.957 375.451 570.957 377.729C570.957 380.007 571.853 382.194 573.452 383.817C575.051 385.44 577.224 386.369 579.502 386.403V386.403Z" fill="#756328"/>
<path class="right" d="M387.583 568.373C388.73 568.385 389.868 568.17 390.932 567.74C391.995 567.309 392.963 566.672 393.778 565.866C394.594 565.059 395.241 564.098 395.683 563.04C396.125 561.981 396.353 560.845 396.353 559.698C396.353 558.551 396.125 557.415 395.683 556.356C395.242 555.298 394.594 554.337 393.779 553.53C392.963 552.723 391.996 552.086 390.933 551.656C389.869 551.225 388.731 551.01 387.584 551.022C385.299 551.046 383.116 551.971 381.509 553.595C379.902 555.219 379.001 557.412 379.001 559.697C379 561.982 379.902 564.175 381.509 565.799C383.115 567.423 385.298 568.348 387.583 568.373Z" fill="#CCB46B"/>
<path class="center" d="M658.599 468.106C660.9 468.106 663.107 467.192 664.734 465.565C666.361 463.938 667.275 461.731 667.275 459.43C667.275 457.129 666.361 454.922 664.734 453.295C663.107 451.668 660.9 450.754 658.599 450.754C656.298 450.754 654.091 451.668 652.464 453.295C650.837 454.922 649.923 457.129 649.923 459.43C649.923 461.731 650.837 463.938 652.464 465.565C654.091 467.192 656.298 468.106 658.599 468.106V468.106Z" fill="#CCB46B"/>
<path class="left" d="M501.462 387.226C502.228 387.226 502.987 387.075 503.695 386.782C504.403 386.488 505.046 386.059 505.588 385.517C506.13 384.975 506.56 384.331 506.853 383.623C507.146 382.915 507.297 382.156 507.297 381.39C507.297 379.842 506.682 378.358 505.588 377.264C504.493 376.169 503.009 375.554 501.461 375.554C499.914 375.554 498.43 376.169 497.335 377.264C496.241 378.358 495.626 379.842 495.626 381.39C495.626 382.156 495.777 382.915 496.07 383.623C496.364 384.331 496.793 384.975 497.335 385.517C497.877 386.059 498.521 386.488 499.229 386.782C499.937 387.075 500.696 387.226 501.462 387.226V387.226Z" fill="#CCB46B"/>
<path class="right" d="M211.548 359.398C218.329 359.398 223.827 353.901 223.827 347.119C223.827 340.338 218.329 334.84 211.548 334.84C204.766 334.84 199.269 340.338 199.269 347.119C199.269 353.901 204.766 359.398 211.548 359.398Z" fill="#CCB46B"/>
<path class="center" d="M653.899 379.373C655.447 379.373 656.931 378.758 658.026 377.664C659.12 376.569 659.735 375.085 659.735 373.537C659.735 371.989 659.12 370.505 658.026 369.41C656.931 368.316 655.447 367.701 653.899 367.701C652.351 367.701 650.867 368.316 649.772 369.41C648.678 370.505 648.063 371.989 648.063 373.537C648.063 375.085 648.678 376.569 649.772 377.664C650.867 378.758 652.351 379.373 653.899 379.373Z" fill="#CCB46B"/>
<path class="left" d="M678.692 597.748C679.458 597.748 680.217 597.597 680.925 597.304C681.633 597.01 682.276 596.58 682.818 596.039C683.36 595.497 683.79 594.853 684.083 594.145C684.376 593.437 684.527 592.678 684.527 591.912C684.527 590.758 684.184 589.63 683.543 588.67C682.902 587.711 681.99 586.963 680.924 586.522C679.858 586.08 678.685 585.965 677.553 586.19C676.421 586.415 675.382 586.971 674.566 587.787C673.75 588.603 673.194 589.643 672.969 590.775C672.744 591.907 672.86 593.08 673.301 594.146C673.743 595.212 674.491 596.123 675.45 596.765C676.41 597.406 677.538 597.748 678.692 597.748V597.748Z" fill="#CCB46B"/>
<path class="right" d="M323.644 478.309L310.562 475.782L299.223 489.667L297.206 470.593L284.242 465.305L297.245 458.941L297.049 442.256L309.465 457.394L323.761 453.829L316.966 465.442L323.644 478.309V478.309Z" fill="#756328"/>
<path class="center" d="M363.848 222L368.078 234.651L385.723 237.726L370.095 248.83L371.838 262.734L359.912 254.489L345.459 262.852L352.568 244.6L342.463 233.888L355.917 234.123L363.848 222Z" fill="#CCB46B"/>
<path class="left" d="M318.787 661.512L316.946 653.659L306.449 650.82L316.496 644.984L316.202 636.504L322.939 642.125L332.123 637.855L326.836 648.489L332.358 655.5L324.251 654.619L318.787 661.512V661.512Z" fill="#CCB46B"/>
<path class="right" d="M434.27 601.273L432.41 593.42L421.933 590.581L431.96 584.745L431.666 576.265L438.422 581.886L447.587 577.617L442.3 588.25L447.822 595.261L439.715 594.4L434.27 601.273V601.273Z" fill="#5AAEAE"/>
<path class="center" d="M462.764 420.44L470.519 422.711L478.157 414.996L478.294 426.609L485.814 430.545L477.589 433.619L476.747 443.705L470.128 433.874L461.296 435.186L466.074 428.586L462.764 420.44V420.44Z" fill="#3C4C6C"/>
<path class="left" d="M633.787 623.246L638.017 635.897L655.662 638.991L640.034 650.075L641.757 663.98L629.85 655.735L615.398 664.097L622.507 645.845L612.402 635.153L625.855 635.388L633.787 623.246V623.246Z" fill="#AD97B1"/>
<path class="right" d="M469.051 343.79L465.996 330.806L448.684 326.145L465.271 316.51L464.781 302.508L475.905 311.791L491.043 304.76L482.328 322.287L491.435 333.881L478.039 332.432L469.051 343.79V343.79Z" fill="#682875"/>
<path class="center" d="M295.678 262.91L303.433 265.182L311.071 257.466L311.188 269.079L318.708 273.015L310.483 276.109L309.661 286.175L303.022 276.344L294.19 277.676L298.968 271.057L295.678 262.91V262.91Z" fill="#682875"/>
<path class="left" d="M692.459 427.725L689.933 414.624L672.836 409.258L689.795 400.308L689.893 386.306L700.625 396.039L716.037 389.635L706.598 406.79L715.215 418.756L701.898 416.739L692.459 427.725V427.725Z" fill="#231F20"/>
</g>
<g id="bag">
<path id="bag back middle" d="M677.866 790.467L164.466 857.501L161 440.452L677.866 405.163V790.467Z" fill="#3E7F7F"/>
<g id="side bag 2">
<path id="bag back right" d="M710.512 449.382L677.866 451.34V405.163L710.512 427.468V449.382Z" fill="#2C5B5B"/>
<path id="bag front right" d="M710.512 448.187V427.468L791 442.312L710.512 448.187Z" fill="#3E7F7F"/>
</g>
<path id="bag front middle" d="M791 869.917L209.489 944.334L205.572 481.342L791 442.175V869.917Z" fill="#5AAEAE"/>
 <g id="text" fill="#000" >
        <text class="premium-text" transform="
translate(400 600)">
          BUY
        </text>
        <text class="premium-text" transform="
translate(400 700)">
          ME
        </text>
      </g>
<g id="side bag">
<path id="bag back left" d="M197.543 873.52L162.958 855.543L161 440.452L197.543 457.215V873.52Z" fill="#5AAEAE"/>
<path id="bag front left" d="M209.489 944.334L197.543 873.521V457.215L205.572 481.342L209.489 944.334V944.334Z" fill="#2C5B5B"/>
<path id="bag bottom" d="M209.489 944.334L162.958 855.543L197.543 873.521L209.489 944.334V944.334Z" fill="#3E7F7F"/>
</g>
<path id="handle back" d="M463.173 432.599C463.839 421.848 465.778 404.242 466.189 393.295C466.972 371.753 466.659 348.586 463.173 327.397C461.835 319.486 458.614 312.012 453.781 305.608C448.948 299.203 442.645 294.055 435.404 290.599C417.583 281.865 387.777 280.69 371.659 293.889C357.696 305.306 354.289 336.248 353.741 353.971C352.82 384.659 358.284 409.353 357.54 440.139C359.753 439.022 362.455 440.139 364.923 439.747C363.689 413.838 361.124 392.747 361.124 366.975C361.124 347.861 362.847 305.326 379.434 295.182C395.101 285.625 420.07 289.679 434.914 297.551C453.675 307.5 457.102 320.268 459.805 342.358C462.076 361.002 461.019 380.918 459.805 399.797C459.215 410.892 458.018 421.947 456.221 432.912C458.542 432.938 460.863 432.834 463.173 432.599Z" fill="#5AAEAE"/>
<path id="handle front" d="M444.96 468.672C443.354 460.173 440.828 451.282 439.907 441.96C438.85 431.209 437.166 420.418 436.696 409.49C435.795 387.949 436.167 364.762 440.162 343.573C443.393 326.496 456.24 313.551 472.122 306.795C492.646 298.061 526.956 296.886 545.482 310.085C561.54 321.502 560.953 352.444 561.58 370.167C562.657 400.854 563.146 429.466 563.969 460.251C561.423 459.135 558.329 460.349 555.489 459.859C556.899 433.95 555.352 408.942 555.352 383.17C555.352 364.057 555.626 321.522 536.532 311.358C518.555 301.821 489.767 305.874 472.69 313.747C451.148 323.695 447.232 336.464 444.04 358.554C441.415 377.178 442.649 397.114 444.04 415.992C444.716 425.164 446.091 434.271 448.152 443.233C449.915 451.438 450.718 460.231 452.069 468.417C449.696 468.297 447.318 468.382 444.96 468.672V468.672Z" fill="#5AAEAE"/>
</g>
</g>
</g>
</svg>

              
            
!

CSS

              
                /* CSS reset */
// font-family: chennai, sans-serif;
// font-family: omnes-pro, sans-serif;
// font-family: industry-inc-bevel, sans-serif;
// font-family: hobeaux, sans-serif;
// font-family: zubilo-black, sans-serif;
// font-family: cortado, sans-serif;
// font-family: ccsignlanguage, sans-serif;
// font-family: ccsignlanguagescreamers, sans-serif;
// font-family: como, sans-serif;
// font-family: piepie, sans-serif;
// font-family: rig-solid-medium-fill, sans-serif;
// font-family: jeff-script, sans-serif;
// font-family: liza-text, sans-serif;
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html { font-size: 62.5%; }

body {
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content:center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.steam {
  visibility:hidden;
}
svg {
  position: relative;
  width: 500px;
}
.premium-text {
  font-size: 90px;
  fill: rgba(0,0,0,0.9);
  font-size: 100px;
  font-family: industry-inc-bevel, sans-serif;
  stroke: black;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  // animation: hot 4s linear infinite;
}

@keyframes hot {
  to {stroke-dashoffset: 1500}
}
  
              
            
!

JS

              
                gsap.set(".left, .right, .center", {
         y: 200,
         scale:0
         })

function shinyText () {
  let tl = gsap.timeline();
  tl.to('.premium-text', {
    duration: 2,
    ease: "none",
    strokeDashoffset: 1500,
  })
  return tl
}
function squashBag () {
  let tl = gsap.timeline({ 
    defaults: { 
      duration: 0.5,  
      ease: "back(1.4)", 
      transformOrigin: "0 100%",
    }
  })
  .to('#bag', {
  scaleX: 0.9,
  scaleY: 0.8
})
.to('#bag', {
  scaleX: 1.1,
  scaleY: 1.1
})
  .to('#bag', {
  scaleX: 1,
  scaleY: 1
})
  return tl;
}
function startConfetti (element) {
  let tl = gsap.timeline();
tl
.to(element,{
  ease: "rough({ template: elastic.out, strength: 1, points: 10, taper: 'none', randomize: true, clamp: false})",
  stagger: {
    from: "start",
    each: 0.02,
  },
    y:gsap.utils.wrap([-300, -500, -600, -700]),
    scale:  gsap.utils.distribute({
    base: 1,
    amount: 0.5,
    from: "center"
    }),
    force3D: true,
    x:gsap.utils.wrap([-200, -100, 100, 200, 400]),
    rotationX: gsap.utils.wrap([360, -420, 960]),
    rotationZ: gsap.utils.wrap([360, 420, 960]),
    duration:  gsap.utils.distribute({
    base: 0.01,
    amount: 0.5,
    from: "center"
    })
  })
  return tl;
}

function endConfetti (element) {
  let tl = gsap.timeline();
tl
.to(element,{
ease: "rough({ template: elastic.out, strength: 1, points: 10, taper: 'none', randomize: true, clamp: false})",
  stagger: {
    from: "start",
  },
    x:gsap.utils.wrap([-200, -100, 100, 200, 400]),
    y:gsap.utils.wrap([200, 300, 400, 500]),
  scale:  gsap.utils.distribute({
    base: 1,
    amount: -0.5,
    from: "center"
    }),
    force3D: true,
    rotationX: gsap.utils.wrap([-360, 420, 960]),
    rotationZ: gsap.utils.wrap([360, 420, 960]),
    duration:  gsap.utils.distribute({
    base: 0.5,
    amount: 0.2,
    from: "center"
    })
  })
  return tl;
}

const premiumMain = gsap.timeline()

const animateBag = document.querySelector('.bag')
animateBag.addEventListener("click", () => {
    premiumMain.add("s");
    premiumMain
    .add(shinyText(), "s")
    .add(squashBag(), "s")
    .add(startConfetti(".left"),"s+=0.6")
    .add(startConfetti(".right"),"s+=0.6")
    .add(startConfetti(".center"),"s+=0.6")
    .add(endConfetti(".left"),"s+=1.2")
    .add(endConfetti(".right"),"s+=1.25")
    .add(endConfetti(".center"),"s+=1.3")
})
              
            
!
999px

Console