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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class="container">
  <div class='container__inner'>
    <svg xmlns="http://www.w3.org/2000/svg" width="1515.29" height="779" viewbox="0 0 1515.29 779">
      <filter id="filter">
        <feDropShadow stdDeviation="10 10" in="SourceGraphic" dx="0" dy="0" flood-color="#80d4b2" flood-opacity="0.7" x="0%" y="0%" width="100%" height="100%" result="dropShadow" />
      </filter>

      <g filter="url(#filter)">
        <g id="outline" fill="none" stroke="currentColor" stroke-miterlimit="10">
          <ellipse cx="757.64" cy="389.5" rx="716.23" ry="362.15" stroke-width="19" />
          <path stroke-width="20" d="M181.96 605h1151.37M1473.87 389.5h-153.23M41.41 389.5h153.23M181.96 174h1151.37" />
        </g>

        <g id="moving_lines" mask="url(#moving_lines_mask)">
          <path d="M757.64 27.35c-395.56 0-716.23 162.14-716.23 362.15s320.67 362.15 716.23 362.15" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_1" />
          <path d="M757.64 751.65c395.57 0 716.23-162.14 716.23-362.15S1153.21 27.35 757.64 27.35" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_6" />
          <path d="M757.64 751.65c251.66 0 455.68-162.14 455.68-362.15S1009.3 27.35 757.64 27.35" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_5" />
          <path d="M757.64 751.65c88.74 0 160.68-162.14 160.68-362.15S846.38 27.35 757.64 27.35" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_4" />
          <path d="M757.64 27.35C668.91 27.35 597 189.49 597 389.5s71.94 362.15 160.67 362.15" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_3" />
          <path d="M757.64 27.35C506 27.35 302 189.49 302 389.5s204 362.15 455.64 362.15" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="19" id="line_2" />
        </g>

        <g id="text">
          <path fill="currentColor" d="M 286.98 370 C 286.98 370 280.06 415 280.06 415 C 280.06 415 278.7 428 278.7 428 C 278.7 428 276.14 445 276.14 445 C 275.62 449.87 275.46 456.96 272.47 460.96 C 271.07 462.84 269.18 464.42 266.98 465.38 C 264.21 466.33 247.9 466.37 244.98 465.38 C 242.9 464.86 240.87 463.58 239.58 461.81 C 237.28 458.68 237.94 450.94 237.98 447 C 238.08 439.18 240.28 433.5 241.55 426 C 241.55 426 250.56 377 250.56 377 C 250.56 377 255.98 349 255.98 349 C 256.77 345.07 257.11 339.41 258.75 336 C 262.42 328.35 271.18 326.1 278.98 326 C 286.18 325.92 293.71 325.64 299.98 329.85 C 306.09 333.96 309.64 343.4 313.08 350 C 313.08 350 335.02 393 335.02 393 C 338.73 400.32 342.42 410.03 348.98 415 C 348.98 415 369.73 373 369.73 373 C 369.73 373 387.48 338 387.48 338 C 394.24 326.71 403.13 325.94 414.98 326 C 422.26 326.04 430.66 327.46 434.99 334.04 C 437.6 338.01 440.59 357.02 441.78 363 C 441.78 363 448.59 400 448.59 400 C 448.59 400 454.03 431 454.03 431 C 455.13 440.63 463.31 460.41 450.96 465.26 C 448.75 466.13 445.38 466 442.98 466 C 442.98 466 433.98 466 433.98 466 C 422.5 465.8 421.46 459.51 419.9 450 C 419.9 450 415.4 415 415.4 415 C 415.4 415 408.98 370 408.98 370 C 402.09 373.45 399.14 383.37 395.72 390 C 395.72 390 377.29 425 377.29 425 C 369.84 438.85 367.59 449.92 348.98 450 C 346.1 450.01 342.77 450.11 339.98 449.47 C 326.94 446.48 323.55 435.65 318.23 425 C 318.23 425 300.23 391 300.23 391 C 296.54 383.67 293.58 375.2 286.98 370 Z M 521.98 326.14 C 521.98 326.14 565.98 326.14 565.98 326.14 C 565.98 326.14 643.98 326.14 643.98 326.14 C 669.83 326.31 683.67 340.15 683.98 366 C 683.98 366 683.98 389 683.98 389 C 683.98 389 683.98 415 683.98 415 C 683.98 430.24 684.84 444.42 672.96 455.96 C 669.16 459.65 665.05 462.2 659.98 463.78 C 655.11 465.3 647.13 465.99 641.98 466 C 641.98 466 528.98 466 528.98 466 C 524.63 465.98 517.13 465.2 512.98 464.07 C 507.58 462.6 503 459.85 499 455.96 C 487.07 444.37 487.98 429.34 487.98 414 C 487.98 414 487.98 388 487.98 388 C 487.98 374.53 486.37 354.74 493.33 343 C 500.33 331.2 509.44 328.32 521.98 326.14 Z M 905.98 326.53 C 913.69 325.27 927.48 324.94 931.67 333.04 C 933.16 335.93 932.98 339.81 932.98 343 C 932.98 343 932.98 437 932.98 437 C 932.98 445.61 935.55 461.15 925.96 465.15 C 923.57 466.14 920.55 466 917.98 466 C 917.98 466 907.98 466 907.98 466 C 898.01 465.83 896.03 461.08 895.98 452 C 895.98 452 895.98 358 895.98 358 C 895.98 352.4 894.84 335.15 897.72 331.21 C 899.73 328.46 902.88 327.45 905.98 326.53 Z M 825.98 405 C 845.44 416.72 849.45 427.52 861.12 446 C 867.56 456.21 865.58 465.81 851.98 466 C 851.98 466 842.98 466 842.98 466 C 832.72 465.98 831.92 463.54 826.78 455 C 820.03 443.79 809.28 422.75 797.98 416.82 C 787.67 411.42 777.15 411.94 765.98 412 C 762.36 412.02 759.11 411.85 756.21 414.43 C 752.63 417.6 752.99 421.67 752.98 426 C 752.98 426 752.98 447 752.98 447 C 752.98 449.96 753.24 455.39 752.24 458 C 751.17 460.8 748.64 463.47 745.98 464.83 C 742.63 466.52 734 466.05 729.98 466 C 719.48 465.85 717 461.81 716.98 452 C 716.98 452 716.98 349 716.98 349 C 716.99 345.7 716.8 342.03 718.29 339 C 722.78 329.91 736.81 327.01 745.98 327 C 745.98 327 766.98 327 766.98 327 C 790.27 327 812.35 324.86 833.98 335.52 C 847.96 342.41 856.96 350.75 856.98 367 C 856.98 367 856.98 371 856.98 371 C 856.76 388.98 840.9 399.03 825.98 405 Z M 967.98 327.53 C 967.98 327.53 1012.98 327 1012.98 327 C 1012.98 327 1094.98 327 1094.98 327 C 1102.6 327.1 1113.21 330.24 1111.74 340 C 1110.31 349.45 1098.63 350.99 1090.98 351 C 1090.98 351 1064.98 351 1064.98 351 C 1061.84 351.05 1058.8 351.04 1056.41 353.43 C 1053.62 356.22 1053.99 360.38 1053.98 364 C 1053.98 364 1053.98 452 1053.98 452 C 1053.84 462.23 1050.07 465.95 1039.98 466 C 1039.98 466 1028.98 466 1028.98 466 C 1018.44 465.85 1017 461.44 1016.98 452 C 1016.98 452 1016.98 366 1016.98 366 C 1016.96 354.27 1015.16 351.02 1002.98 351 C 1002.98 351 977.98 351 977.98 351 C 972.46 350.99 965.51 350.55 961.21 346.58 C 955.48 341.32 956.58 330.95 967.98 327.53 Z M 1219.98 351 C 1219.98 351 1178.98 351 1178.98 351 C 1178.98 351 1141.98 351 1141.98 351 C 1137.17 350.94 1130.89 349.97 1127.21 346.58 C 1122.53 342.28 1123.1 333.89 1128.19 330.14 C 1132.37 327.06 1138.03 327.01 1142.98 327 C 1142.98 327 1245.98 327 1245.98 327 C 1256.2 327.12 1269.96 331.31 1268.87 344 C 1268.19 352.04 1259.64 357.79 1253.98 362.84 C 1253.98 362.84 1209.98 400.72 1209.98 400.72 C 1209.98 400.72 1183.98 423.16 1183.98 423.16 C 1179.23 427.41 1172.5 434.39 1166.98 437 C 1166.98 437 1166.98 440 1166.98 440 C 1176.79 441.76 1191.58 441 1201.98 441 C 1201.98 441 1260.98 441 1260.98 441 C 1265.37 441.01 1272.24 440.96 1275.38 444.57 C 1277.01 446.43 1276.94 448.68 1276.98 451 C 1277.16 462.49 1272.47 463.98 1261.98 464 C 1261.98 464 1140.98 464 1140.98 464 C 1137.81 464 1135.07 464.1 1131.98 463.21 C 1123.92 460.9 1115.1 453.26 1118.83 444 C 1120.87 438.94 1127.9 433.72 1131.98 430 C 1131.98 430 1153.98 410.83 1153.98 410.83 C 1153.98 410.83 1193.98 375.28 1193.98 375.28 C 1193.98 375.28 1209.98 361.28 1209.98 361.28 C 1214.01 357.81 1217.69 355.94 1219.98 351 Z M 584.16 347.62 C 579.43 350.6 576.36 358.11 573.56 363 C 566.6 375.16 550.95 398.43 552.15 412 C 554.29 436.18 579.08 451.14 600.98 440.19 C 604.73 438.32 607.95 436.06 610.8 432.96 C 616.32 426.95 619.21 419.07 619.8 411 C 620.68 398.86 609.39 382.44 603.4 372 C 603.4 372 593.26 354 593.26 354 C 590.74 349.64 589.69 346.79 584.16 347.62 Z M 758 351.21 C 756.15 352.22 755.17 352.32 754 354.23 C 752.87 356.08 752.99 358.89 752.98 361 C 752.98 361 752.98 380 752.98 380 C 753.03 382.72 752.95 385.29 755.29 387.15 C 757.93 389.24 762.76 388.99 765.98 389 C 765.98 389 784.98 389 784.98 389 C 794.86 388.98 806.83 387.04 814.91 380.95 C 822.85 374.93 822.71 363.7 814.91 357.55 C 804.54 349.34 790.34 351 777.98 351.21 C 777.98 351.21 758 351.21 758 351.21 Z" />
        </g>
      </g>

      <mask id="moving_lines_mask">
        <rect fill="#fff" width="1515.29" height="779" />
        <path fill="#000" d="M0 266.14h1515.29v246.71H0z" />
      </mask>
    </svg>
  </div>
</div>
              
            
!

CSS

              
                // ---------------------------------------------------------------
// Base
// ---------------------------------------------------------------

body,
html {
  min-height: 100vh;
  background-color: #0f0f1a;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// ---------------------------------------------------------------
// Container
// ---------------------------------------------------------------

.container {
  width: 80%;
}

.container__inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51.419142%;
  color: #80d4b2;

  > svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

              
            
!

JS

              
                gsap.registerPlugin(MorphSVGPlugin);

[2, 3, 4, 5, 6].forEach((idx) => {
  const sourceEl = document.querySelector(`#line_${idx}`);
  const targetEl = document.querySelector(`#line_${idx - 1}`);

  gsap.to(sourceEl, {
    duration: 3,
    ease: "none",
    repeat: -1,
    morphSVG: targetEl
  });
});

              
            
!
999px

Console