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 width="1156" height="854" viewBox="0 0 1156 854" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_Golden_gate_bridge_jkph 1" clip-path="url(#clip0)">
<path id="Vector" opacity="0.1" d="M671.648 140.78C597.539 137.94 526.955 111.537 459.555 82.6488C392.154 53.7612 325.393 21.7559 253.058 6.44885C206.534 -3.39642 153.33 -4.78939 115.843 22.7396C79.7691 49.2308 68.1129 94.9601 61.8461 137.391C57.1311 169.315 54.3591 202.913 67.2781 232.799C76.2473 253.548 92.1731 270.989 103.186 290.863C141.507 360.017 114.421 445.292 72.8927 512.815C53.4124 544.489 30.817 574.706 15.7849 608.423C0.752748 642.141 -6.20118 680.776 6.95059 715.171C19.9864 749.262 51.052 774.869 84.7034 792.88C153.051 829.46 233.59 839.929 312.128 845.859C485.978 858.985 660.758 853.302 835.07 847.61C899.579 845.504 964.373 843.37 1027.83 832.361C1063.07 826.247 1099.46 816.544 1125.04 793.121C1157.52 763.384 1165.57 713.032 1143.81 675.746C1107.3 613.203 1006.37 597.668 980.853 530.548C966.808 493.603 981.231 452.45 1001.64 418.186C1045.43 344.681 1118.82 280.196 1122.68 196.179C1125.34 138.475 1090.06 80.6857 1035.51 53.3836C978.327 24.7656 899.037 28.3655 856.854 75.7379C813.417 124.518 737.082 143.287 671.648 140.78Z" fill="#E76F51"/>
<path id="Vector_2" d="M410.5 562.329C410.5 562.329 432.5 554.754 448.5 562.329C464.5 569.903 490.5 564.854 498.5 560.814C506.5 556.774 542.5 562.329 546.5 566.368C550.5 570.408 566.5 575.458 577.5 571.418C588.5 567.378 610.5 558.289 619.5 563.844" fill="#2196F3"/>
<path id="Vector_3" opacity="0.2" d="M410.5 562.329C410.5 562.329 432.5 554.754 448.5 562.329C464.5 569.903 490.5 564.854 498.5 560.814C506.5 556.774 542.5 562.329 546.5 566.368C550.5 570.408 566.5 575.458 577.5 571.418C588.5 567.378 610.5 558.289 619.5 563.844" fill="black"/>
<path id="Vector_4" d="M331.5 502.962C331.5 502.962 381.921 487.962 418.591 502.962C455.261 517.962 514.849 507.962 533.184 499.962C551.519 491.962 634.026 502.962 643.194 510.962C652.361 518.962 689.031 528.962 714.242 520.962C739.452 512.962 789.873 494.962 810.5 505.962" fill="#2196F3"/>
<path id="Vector_5" opacity="0.2" d="M331.5 502.962C331.5 502.962 381.921 487.962 418.591 502.962C455.261 517.962 514.849 507.962 533.184 499.962C551.519 491.962 634.026 502.962 643.194 510.962C652.361 518.962 689.031 528.962 714.242 520.962C739.452 512.962 789.873 494.962 810.5 505.962" fill="black"/>
<path id="Vector_6" d="M331.454 247.789C357.989 247.789 379.5 226.561 379.5 200.376C379.5 174.19 357.989 152.962 331.454 152.962C304.919 152.962 283.409 174.19 283.409 200.376C283.409 226.561 304.919 247.789 331.454 247.789Z" fill="url(#paint0_linear)"/>
<path id="Vector_7" d="M331.454 242.259C354.586 242.259 373.338 223.507 373.338 200.376C373.338 177.244 354.586 158.492 331.454 158.492C308.323 158.492 289.571 177.244 289.571 200.376C289.571 223.507 308.323 242.259 331.454 242.259Z" fill="#F4A261"/>
<path id="Vector_8" d="M1007.5 448.962H128.5V465.962H1007.5V448.962Z" fill="black"/>
<path id="Vector_9" d="M563 391.933H557V459.933H563V391.933Z" fill="black"/>
<path id="Vector_10" d="M231.075 204.933H225.075V459.933H231.075V204.933Z" fill="black"/>
<path id="Vector_11" d="M912.075 204.933H906.075V459.933H912.075V204.933Z" fill="black"/>
<path id="Vector_12" d="M909 206.462C558 682.462 227 206.462 227 206.462" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_13" d="M532.53 414.751V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_14" d="M604.5 418.018V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_15" d="M459.851 395.073V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_16" d="M390.355 359.787V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_17" d="M319.138 306.462V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_18" d="M677.235 399.96V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_19" d="M751.553 362.462V448.462" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_20" d="M821.831 306.462V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_21" d="M281.484 270.612V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_22" d="M856.797 270.612V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_23" d="M355.345 335.821V448.462" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_24" d="M426.826 380.31V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_25" d="M490.301 405.462V448.462" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_26" d="M643.525 410.065V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_27" d="M713.248 384.459V448.962" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_28" d="M783.447 339.626V448.462" stroke="black" stroke-miterlimit="10"/>
<path id="Vector_29" d="M330.5 599.329C330.5 599.329 339.553 591.754 346.136 599.329C352.72 606.903 363.419 601.854 366.711 597.814C370.002 593.774 384.816 599.329 386.462 603.368C388.108 607.408 394.691 612.458 399.218 608.418C403.744 604.378 412.797 595.289 416.5 600.844" fill="#2196F3"/>
<path id="Vector_30" opacity="0.2" d="M330.5 599.329C330.5 599.329 339.553 591.754 346.136 599.329C352.72 606.903 363.419 601.854 366.711 597.814C370.002 593.774 384.816 599.329 386.462 603.368C388.108 607.408 394.691 612.458 399.218 608.418C403.744 604.378 412.797 595.289 416.5 600.844" fill="black"/>
<path id="Vector_31" d="M170.5 526.329C170.5 526.329 179.553 518.754 186.136 526.329C192.72 533.903 203.419 528.854 206.711 524.814C210.002 520.774 224.816 526.329 226.462 530.368C228.108 534.408 234.691 539.458 239.218 535.418C243.744 531.378 252.797 522.289 256.5 527.844" fill="#2196F3"/>
<path id="Vector_32" opacity="0.2" d="M170.5 526.329C170.5 526.329 179.553 518.754 186.136 526.329C192.72 533.903 203.419 528.854 206.711 524.814C210.002 520.774 224.816 526.329 226.462 530.368C228.108 534.408 234.691 539.458 239.218 535.418C243.744 531.378 252.797 522.289 256.5 527.844" fill="black"/>
<path id="Vector_33" d="M76.5 613.329C76.5 613.329 85.5526 605.754 92.1364 613.329C98.7201 620.903 109.419 615.854 112.711 611.814C116.002 607.774 130.816 613.329 132.462 617.368C134.108 621.408 140.691 626.458 145.218 622.418C149.744 618.378 158.797 609.289 162.5 614.844" fill="#2196F3"/>
<path id="Vector_34" opacity="0.2" d="M76.5 613.329C76.5 613.329 85.5526 605.754 92.1364 613.329C98.7201 620.903 109.419 615.854 112.711 611.814C116.002 607.774 130.816 613.329 132.462 617.368C134.108 621.408 140.691 626.458 145.218 622.418C149.744 618.378 158.797 609.289 162.5 614.844" fill="black"/>
<path id="Vector_35" d="M802.5 539.329C802.5 539.329 811.553 531.754 818.136 539.329C824.72 546.903 835.419 541.854 838.711 537.814C842.002 533.774 856.816 539.329 858.462 543.368C860.108 547.408 866.691 552.458 871.218 548.418C875.744 544.378 884.797 535.289 888.5 540.844" fill="#2196F3"/>
<path id="Vector_36" opacity="0.2" d="M802.5 539.329C802.5 539.329 811.553 531.754 818.136 539.329C824.72 546.903 835.419 541.854 838.711 537.814C842.002 533.774 856.816 539.329 858.462 543.368C860.108 547.408 866.691 552.458 871.218 548.418C875.744 544.378 884.797 535.289 888.5 540.844" fill="black"/>
<path id="Vector_37" d="M947.5 668.329C947.5 668.329 956.553 660.754 963.136 668.329C969.72 675.903 980.419 670.854 983.711 666.814C987.002 662.774 1001.82 668.329 1003.46 672.368C1005.11 676.408 1011.69 681.458 1016.22 677.418C1020.74 673.378 1029.8 664.289 1033.5 669.844" fill="#2196F3"/>
<path id="Vector_38" opacity="0.2" d="M947.5 668.329C947.5 668.329 956.553 660.754 963.136 668.329C969.72 675.903 980.419 670.854 983.711 666.814C987.002 662.774 1001.82 668.329 1003.46 672.368C1005.11 676.408 1011.69 681.458 1016.22 677.418C1020.74 673.378 1029.8 664.289 1033.5 669.844" fill="black"/>
<path id="Vector_39" d="M225.5 675.329C225.5 675.329 256.763 667.754 279.5 675.329C302.237 682.903 339.184 677.854 350.553 673.814C361.921 669.774 413.079 675.329 418.763 679.368C424.447 683.408 447.184 688.458 462.816 684.418C478.447 680.378 509.71 671.289 522.5 676.844" fill="#2196F3"/>
<path id="Vector_40" d="M132.5 748.57C132.5 748.57 163.763 740.452 186.5 748.57C209.237 756.688 246.184 751.276 257.553 746.947C268.921 742.617 320.079 748.57 325.763 752.9C331.447 757.229 354.184 762.641 369.816 758.312C385.447 753.982 416.711 744.241 429.5 750.194" fill="#2196F3"/>
<path id="Vector_41" d="M470.5 762.329C470.5 762.329 483.658 754.754 493.227 762.329C502.797 769.903 518.347 764.854 523.132 760.814C527.916 756.774 549.447 762.329 551.84 766.368C554.232 770.408 563.801 775.458 570.38 771.418C576.959 767.378 590.117 758.289 595.5 763.844" fill="#2196F3"/>
<path id="Vector_42" d="M832.5 727.329C832.5 727.329 845.658 719.754 855.227 727.329C864.797 734.903 880.347 729.854 885.132 725.814C889.916 721.774 911.447 727.329 913.84 731.368C916.232 735.408 925.801 740.458 932.38 736.418C938.959 732.378 952.117 723.289 957.5 728.844" fill="#2196F3"/>
<path id="Vector_43" d="M595.5 668.329C595.5 668.329 608.658 660.754 618.227 668.329C627.797 675.903 643.347 670.854 648.132 666.814C652.916 662.774 674.447 668.329 676.84 672.368C679.232 676.408 688.801 681.458 695.38 677.418C701.959 673.378 715.117 664.289 720.5 669.844" fill="#2196F3"/>
<path id="Vector_44" d="M650.5 774.329C650.5 774.329 663.658 766.754 673.227 774.329C682.797 781.903 698.347 776.854 703.132 772.814C707.916 768.774 729.447 774.329 731.84 778.368C734.232 782.408 743.801 787.458 750.38 783.418C756.959 779.378 770.117 770.289 775.5 775.844" fill="#2196F3"/>
<path id="Vector_45" d="M753.5 620.329C753.5 620.329 770.132 612.754 782.227 620.329C794.323 627.903 813.979 622.854 820.026 618.814C826.074 614.774 853.289 620.329 856.313 624.368C859.337 628.408 871.433 633.458 879.749 629.418C888.065 625.378 904.696 616.289 911.5 621.844" fill="#2196F3"/>
<path id="Vector_46" opacity="0.2" d="M753.5 620.329C753.5 620.329 770.132 612.754 782.227 620.329C794.323 627.903 813.979 622.854 820.026 618.814C826.074 614.774 853.289 620.329 856.313 624.368C859.337 628.408 871.433 633.458 879.749 629.418C888.065 625.378 904.696 616.289 911.5 621.844" fill="black"/>
<path id="Vector_47" d="M718.518 431.473C718.518 430.837 718.003 430.321 717.367 430.321C716.731 430.321 716.215 430.837 716.215 431.473V443.564C716.215 444.2 716.731 444.715 717.367 444.715C718.003 444.715 718.518 444.2 718.518 443.564V431.473Z" fill="#8A5A44"/>
<path id="Vector_48" d="M747.945 431.473C747.945 430.837 747.43 430.321 746.794 430.321C746.158 430.321 745.643 430.837 745.643 431.473V442.988C745.643 443.624 746.158 444.139 746.794 444.139C747.43 444.139 747.945 443.624 747.945 442.988V431.473Z" fill="#8A5A44"/>
<path id="Vector_49" d="M749.621 428.933H714.603C713.397 428.933 712.419 429.911 712.419 431.117C712.419 432.323 713.397 433.301 714.603 433.301H749.621C750.828 433.301 751.806 432.323 751.806 431.117C751.806 429.911 750.828 428.933 749.621 428.933Z" fill="url(#paint1_linear)"/>
<path id="Vector_50" d="M749.67 433.476H714.652C713.446 433.476 712.468 434.454 712.468 435.66C712.468 436.867 713.446 437.845 714.652 437.845H749.67C750.876 437.845 751.854 436.867 751.854 435.66C751.854 434.454 750.876 433.476 749.67 433.476Z" fill="url(#paint2_linear)"/>
<path id="Vector_51" d="M749.718 438.02H714.7C713.494 438.02 712.516 438.997 712.516 440.204C712.516 441.41 713.494 442.388 714.7 442.388H749.718C750.925 442.388 751.903 441.41 751.903 440.204C751.903 438.997 750.925 438.02 749.718 438.02Z" fill="url(#paint3_linear)"/>
<path id="Vector_52" d="M749.673 429.17H714.552C713.598 429.17 712.825 429.943 712.825 430.897V430.897C712.825 431.851 713.598 432.624 714.552 432.624H749.673C750.627 432.624 751.4 431.851 751.4 430.897V430.897C751.4 429.943 750.627 429.17 749.673 429.17Z" fill="#CCCCCC"/>
<path id="Vector_53" d="M749.673 433.776H714.552C713.598 433.776 712.825 434.549 712.825 435.503C712.825 436.457 713.598 437.23 714.552 437.23H749.673C750.627 437.23 751.4 436.457 751.4 435.503C751.4 434.549 750.627 433.776 749.673 433.776Z" fill="#CCCCCC"/>
<path id="Vector_54" d="M749.673 438.382H714.552C713.598 438.382 712.825 439.155 712.825 440.109C712.825 441.063 713.598 441.836 714.552 441.836H749.673C750.627 441.836 751.4 441.063 751.4 440.109C751.4 439.155 750.627 438.382 749.673 438.382Z" fill="#CCCCCC"/>
<path id="Vector_55" d="M749.673 442.412H714.552C713.598 442.412 712.825 443.186 712.825 444.139C712.825 445.093 713.598 445.867 714.552 445.867H749.673C750.627 445.867 751.4 445.093 751.4 444.139C751.4 443.186 750.627 442.412 749.673 442.412Z" fill="#8A5A44"/>
<path id="Vector_56" d="M717.367 431.473C717.685 431.473 717.942 431.215 717.942 430.897C717.942 430.579 717.685 430.321 717.367 430.321C717.049 430.321 716.791 430.579 716.791 430.897C716.791 431.215 717.049 431.473 717.367 431.473Z" fill="#8A5A44"/>
<path id="Vector_57" d="M717.367 436.079C717.685 436.079 717.942 435.821 717.942 435.503C717.942 435.185 717.685 434.927 717.367 434.927C717.049 434.927 716.791 435.185 716.791 435.503C716.791 435.821 717.049 436.079 717.367 436.079Z" fill="#8A5A44"/>
<path id="Vector_58" d="M717.367 440.685C717.685 440.685 717.942 440.427 717.942 440.109C717.942 439.791 717.685 439.533 717.367 439.533C717.049 439.533 716.791 439.791 716.791 440.109C716.791 440.427 717.049 440.685 717.367 440.685Z" fill="#8A5A44"/>
<path id="Vector_59" d="M746.794 440.685C747.112 440.685 747.37 440.427 747.37 440.109C747.37 439.791 747.112 439.533 746.794 439.533C746.476 439.533 746.218 439.791 746.218 440.109C746.218 440.427 746.476 440.685 746.794 440.685Z" fill="#8A5A44"/>
<path id="Vector_60" d="M746.794 436.079C747.112 436.079 747.37 435.821 747.37 435.503C747.37 435.185 747.112 434.927 746.794 434.927C746.476 434.927 746.218 435.185 746.218 435.503C746.218 435.821 746.476 436.079 746.794 436.079Z" fill="#8A5A44"/>
<path id="Vector_61" d="M746.794 431.473C747.112 431.473 747.37 431.215 747.37 430.897C747.37 430.579 747.112 430.321 746.794 430.321C746.476 430.321 746.218 430.579 746.218 430.897C746.218 431.215 746.476 431.473 746.794 431.473Z" fill="#8A5A44"/>
<path id="Vector_62" d="M717.643 446.165C717.643 445.682 717.252 445.291 716.769 445.291C716.287 445.291 715.896 445.682 715.896 446.165V453.629C715.896 454.112 716.287 454.503 716.769 454.503C717.252 454.503 717.643 454.112 717.643 453.629V446.165Z" fill="url(#paint4_linear)"/>
<path id="Vector_63" d="M748.223 446.252C748.223 445.77 747.832 445.378 747.35 445.378C746.867 445.378 746.476 445.77 746.476 446.252V453.717C746.476 454.199 746.867 454.59 747.35 454.59C747.832 454.59 748.223 454.199 748.223 453.717V446.252Z" fill="url(#paint5_linear)"/>
<path id="Vector_64" d="M717.367 445.867C717.367 445.549 717.109 445.291 716.791 445.291C716.473 445.291 716.215 445.549 716.215 445.867V453.927C716.215 454.245 716.473 454.503 716.791 454.503C717.109 454.503 717.367 454.245 717.367 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_65" d="M747.945 445.867C747.945 445.549 747.688 445.291 747.37 445.291C747.052 445.291 746.794 445.549 746.794 445.867V453.927C746.794 454.245 747.052 454.503 747.37 454.503C747.688 454.503 747.945 454.245 747.945 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_66" d="M430.518 431.473C430.518 430.837 430.003 430.321 429.367 430.321C428.731 430.321 428.215 430.837 428.215 431.473V443.564C428.215 444.2 428.731 444.715 429.367 444.715C430.003 444.715 430.518 444.2 430.518 443.564V431.473Z" fill="#8A5A44"/>
<path id="Vector_67" d="M459.945 431.473C459.945 430.837 459.43 430.321 458.794 430.321C458.158 430.321 457.642 430.837 457.642 431.473V442.988C457.642 443.624 458.158 444.139 458.794 444.139C459.43 444.139 459.945 443.624 459.945 442.988V431.473Z" fill="#8A5A44"/>
<path id="Vector_68" d="M461.621 428.933H426.603C425.397 428.933 424.419 429.911 424.419 431.117C424.419 432.323 425.397 433.301 426.603 433.301H461.621C462.828 433.301 463.806 432.323 463.806 431.117C463.806 429.911 462.828 428.933 461.621 428.933Z" fill="url(#paint6_linear)"/>
<path id="Vector_69" d="M461.67 433.476H426.652C425.446 433.476 424.468 434.454 424.468 435.66C424.468 436.867 425.446 437.845 426.652 437.845H461.67C462.876 437.845 463.854 436.867 463.854 435.66C463.854 434.454 462.876 433.476 461.67 433.476Z" fill="url(#paint7_linear)"/>
<path id="Vector_70" d="M461.718 438.02H426.7C425.494 438.02 424.516 438.997 424.516 440.204C424.516 441.41 425.494 442.388 426.7 442.388H461.718C462.925 442.388 463.903 441.41 463.903 440.204C463.903 438.997 462.925 438.02 461.718 438.02Z" fill="url(#paint8_linear)"/>
<path id="Vector_71" d="M461.673 429.17H426.552C425.598 429.17 424.825 429.943 424.825 430.897V430.897C424.825 431.851 425.598 432.624 426.552 432.624H461.673C462.627 432.624 463.4 431.851 463.4 430.897V430.897C463.4 429.943 462.627 429.17 461.673 429.17Z" fill="#CCCCCC"/>
<path id="Vector_72" d="M461.673 433.776H426.552C425.598 433.776 424.825 434.549 424.825 435.503C424.825 436.457 425.598 437.23 426.552 437.23H461.673C462.627 437.23 463.4 436.457 463.4 435.503C463.4 434.549 462.627 433.776 461.673 433.776Z" fill="#CCCCCC"/>
<path id="Vector_73" d="M461.673 438.382H426.552C425.598 438.382 424.825 439.155 424.825 440.109C424.825 441.063 425.598 441.836 426.552 441.836H461.673C462.627 441.836 463.4 441.063 463.4 440.109C463.4 439.155 462.627 438.382 461.673 438.382Z" fill="#CCCCCC"/>
<path id="Vector_74" d="M461.673 442.412H426.552C425.598 442.412 424.825 443.186 424.825 444.139C424.825 445.093 425.598 445.867 426.552 445.867H461.673C462.627 445.867 463.4 445.093 463.4 444.139C463.4 443.186 462.627 442.412 461.673 442.412Z" fill="#8A5A44"/>
<path id="Vector_75" d="M429.367 431.473C429.685 431.473 429.942 431.215 429.942 430.897C429.942 430.579 429.685 430.321 429.367 430.321C429.049 430.321 428.791 430.579 428.791 430.897C428.791 431.215 429.049 431.473 429.367 431.473Z" fill="#8A5A44"/>
<path id="Vector_76" d="M429.367 436.079C429.685 436.079 429.942 435.821 429.942 435.503C429.942 435.185 429.685 434.927 429.367 434.927C429.049 434.927 428.791 435.185 428.791 435.503C428.791 435.821 429.049 436.079 429.367 436.079Z" fill="#8A5A44"/>
<path id="Vector_77" d="M429.367 440.685C429.685 440.685 429.942 440.427 429.942 440.109C429.942 439.791 429.685 439.533 429.367 439.533C429.049 439.533 428.791 439.791 428.791 440.109C428.791 440.427 429.049 440.685 429.367 440.685Z" fill="#8A5A44"/>
<path id="Vector_78" d="M458.794 440.685C459.112 440.685 459.37 440.427 459.37 440.109C459.37 439.791 459.112 439.533 458.794 439.533C458.476 439.533 458.218 439.791 458.218 440.109C458.218 440.427 458.476 440.685 458.794 440.685Z" fill="#8A5A44"/>
<path id="Vector_79" d="M458.794 436.079C459.112 436.079 459.37 435.821 459.37 435.503C459.37 435.185 459.112 434.927 458.794 434.927C458.476 434.927 458.218 435.185 458.218 435.503C458.218 435.821 458.476 436.079 458.794 436.079Z" fill="#8A5A44"/>
<path id="Vector_80" d="M458.794 431.473C459.112 431.473 459.37 431.215 459.37 430.897C459.37 430.579 459.112 430.321 458.794 430.321C458.476 430.321 458.218 430.579 458.218 430.897C458.218 431.215 458.476 431.473 458.794 431.473Z" fill="#8A5A44"/>
<path id="Vector_81" d="M429.643 446.165C429.643 445.682 429.252 445.291 428.769 445.291C428.287 445.291 427.896 445.682 427.896 446.165V453.629C427.896 454.112 428.287 454.503 428.769 454.503C429.252 454.503 429.643 454.112 429.643 453.629V446.165Z" fill="url(#paint9_linear)"/>
<path id="Vector_82" d="M460.223 446.252C460.223 445.77 459.832 445.378 459.35 445.378C458.867 445.378 458.476 445.77 458.476 446.252V453.717C458.476 454.199 458.867 454.59 459.35 454.59C459.832 454.59 460.223 454.199 460.223 453.717V446.252Z" fill="url(#paint10_linear)"/>
<path id="Vector_83" d="M429.367 445.867C429.367 445.549 429.109 445.291 428.791 445.291C428.473 445.291 428.215 445.549 428.215 445.867V453.927C428.215 454.245 428.473 454.503 428.791 454.503C429.109 454.503 429.367 454.245 429.367 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_84" d="M459.945 445.867C459.945 445.549 459.688 445.291 459.37 445.291C459.052 445.291 458.794 445.549 458.794 445.867V453.927C458.794 454.245 459.052 454.503 459.37 454.503C459.688 454.503 459.945 454.245 459.945 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_85" d="M286.518 431.473C286.518 430.837 286.003 430.321 285.367 430.321C284.731 430.321 284.215 430.837 284.215 431.473V443.564C284.215 444.2 284.731 444.715 285.367 444.715C286.003 444.715 286.518 444.2 286.518 443.564V431.473Z" fill="#8A5A44"/>
<path id="Vector_86" d="M315.945 431.473C315.945 430.837 315.43 430.321 314.794 430.321C314.158 430.321 313.642 430.837 313.642 431.473V442.988C313.642 443.624 314.158 444.139 314.794 444.139C315.43 444.139 315.945 443.624 315.945 442.988V431.473Z" fill="#8A5A44"/>
<path id="Vector_87" d="M317.621 428.933H282.603C281.397 428.933 280.419 429.911 280.419 431.117C280.419 432.323 281.397 433.301 282.603 433.301H317.621C318.828 433.301 319.806 432.323 319.806 431.117C319.806 429.911 318.828 428.933 317.621 428.933Z" fill="url(#paint11_linear)"/>
<path id="Vector_88" d="M317.67 433.476H282.652C281.446 433.476 280.468 434.454 280.468 435.66C280.468 436.867 281.446 437.845 282.652 437.845H317.67C318.876 437.845 319.854 436.867 319.854 435.66C319.854 434.454 318.876 433.476 317.67 433.476Z" fill="url(#paint12_linear)"/>
<path id="Vector_89" d="M317.718 438.02H282.7C281.494 438.02 280.516 438.997 280.516 440.204C280.516 441.41 281.494 442.388 282.7 442.388H317.718C318.925 442.388 319.903 441.41 319.903 440.204C319.903 438.997 318.925 438.02 317.718 438.02Z" fill="url(#paint13_linear)"/>
<path id="Vector_90" d="M317.673 429.17H282.552C281.598 429.17 280.825 429.943 280.825 430.897V430.897C280.825 431.851 281.598 432.624 282.552 432.624H317.673C318.627 432.624 319.4 431.851 319.4 430.897V430.897C319.4 429.943 318.627 429.17 317.673 429.17Z" fill="#CCCCCC"/>
<path id="Vector_91" d="M317.673 433.776H282.552C281.598 433.776 280.825 434.549 280.825 435.503C280.825 436.457 281.598 437.23 282.552 437.23H317.673C318.627 437.23 319.4 436.457 319.4 435.503C319.4 434.549 318.627 433.776 317.673 433.776Z" fill="#CCCCCC"/>
<path id="Vector_92" d="M317.673 438.382H282.552C281.598 438.382 280.825 439.155 280.825 440.109C280.825 441.063 281.598 441.836 282.552 441.836H317.673C318.627 441.836 319.4 441.063 319.4 440.109C319.4 439.155 318.627 438.382 317.673 438.382Z" fill="#CCCCCC"/>
<path id="Vector_93" d="M317.673 442.412H282.552C281.598 442.412 280.825 443.186 280.825 444.139C280.825 445.093 281.598 445.867 282.552 445.867H317.673C318.627 445.867 319.4 445.093 319.4 444.139C319.4 443.186 318.627 442.412 317.673 442.412Z" fill="#8A5A44"/>
<path id="Vector_94" d="M285.367 431.473C285.685 431.473 285.942 431.215 285.942 430.897C285.942 430.579 285.685 430.321 285.367 430.321C285.049 430.321 284.791 430.579 284.791 430.897C284.791 431.215 285.049 431.473 285.367 431.473Z" fill="#8A5A44"/>
<path id="Vector_95" d="M285.367 436.079C285.685 436.079 285.942 435.821 285.942 435.503C285.942 435.185 285.685 434.927 285.367 434.927C285.049 434.927 284.791 435.185 284.791 435.503C284.791 435.821 285.049 436.079 285.367 436.079Z" fill="#8A5A44"/>
<path id="Vector_96" d="M285.367 440.685C285.685 440.685 285.942 440.427 285.942 440.109C285.942 439.791 285.685 439.533 285.367 439.533C285.049 439.533 284.791 439.791 284.791 440.109C284.791 440.427 285.049 440.685 285.367 440.685Z" fill="#8A5A44"/>
<path id="Vector_97" d="M314.794 440.685C315.112 440.685 315.37 440.427 315.37 440.109C315.37 439.791 315.112 439.533 314.794 439.533C314.476 439.533 314.218 439.791 314.218 440.109C314.218 440.427 314.476 440.685 314.794 440.685Z" fill="#8A5A44"/>
<path id="Vector_98" d="M314.794 436.079C315.112 436.079 315.37 435.821 315.37 435.503C315.37 435.185 315.112 434.927 314.794 434.927C314.476 434.927 314.218 435.185 314.218 435.503C314.218 435.821 314.476 436.079 314.794 436.079Z" fill="#8A5A44"/>
<path id="Vector_99" d="M314.794 431.473C315.112 431.473 315.37 431.215 315.37 430.897C315.37 430.579 315.112 430.321 314.794 430.321C314.476 430.321 314.218 430.579 314.218 430.897C314.218 431.215 314.476 431.473 314.794 431.473Z" fill="#8A5A44"/>
<path id="Vector_100" d="M285.643 446.165C285.643 445.682 285.252 445.291 284.769 445.291C284.287 445.291 283.896 445.682 283.896 446.165V453.629C283.896 454.112 284.287 454.503 284.769 454.503C285.252 454.503 285.643 454.112 285.643 453.629V446.165Z" fill="url(#paint14_linear)"/>
<path id="Vector_101" d="M316.223 446.252C316.223 445.77 315.832 445.378 315.35 445.378C314.867 445.378 314.476 445.77 314.476 446.252V453.717C314.476 454.199 314.867 454.59 315.35 454.59C315.832 454.59 316.223 454.199 316.223 453.717V446.252Z" fill="url(#paint15_linear)"/>
<path id="Vector_102" d="M285.367 445.867C285.367 445.549 285.109 445.291 284.791 445.291C284.473 445.291 284.215 445.549 284.215 445.867V453.927C284.215 454.245 284.473 454.503 284.791 454.503C285.109 454.503 285.367 454.245 285.367 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_103" d="M315.945 445.867C315.945 445.549 315.688 445.291 315.37 445.291C315.052 445.291 314.794 445.549 314.794 445.867V453.927C314.794 454.245 315.052 454.503 315.37 454.503C315.688 454.503 315.945 454.245 315.945 453.927V445.867Z" fill="#8A5A44"/>
<path id="Vector_104" opacity="0.1" d="M560.5 185.933H556.949C557.024 185.57 557.016 185.194 556.928 184.834C556.839 184.474 556.671 184.139 556.437 183.851C556.202 183.564 555.907 183.333 555.572 183.174C555.237 183.015 554.871 182.933 554.5 182.933H476.5C475.837 182.933 475.201 183.196 474.732 183.665C474.263 184.134 474 184.77 474 185.433C474 186.096 474.263 186.732 474.732 187.201C475.201 187.669 475.837 187.933 476.5 187.933H480.051C479.976 188.296 479.984 188.671 480.072 189.031C480.161 189.391 480.329 189.727 480.563 190.014C480.798 190.302 481.093 190.533 481.428 190.692C481.763 190.851 482.129 190.933 482.5 190.933H469.5C468.837 190.933 468.201 191.196 467.732 191.665C467.263 192.134 467 192.77 467 193.433C467 194.096 467.263 194.732 467.732 195.201C468.201 195.669 468.837 195.933 469.5 195.933H547.5C548.163 195.933 548.799 195.669 549.268 195.201C549.737 194.732 550 194.096 550 193.433C550 192.77 549.737 192.134 549.268 191.665C548.799 191.196 548.163 190.933 547.5 190.933H560.5C561.163 190.933 561.799 190.669 562.268 190.201C562.737 189.732 563 189.096 563 188.433C563 187.77 562.737 187.134 562.268 186.665C561.799 186.196 561.163 185.933 560.5 185.933H560.5Z" fill="#2196F3"/>
<path id="Vector_105" opacity="0.1" d="M957.5 145.933H953.949C954.024 145.57 954.016 145.194 953.928 144.834C953.839 144.474 953.671 144.139 953.437 143.851C953.202 143.564 952.907 143.333 952.572 143.174C952.237 143.015 951.871 142.933 951.5 142.933H873.5C872.837 142.933 872.201 143.196 871.732 143.665C871.263 144.134 871 144.77 871 145.433C871 146.096 871.263 146.732 871.732 147.201C872.201 147.669 872.837 147.933 873.5 147.933H877.051C876.976 148.296 876.984 148.671 877.072 149.031C877.161 149.391 877.329 149.727 877.563 150.014C877.798 150.301 878.093 150.533 878.428 150.692C878.763 150.851 879.129 150.933 879.5 150.933H866.5C865.837 150.933 865.201 151.196 864.732 151.665C864.263 152.134 864 152.77 864 153.433C864 154.096 864.263 154.732 864.732 155.201C865.201 155.669 865.837 155.933 866.5 155.933H944.5C945.163 155.933 945.799 155.669 946.268 155.201C946.737 154.732 947 154.096 947 153.433C947 152.77 946.737 152.134 946.268 151.665C945.799 151.196 945.163 150.933 944.5 150.933H957.5C958.163 150.933 958.799 150.669 959.268 150.201C959.737 149.732 960 149.096 960 148.433C960 147.77 959.737 147.134 959.268 146.665C958.799 146.196 958.163 145.933 957.5 145.933H957.5Z" fill="#2196F3"/>
<path id="Vector_106" opacity="0.1" d="M777.5 266.933H773.949C774.024 266.57 774.016 266.194 773.928 265.834C773.839 265.474 773.671 265.139 773.437 264.851C773.202 264.564 772.907 264.333 772.572 264.174C772.237 264.015 771.871 263.933 771.5 263.933H693.5C692.837 263.933 692.201 264.196 691.732 264.665C691.263 265.134 691 265.77 691 266.433C691 267.096 691.263 267.732 691.732 268.201C692.201 268.669 692.837 268.933 693.5 268.933H697.051C696.976 269.296 696.984 269.671 697.072 270.031C697.161 270.391 697.329 270.727 697.563 271.014C697.798 271.301 698.093 271.533 698.428 271.692C698.763 271.851 699.129 271.933 699.5 271.933H686.5C685.837 271.933 685.201 272.196 684.732 272.665C684.263 273.134 684 273.77 684 274.433C684 275.096 684.263 275.732 684.732 276.201C685.201 276.669 685.837 276.933 686.5 276.933H764.5C765.163 276.933 765.799 276.669 766.268 276.201C766.737 275.732 767 275.096 767 274.433C767 273.77 766.737 273.134 766.268 272.665C765.799 272.196 765.163 271.933 764.5 271.933H777.5C778.163 271.933 778.799 271.669 779.268 271.201C779.737 270.732 780 270.096 780 269.433C780 268.77 779.737 268.134 779.268 267.665C778.799 267.196 778.163 266.933 777.5 266.933H777.5Z" fill="#2196F3"/>
<g id="bubbles 1">
<path id="bubble 8" class="bubble" d="M875 593C881.075 593 886 588.299 886 582.5C886 576.701 881.075 572 875 572C868.925 572 864 576.701 864 582.5C864 588.299 868.925 593 875 593Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 7" class="bubble" d="M461.911 660.529C469.594 660.529 475.822 655.933 475.822 650.265C475.822 644.596 469.594 640 461.911 640C454.228 640 448 644.596 448 650.265C448 655.933 454.228 660.529 461.911 660.529Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 6"  class="bubble"d="M899 723C906.179 723 912 718.747 912 713.5C912 708.253 906.179 704 899 704C891.821 704 886 708.253 886 713.5C886 718.747 891.821 723 899 723Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 5" class="bubble" d="M918 611C921.314 611 924 608.761 924 606C924 603.239 921.314 601 918 601C914.686 601 912 603.239 912 606C912 608.761 914.686 611 918 611Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 4" class="bubble"  d="M562.5 556C566.642 556 570 553.538 570 550.5C570 547.462 566.642 545 562.5 545C558.358 545 555 547.462 555 550.5C555 553.538 558.358 556 562.5 556Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 3" class="bubble" d="M589.911 544.529C597.594 544.529 603.823 539.933 603.823 534.264C603.823 528.595 597.594 524 589.911 524C582.229 524 576 528.595 576 534.264C576 539.933 582.229 544.529 589.911 544.529Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 2" class="bubble"  d="M502.5 667C507.195 667 511 663.195 511 658.5C511 653.805 507.195 650 502.5 650C497.805 650 494 653.805 494 658.5C494 663.195 497.805 667 502.5 667Z" fill="#83C3FF" fill-opacity="0.85"/>
<path id="bubble 1" class="bubble" d="M857 699C860.866 699 864 696.09 864 692.5C864 688.91 860.866 686 857 686C853.134 686 850 688.91 850 692.5C850 696.09 853.134 699 857 699Z" fill="#83C3FF" fill-opacity="0.85"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="331.454" y1="247.789" x2="331.454" y2="152.962" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="29547.7" y1="2321.86" x2="29547.7" y2="2302.78" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="29549.7" y1="2346.25" x2="29549.7" y2="2327.17" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="29551.7" y1="2370.65" x2="29551.7" y2="2351.56" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="1968.4" y1="4632.18" x2="1968.4" y2="4547.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="2052.42" y1="4633.08" x2="2052.42" y2="4548.22" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="17916.5" y1="2321.86" x2="17916.5" y2="2302.78" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="17918.4" y1="2346.25" x2="17918.4" y2="2327.17" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="17920.4" y1="2370.65" x2="17920.4" y2="2351.56" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="1177.14" y1="4632.18" x2="1177.14" y2="4547.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="1261.16" y1="4633.08" x2="1261.16" y2="4548.22" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint11_linear" x1="12100.8" y1="2321.86" x2="12100.8" y2="2302.78" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint12_linear" x1="12102.7" y1="2346.25" x2="12102.7" y2="2327.17" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint13_linear" x1="12104.7" y1="2370.65" x2="12104.7" y2="2351.56" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint14_linear" x1="781.512" y1="4632.18" x2="781.512" y2="4547.31" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint15_linear" x1="865.529" y1="4633.08" x2="865.529" y2="4548.22" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.53514" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<clipPath id="clip0">
<rect width="1156" height="853.866" fill="white"/>
</clipPath>
</defs>
</svg>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  background-color: #fffcf2;
  color: white;
  margin: 0;
}

.bubble {
  position: absolute;
  width: 40vw;
  height: 40vw;
  max-width: 250px;
  max-height: 250px;
}

.bubble:nth-child(1) {
  top: 60%;
  left: 50%;
}
.bubble:nth-child(2) {
  top: 20%;
  left: 20%;
}
.bubble:nth-child(3) {
  top: 30%;
  left: 70%;
}
.bubble:nth-child(4) {
 
}
.bubble:nth-child(5) {

}
.bubble:nth-child(6) {

}
.bubble:nth-child(7) {

}
.bubble:nth-child(8) {

}

/* Hide flash at start */
body > * {
  opacity: 0;
}

              
            
!

JS

              
                // gsap.to()... infinity and beyond!
// For more check out greensock.com

// Preparation
gsap.set("body > *", {autoAlpha: 1});
gsap.set(".bubble", {transformOrigin: "center", xPercent: -50, yPercent: -50});
gsap.set(".bubble:nth-child(2)", {scale: 0.5});
gsap.set(".bubble:nth-child(3)", {scale: 0.7});

// The intro animation
gsap.from(".bubble", {scale: 0.8, autoAlpha: 0, stagger: 0.4, ease: "back"});

// The bubble movement - circular using SVG path
const r1 = 15;
gsap.to('.bubble:nth-child(1)', {
  motionPath: {
    path: `M ${-r1}, 0
           a ${r1},${r1} 0 1,0 ${r1 * 2},0
           a ${r1},${r1} 0 1,0 -${r1 * 2},0z`
  },
  duration: 10,
  repeat: -1,
  ease: "none"
});
const r2 = -10;
gsap.to('.bubble:nth-child(2)', {
  motionPath: {
    path: `M ${-r2}, 0
           a ${r2},${r2} 0 1,0 ${r2 * 2},0
           a ${r2},${r2} 0 1,0 -${r2 * 2},0z`
  },
  duration: 30,
  repeat: -1,
  ease: "none"
});
const r3 = 30;
gsap.to('.bubble:nth-child(3)', {
  motionPath: {
    path: `M ${-r3}, 0
           a ${r3},${r3} 0 1,0 ${r3 * 2},0
           a ${r3},${r3} 0 1,0 -${r3 * 2},0z`
  },
  duration: 25,
  repeat: -1,
  ease: "none"
});

const r4 = 15;
gsap.to('.bubble:nth-child(4)', {
  motionPath: {
    path: `M ${-r4}, 0
           a ${r4},${r4} 0 1,0 ${r4 * 2},0
           a ${r4},${r4} 0 1,0 -${r4 * 2},0z`
  },
  duration: 10,
  repeat: -1,
  ease: "none"
});
const r5 = -10;
gsap.to('.bubble:nth-child(5)', {
  motionPath: {
    path: `M ${-r5}, 0
           a ${r5},${r5} 0 1,0 ${r5 * 2},0
           a ${r5},${r5} 0 1,0 -${r5 * 2},0z`
  },
  duration: 30,
  repeat: -1,
  ease: "none"
});
const r6 = 30;
gsap.to('.bubble:nth-child(6)', {
  motionPath: {
    path: `M ${-r6}, 0
           a ${r6},${r6} 0 1,0 ${r6 * 2},0
           a ${r6},${r6} 0 1,0 -${r6 * 2},0z`
  },
  duration: 25,
  repeat: -1,
  ease: "none"
});
const r7 = 15;
gsap.to('.bubble:nth-child(7)', {
  motionPath: {
    path: `M ${-r7}, 0
           a ${r7},${r7} 0 1,0 ${r7 * 2},0
           a ${r7},${r7} 0 1,0 -${r7 * 2},0z`
  },
  duration: 10,
  repeat: -1,
  ease: "none"
});
const r8 = -10;
gsap.to('.bubble:nth-child(8)', {
  motionPath: {
    path: `M ${-r8}, 0
           a ${r8},${r8} 0 1,0 ${r8 * 2},0
           a ${r8},${r8} 0 1,0 -${r8 * 2},0z`
  },
  duration: 30,
  repeat: -1,
  ease: "none"
});


              
            
!
999px

Console