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

              
                <div class="container">

<svg width="1961px" height="927px" viewBox="-797 -97 1961 927" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-797.000000, -97.000000)">
        <polygon id="star21" fill="#F8BF1C" points="15.5 254 6.38932859 258.944272 8.129312 248.472136 0.758623997 241.055728 10.9446643 239.527864 15.5 230 20.0553357 239.527864 30.241376 241.055728 22.870688 248.472136 24.6106714 258.944272"></polygon>
        <polygon id="star16" fill="#F8BF1C" points="1177.5 405 1168.38933 409.944272 1170.12931 399.472136 1162.75862 392.055728 1172.94466 390.527864 1177.5 381 1182.05534 390.527864 1192.24138 392.055728 1184.87069 399.472136 1186.61067 409.944272"></polygon>
        <polygon id="star14" fill="#F8BF1C" points="1306 87.483871 1300.12215 90.6737238 1301.24472 83.9175071 1296.48943 79.1327278 1303.06107 78.1470091 1306 72 1308.93893 78.1470091 1315.51057 79.1327278 1310.75528 83.9175071 1311.87785 90.6737238"></polygon>
        <polygon id="star9" fill="#F8BF1C" points="599 544.483871 593.122147 547.673724 594.244717 540.917507 589.489435 536.132728 596.061074 535.147009 599 529 601.938926 535.147009 608.510565 536.132728 603.755283 540.917507 604.877853 547.673724"></polygon>
        <g id="stargroup3" transform="translate(228.000000, 449.000000)">
            <polygon id="star11" fill-opacity="0.623811141" fill="#F8BF1C" points="244.5 24 235.389329 28.9442719 237.129312 18.472136 229.758624 11.0557281 239.944664 9.52786405 244.5 0 249.055336 9.52786405 259.241376 11.0557281 251.870688 18.472136 253.610671 28.9442719"></polygon>
            <polygon id="star7" fill-opacity="0.623811141" fill="#F8BF1C" points="15.5 355 6.38932859 359.944272 8.129312 349.472136 0.758623997 342.055728 10.9446643 340.527864 15.5 331 20.0553357 340.527864 30.241376 342.055728 22.870688 349.472136 24.6106714 359.944272"></polygon>
            <polygon id="star6" fill-opacity="0.623811141" fill="#F8BF1C" points="142.5 229 133.389329 233.944272 135.129312 223.472136 127.758624 216.055728 137.944664 214.527864 142.5 205 147.055336 214.527864 157.241376 216.055728 149.870688 223.472136 151.610671 233.944272"></polygon>
            <polyline id="Path-2" stroke="#FAD771" points="20.3603131 346.251302 143.666204 224.362721 248.084281 12.7690798"></polyline>
        </g>
        <polygon id="star5" fill="#F8BF1C" points="408.5 238 399.389329 242.944272 401.129312 232.472136 393.758624 225.055728 403.944664 223.527864 408.5 214 413.055336 223.527864 423.241376 225.055728 415.870688 232.472136 417.610671 242.944272"></polygon>
        <polygon id="star4" fill="#F8BF1C" points="228.5 631 219.389329 635.944272 221.129312 625.472136 213.758624 618.055728 223.944664 616.527864 228.5 607 233.055336 616.527864 243.241376 618.055728 235.870688 625.472136 237.610671 635.944272"></polygon>
        <polygon id="star25" fill="#F8BF1C" points="618.5 728 609.389329 732.944272 611.129312 722.472136 603.758624 715.055728 613.944664 713.527864 618.5 704 623.055336 713.527864 633.241376 715.055728 625.870688 722.472136 627.610671 732.944272"></polygon>
        <polygon id="star24" fill="#F8BF1C" points="534.5 919 525.389329 923.944272 527.129312 913.472136 519.758624 906.055728 529.944664 904.527864 534.5 895 539.055336 904.527864 549.241376 906.055728 541.870688 913.472136 543.610671 923.944272"></polygon>
        <polygon id="star23" fill="#F8BF1C" points="1488.5 903 1479.38933 907.944272 1481.12931 897.472136 1473.75862 890.055728 1483.94466 888.527864 1488.5 879 1493.05534 888.527864 1503.24138 890.055728 1495.87069 897.472136 1497.61067 907.944272"></polygon>
        <polygon id="star22" fill="#F8BF1C" points="156 380.483871 150.122147 383.673724 151.244717 376.917507 146.489435 372.132728 153.061074 371.147009 156 365 158.938926 371.147009 165.510565 372.132728 160.755283 376.917507 161.877853 383.673724"></polygon>
        <g id="stargroup1" transform="translate(700.000000, 72.000000)">
            <polygon id="star13" fill-opacity="0.623811141" fill="#F8BF1C" points="61.5 231 52.3893286 235.944272 54.129312 225.472136 46.758624 218.055728 56.9446643 216.527864 61.5 207 66.0553357 216.527864 76.241376 218.055728 68.870688 225.472136 70.6106714 235.944272"></polygon>
            <polygon id="star12" fill-opacity="0.623811141" fill="#F8BF1C" points="211.5 102 202.389329 106.944272 204.129312 96.472136 196.758624 89.0557281 206.944664 87.527864 211.5 78 216.055336 87.527864 226.241376 89.0557281 218.870688 96.472136 220.610671 106.944272"></polygon>
            <polygon id="star10" fill-opacity="0.623811141" fill="#F8BF1C" points="227.5 263 218.389329 267.944272 220.129312 257.472136 212.758624 250.055728 222.944664 248.527864 227.5 239 232.055336 248.527864 242.241376 250.055728 234.870688 257.472136 236.610671 267.944272"></polygon>
            <polygon id="star8" fill-opacity="0.623811141" fill="#F8BF1C" points="15.5 24 6.38932859 28.9442719 8.129312 18.472136 0.758623997 11.0557281 10.9446643 9.52786405 15.5 0 20.0553357 9.52786405 30.241376 11.0557281 22.870688 18.472136 24.6106714 28.9442719"></polygon>
            <polygon id="star2" fill-opacity="0.623811141" fill="#F8BF1C" points="210.5 449 201.389329 453.944272 203.129312 443.472136 195.758624 436.055728 205.944664 434.527864 210.5 425 215.055336 434.527864 225.241376 436.055728 217.870688 443.472136 219.610671 453.944272"></polygon>
            <polyline id="Path-3" stroke="#FAD771" points="69.2446344 221.794057 213.945143 444.687604 227.90612 260.369932 213.414857 91.0834491 22.1166968 18.048644"></polyline>
        </g>
        <polygon id="star1" fill="#F8BF1C" points="890.5 744 881.389329 748.944272 883.129312 738.472136 875.758624 731.055728 885.944664 729.527864 890.5 720 895.055336 729.527864 905.241376 731.055728 897.870688 738.472136 899.610671 748.944272"></polygon>
        <polygon id="star17" fill="#F8BF1C" points="1777.5 405 1768.38933 409.944272 1770.12931 399.472136 1762.75862 392.055728 1772.94466 390.527864 1777.5 381 1782.05534 390.527864 1792.24138 392.055728 1784.87069 399.472136 1786.61067 409.944272"></polygon>
        <polygon id="star18" fill="#F8BF1C" points="1808.5 24 1799.38933 28.9442719 1801.12931 18.472136 1793.75862 11.0557281 1803.94466 9.52786405 1808.5 0 1813.05534 9.52786405 1823.24138 11.0557281 1815.87069 18.472136 1817.61067 28.9442719"></polygon>
        <g id="stargroup2" transform="translate(1280.000000, 198.000000)">
            <polygon id="star20" fill="#F8BF1C" points="264.5 323 255.389329 327.944272 257.129312 317.472136 249.758624 310.055728 259.944664 308.527864 264.5 299 269.055336 308.527864 279.241376 310.055728 271.870688 317.472136 273.610671 327.944272"></polygon>
            <polygon id="star19" fill="#F8BF1C" points="360.5 24 351.389329 28.9442719 353.129312 18.472136 345.758624 11.0557281 355.944664 9.52786405 360.5 0 365.055336 9.52786405 375.241376 11.0557281 367.870688 18.472136 369.610671 28.9442719"></polygon>
            <polygon id="star18" fill="#F8BF1C" points="133.5 111 124.389329 115.944272 126.129312 105.472136 118.758624 98.0557281 128.944664 96.527864 133.5 87 138.055336 96.527864 148.241376 98.0557281 140.870688 105.472136 142.610671 115.944272"></polygon>
            <polygon id="star15" fill="#F8BF1C" points="15.5 441 6.38932859 445.944272 8.129312 435.472136 0.758623997 428.055728 10.9446643 426.527864 15.5 417 20.0553357 426.527864 30.241376 428.055728 22.870688 435.472136 24.6106714 445.944272"></polygon>
            <polyline id="Path-4" stroke="#F8BE1C" points="131.360103 106.177807 362.410409 17.7839998 267.248227 312.420384 22.6708146 433.47015"></polyline>
        </g>
        <polygon id="star3" fill="#F8BF1C" points="1082.5 919 1073.38933 923.944272 1075.12931 913.472136 1067.75862 906.055728 1077.94466 904.527864 1082.5 895 1087.05534 904.527864 1097.24138 906.055728 1089.87069 913.472136 1091.61067 923.944272"></polygon>
        <polygon id="star27" fill="#F8BF1C" points="1951 795.483871 1945.12215 798.673724 1946.24472 791.917507 1941.48943 787.132728 1948.06107 786.147009 1951 780 1953.93893 786.147009 1960.51057 787.132728 1955.75528 791.917507 1956.87785 798.673724"></polygon>
        <polygon id="star26" fill="#F8BF1C" points="1808.5 671 1799.38933 675.944272 1801.12931 665.472136 1793.75862 658.055728 1803.94466 656.527864 1808.5 647 1813.05534 656.527864 1823.24138 658.055728 1815.87069 665.472136 1817.61067 675.944272"></polygon>
    </g>
</svg>
</div>
              
            
!

CSS

              
                $blue: #0E3E4E;
$dark: #222226;
body {
  background: $dark;
}

.container {
  position: relative;
  top: -120px;
  margin-top: -10%;
  margin-left: 5%;
}

svg {
  width: 1200px;
}

#Path-4, #Path-2, #Path-3 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gleam {
  100% {
    fill: #D69E00;
    opacity: 0.8;
  }
}
              
            
!

JS

              
                for(var i = 1; i <= 27; i++) {
  var duration = 1 + Math.random() * 3;
  $("#star" + i).css({
    "animation" : duration + "s gleam infinite ease"
  })
}
              
            
!
999px

Console