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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <svg width="938" height="737" viewBox="0 0 938 737" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_xmas_snowman_k7yf 1">
<g id="ornament">
<path id="Vector" d="M543 707.279C710.895 707.279 847 571.174 847 403.279C847 235.385 710.895 99.2792 543 99.2792C375.106 99.2792 239 235.385 239 403.279C239 571.174 375.106 707.279 543 707.279Z" fill="#3F3D56"/>
<path id="Vector_2" opacity="0.2" d="M782 403.279C782 434.665 775.818 465.744 763.807 494.741C751.796 523.737 734.192 550.085 711.999 572.278C689.805 594.471 663.458 612.076 634.461 624.086C605.465 636.097 574.386 642.279 543 642.279C511.614 642.279 480.536 636.097 451.539 624.086C422.542 612.076 396.195 594.471 374.002 572.278C351.808 550.085 334.204 523.737 322.193 494.741C310.182 465.744 304 434.665 304 403.279C304 271.279 411 164.279 543 164.279C675 164.279 782 271.279 782 403.279Z" fill="black"/>
<path id="Vector_3" d="M433 601.279C445.703 601.279 456 590.982 456 578.279C456 565.577 445.703 555.279 433 555.279C420.298 555.279 410 565.577 410 578.279C410 590.982 420.298 601.279 433 601.279Z" fill="#D0CDE1"/>
<path id="Vector_4" d="M456 606.279C468.703 606.279 479 595.982 479 583.279C479 570.577 468.703 560.279 456 560.279C443.298 560.279 433 570.577 433 583.279C433 595.982 443.298 606.279 456 606.279Z" fill="#D0CDE1"/>
<path id="Vector_5" d="M652 601.279C664.703 601.279 675 590.982 675 578.279C675 565.577 664.703 555.279 652 555.279C639.298 555.279 629 565.577 629 578.279C629 590.982 639.298 601.279 652 601.279Z" fill="#D0CDE1"/>
<path id="Vector_6" d="M606 606.279C618.703 606.279 629 595.982 629 583.279C629 570.577 618.703 560.279 606 560.279C593.298 560.279 583 570.577 583 583.279C583 595.982 593.298 606.279 606 606.279Z" fill="#D0CDE1"/>
<path id="Vector_7" d="M543 612.279C561.778 612.279 577 597.057 577 578.279C577 559.502 561.778 544.279 543 544.279C524.222 544.279 509 559.502 509 578.279C509 597.057 524.222 612.279 543 612.279Z" fill="#D0CDE1"/>
<path id="Vector_8" d="M509 623.279C527.778 623.279 543 608.057 543 589.279C543 570.502 527.778 555.279 509 555.279C490.222 555.279 475 570.502 475 589.279C475 608.057 490.222 623.279 509 623.279Z" fill="#D0CDE1"/>
<path id="Vector_9" d="M690.71 591.189C647.835 624.88 594.731 642.901 540.207 642.263C485.682 641.624 433.014 622.365 390.94 587.679C429.62 576.839 479.97 570.279 535 570.279C595.74 570.279 650.77 578.269 690.71 591.189Z" fill="#D0CDE1"/>
<path id="Vector_10" d="M543 403.279C584.421 403.279 618 369.701 618 328.279C618 286.858 584.421 253.279 543 253.279C501.579 253.279 468 286.858 468 328.279C468 369.701 501.579 403.279 543 403.279Z" fill="#D0CDE1"/>
<path id="Vector_11" d="M543 588.279C599.885 588.279 646 542.165 646 485.279C646 428.394 599.885 382.279 543 382.279C486.115 382.279 440 428.394 440 485.279C440 542.165 486.115 588.279 543 588.279Z" fill="#D0CDE1"/>
<path id="Vector_12" d="M606.543 384.279H482.457C481.54 384.279 480.661 384.643 480.013 385.292C479.364 385.94 479 386.819 479 387.736V394.822C479 395.276 479.09 395.726 479.263 396.145C479.437 396.565 479.692 396.946 480.012 397.267C480.333 397.588 480.715 397.842 481.134 398.016C481.553 398.19 482.003 398.279 482.457 398.279H503.547L505.728 400.362L486.636 496.1L499 512.279L518.477 412.535L580 471.279L598 468.279L524.957 398.279H606.543C606.997 398.279 607.447 398.19 607.866 398.016C608.286 397.842 608.667 397.588 608.988 397.267C609.309 396.946 609.563 396.565 609.737 396.145C609.911 395.726 610 395.276 610 394.822V387.736C610 386.819 609.636 385.94 608.988 385.292C608.339 384.643 607.46 384.279 606.543 384.279V384.279Z" fill="#FF6767"/>
<path id="Vector_13" d="M502.321 291.279C502.321 291.279 534.453 275.213 534.453 269.476C534.453 263.738 521.83 246.524 498.878 246.524C498.878 246.524 493.141 236.196 486.255 244.229C479.37 252.262 489.698 258 489.698 258C489.698 258 477.075 278.656 495.436 291.279H502.321Z" fill="#FF6767"/>
<path id="Vector_14" d="M515 319.279C518.314 319.279 521 316.593 521 313.279C521 309.965 518.314 307.279 515 307.279C511.686 307.279 509 309.965 509 313.279C509 316.593 511.686 319.279 515 319.279Z" fill="#3F3D56"/>
<path id="Vector_15" d="M571 319.279C574.314 319.279 577 316.593 577 313.279C577 309.965 574.314 307.279 571 307.279C567.686 307.279 565 309.965 565 313.279C565 316.593 567.686 319.279 571 319.279Z" fill="#3F3D56"/>
<path id="Vector_16" d="M548.5 326.279H537.5V360.279H548.5V326.279Z" fill="#F39D38"/>
<path id="Vector_17" d="M545 454.279C548.314 454.279 551 451.593 551 448.279C551 444.965 548.314 442.279 545 442.279C541.686 442.279 539 444.965 539 448.279C539 451.593 541.686 454.279 545 454.279Z" fill="#3F3D56"/>
<path id="Vector_18" d="M545 476.279C548.314 476.279 551 473.593 551 470.279C551 466.965 548.314 464.279 545 464.279C541.686 464.279 539 466.965 539 470.279C539 473.593 541.686 476.279 545 476.279Z" fill="#3F3D56"/>
<path id="Vector_19" d="M545 498.279C548.314 498.279 551 495.593 551 492.279C551 488.965 548.314 486.279 545 486.279C541.686 486.279 539 488.965 539 492.279C539 495.593 541.686 498.279 545 498.279Z" fill="#3F3D56"/>
<path id="Vector_20" d="M597.339 77.2792H492.661C487.878 77.2792 484 81.1571 484 85.9406V112.618C484 117.401 487.878 121.279 492.661 121.279H597.339C602.122 121.279 606 117.401 606 112.618V85.9406C606 81.1571 602.122 77.2792 597.339 77.2792Z" fill="#3F3D56"/>
<path id="Vector_21" d="M543 127.279C533.111 127.279 523.444 124.347 515.221 118.853C506.999 113.359 500.59 105.55 496.806 96.4135C493.022 87.2772 492.031 77.2238 493.961 67.5248C495.89 57.8257 500.652 48.9166 507.645 41.924C514.637 34.9313 523.546 30.1693 533.245 28.24C542.945 26.3108 552.998 27.3009 562.134 31.0853C571.27 34.8697 579.079 41.2783 584.573 49.5008C590.068 57.7233 593 67.3902 593 77.2793C592.985 90.5355 587.712 103.245 578.339 112.618C568.965 121.992 556.256 127.264 543 127.279V127.279ZM543 37.2793C535.089 37.2793 527.355 39.6253 520.777 44.0205C514.199 48.4158 509.072 54.6629 506.045 61.972C503.017 69.281 502.225 77.3237 503.769 85.0829C505.312 92.8422 509.122 99.9695 514.716 105.564C520.31 111.158 527.437 114.967 535.196 116.511C542.956 118.054 550.998 117.262 558.307 114.234C565.616 111.207 571.864 106.08 576.259 99.5021C580.654 92.9241 583 85.1906 583 77.2793C582.988 66.6743 578.77 56.5072 571.271 49.0083C563.772 41.5095 553.605 37.2914 543 37.2793V37.2793Z" fill="#3F3D56"/>
<path id="Vector_22" d="M543 372.771C533.487 372.771 523.974 370.234 514.527 365.16L515.473 363.398C533.737 373.208 552.26 373.208 570.526 363.398L571.474 365.16C562.026 370.234 552.513 372.771 543 372.771Z" fill="#3F3D56"/>
<path id="Vector_23" d="M587 336.279C589.762 336.279 592 334.041 592 331.279C592 328.518 589.762 326.279 587 326.279C584.239 326.279 582 328.518 582 331.279C582 334.041 584.239 336.279 587 336.279Z" fill="#FF6584"/>
<path id="Vector_24" d="M499 336.279C501.762 336.279 504 334.041 504 331.279C504 328.518 501.762 326.279 499 326.279C496.239 326.279 494 328.518 494 331.279C494 334.041 496.239 336.279 499 336.279Z" fill="#FF6584"/>
<path id="Vector_25" d="M630 5.84921V51.7792C630 52.5986 629.828 53.4088 629.494 54.1572C629.161 54.9057 628.674 55.5756 628.065 56.1235C627.455 56.6714 626.738 57.0851 625.958 57.3376C625.179 57.5901 624.355 57.6758 623.54 57.5892L560.73 50.1392L545 48.2792V10.2792L560.58 8.24922L623.47 0.039217C624.29 -0.0564118 625.121 0.0225115 625.908 0.2708C626.695 0.519088 627.421 0.931125 628.038 1.47985C628.655 2.02857 629.148 2.70155 629.487 3.4546C629.825 4.20765 630 5.02372 630 5.84921V5.84921Z" fill="#FF6767"/>
<path id="Vector_26" d="M541 10.2792V48.2792L525.25 50.1192L461.46 57.5892C460.645 57.6758 459.821 57.5901 459.042 57.3376C458.262 57.0851 457.545 56.6714 456.936 56.1235C456.326 55.5756 455.839 54.9057 455.506 54.1572C455.172 53.4088 455 52.5986 455 51.7792V5.84921C455 5.02372 455.175 4.20765 455.514 3.4546C455.852 2.70155 456.345 2.02857 456.962 1.47985C457.579 0.931125 458.305 0.519088 459.092 0.2708C459.879 0.0225115 460.71 -0.0564118 461.53 0.039217L525.39 8.26921L541 10.2792Z" fill="#FF6767"/>
<path id="Vector_27" opacity="0.2" d="M562 12.0092V46.5492C562.005 47.8567 561.556 49.1255 560.73 50.1392L545 48.2792V10.2792L560.58 8.24916C561.501 9.28433 562.007 10.6235 562 12.0092V12.0092Z" fill="black"/>
<path id="Vector_28" opacity="0.2" d="M541 10.2792V48.2792L525.25 50.1192C524.435 49.1087 523.993 47.8477 524 46.5492V12.0092C523.994 10.6351 524.488 9.30563 525.39 8.26917L541 10.2792Z" fill="black"/>
<path id="Vector_29" d="M554.272 6.27922H531.728C528.565 6.27922 526 8.84389 526 12.0076V46.5509C526 49.7146 528.565 52.2792 531.728 52.2792H554.272C557.435 52.2792 560 49.7146 560 46.5509V12.0076C560 8.84389 557.435 6.27922 554.272 6.27922Z" fill="#FF6767"/>
</g>
<g id="snow-flakes">
<path id="Vector_30" d="M653.921 284.551C656.726 284.551 659 282.277 659 279.472C659 276.667 656.726 274.393 653.921 274.393C651.116 274.393 648.842 276.667 648.842 279.472C648.842 282.277 651.116 284.551 653.921 284.551Z" fill="#D0CDE1"/>
<path id="Vector_31" d="M374.921 348.551C377.726 348.551 380 346.277 380 343.472C380 340.667 377.726 338.393 374.921 338.393C372.116 338.393 369.842 340.667 369.842 343.472C369.842 346.277 372.116 348.551 374.921 348.551Z" fill="#D0CDE1"/>
<path id="Vector_32" d="M726.921 360.551C729.726 360.551 732 358.277 732 355.472C732 352.667 729.726 350.393 726.921 350.393C724.116 350.393 721.842 352.667 721.842 355.472C721.842 358.277 724.116 360.551 726.921 360.551Z" fill="#D0CDE1"/>
<path id="Vector_33" d="M439.921 248.357C443.724 248.357 446.807 245.274 446.807 241.472C446.807 237.669 443.724 234.586 439.921 234.586C436.118 234.586 433.036 237.669 433.036 241.472C433.036 245.274 436.118 248.357 439.921 248.357Z" fill="#D0CDE1"/>
<path id="Vector_34" d="M570.921 218.357C574.724 218.357 577.807 215.274 577.807 211.472C577.807 207.669 574.724 204.586 570.921 204.586C567.118 204.586 564.036 207.669 564.036 211.472C564.036 215.274 567.118 218.357 570.921 218.357Z" fill="#D0CDE1"/>
<path id="Vector_35" d="M362.921 455.357C366.724 455.357 369.807 452.274 369.807 448.472C369.807 444.669 366.724 441.586 362.921 441.586C359.118 441.586 356.036 444.669 356.036 448.472C356.036 452.274 359.118 455.357 362.921 455.357Z" fill="#D0CDE1"/>
<path id="Vector_36" d="M681.921 455.357C685.724 455.357 688.807 452.274 688.807 448.472C688.807 444.669 685.724 441.586 681.921 441.586C678.118 441.586 675.036 444.669 675.036 448.472C675.036 452.274 678.118 455.357 681.921 455.357Z" fill="#D0CDE1"/>
</g>
</g>
</svg>

            
          
!

CSS

            
              * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #66cdaa;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

svg {
  height: 60vmin;
}

#snow-flakes {
  animation: fadeInOut 3s infinite ease-in-out;
}

@keyframes fadeInOut {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
  }

  
 
            
          
!

JS

            
              
            
          
!
999px

Console