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.

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

              
                .box
  .snowflakes
    -var snow = 15
      - for (var i = 0; i < snow; i++)
        span
          i
  -var x = 7
  .tree
    -var glow = 18
    .star
      - for (var i = 0; i < glow; i++)
        i
    - for (var i = 0; i < x; i++)
      .x
        .inc
          - for (var a = 0; a < i; a++)
            svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24")
              path(d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z")
        .mid
          svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24")
              path(d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z")
        .dec
          - for (var b = i; b < 2*i; b++)
            svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24")
              path(d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z")
              
svg(id="letter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="70px" viewBox="0 0 400 70")  
  defs  
    clipPath(id="clip-i-1")
        path(d="M17.078,45.808c-2.934-1.45-5.184-3.508-6.75-6.175c-1.567-2.667-2.35-5.767-2.35-9.3c0-4.9,0.925-9.25,2.775-13.05 c1.85-3.8,4.358-6.741,7.525-8.825c3.167-2.083,6.683-3.125,10.55-3.125c3.6,0,6.333,0.925,8.2,2.775 c1.866,1.85,2.8,4.292,2.8,7.325c0,2.033-0.358,3.667-1.075,4.9c-0.717,1.233-1.742,1.85-3.075,1.85 c-0.934,0-1.667-0.217-2.2-0.65c-0.534-0.433-0.8-1.066-0.8-1.9c0-0.3,0.066-0.85,0.2-1.65c0.2-1,0.3-1.8,0.3-2.4 c0-3.033-1.617-4.55-4.85-4.55c-2.2,0-4.3,0.717-6.3,2.15c-2,1.434-3.617,3.542-4.85,6.325c-1.233,2.784-1.85,6.092-1.85,9.925 c0,4,1.117,7.092,3.35,9.274c2.233,2.184,5.533,3.275,9.9,3.275c2.167,0,4.358-0.275,6.575-0.825 c2.216-0.55,4.675-1.392,7.375-2.524c0.5-0.2,0.917-0.301,1.25-0.301c0.533,0,0.933,0.2,1.2,0.601c0.266,0.399,0.4,0.917,0.4,1.55 c0,2.033-1.1,3.533-3.3,4.5c-2.367,1.033-4.825,1.792-7.375,2.275c-2.55,0.482-4.975,0.725-7.275,0.725 C23.46,47.982,20.011,47.258,17.078,45.808z")  
    clipPath(id="clip-i-2")
      path(d="M102.052,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.301-0.317,2.334-0.95,3.101c-3.3,4.033-6.817,6.05-10.55,6.05 c-3.234,0-5.817-1.25-7.75-3.75c-1.934-2.5-2.9-6.083-2.9-10.75c0-1.133,0.05-2.267,0.15-3.4c-2.2,0.4-4.6,0.7-7.2,0.9 c-1.733,0.134-2.917,0.217-3.55,0.25c-0.667,3.4-1.6,7.567-2.8,12.5c-0.7,2.9-2.033,4.35-4,4.35c-2.133,0-3.2-0.966-3.2-2.899 			c0-0.433,0.083-1.033,0.25-1.8c1.133-4.566,2.033-8.433,2.7-11.601l-2.4,0.1c-1.1,0-1.9-0.191-2.4-0.575 			c-0.5-0.383-0.75-1.008-0.75-1.875c0-1.1,0.316-1.908,0.95-2.425c0.633-0.516,1.683-0.808,3.15-0.875l2.65-0.1 c0.866-4.7,1.3-8.283,1.3-10.75c0-1.566-0.233-2.633-0.7-3.2c-0.467-0.566-1.083-0.85-1.85-0.85c-2.333,0-4.967,1.95-7.9,5.85 c-0.434,0.567-0.917,0.85-1.45,0.85c-0.467,0-0.867-0.217-1.2-0.65c-0.333-0.433-0.5-0.982-0.5-1.65c0-1.033,0.417-2.133,1.25-3.3 			c1.466-2.033,3.316-3.708,5.55-5.025c2.233-1.316,4.5-1.975,6.8-1.975c2.167,0,3.842,0.742,5.025,2.225 c1.183,1.483,1.775,3.792,1.775,6.925c0,2.767-0.4,6.517-1.2,11.25l4.9-0.25c2.1-0.1,3.9-0.267,5.4-0.5 c0.6-3.667,1.516-7.1,2.75-10.3c1.232-3.2,2.766-5.8,4.6-7.8c1.833-2,3.883-3,6.15-3c1.666,0,2.982,0.659,3.95,1.975 c0.966,1.317,1.45,3.042,1.45,5.175c0,8.268-4.217,14-12.65,17.2c-0.1,1.333-0.15,2.717-0.15,4.15c0,3.5,0.433,5.984,1.3,7.45 			c0.866,1.468,2.083,2.2,3.65,2.2c1.366,0,2.616-0.357,3.75-1.075c1.133-0.716,2.417-1.941,3.85-3.675c0.4-0.466,0.85-0.7,1.35-0.7 C101.46,36.582,101.802,36.782,102.052,37.183z M91.952,10.232c-0.817,1.333-1.592,3.15-2.325,5.45 c-0.733,2.3-1.317,4.817-1.75,7.55c2.667-1.1,4.633-2.667,5.9-4.7c1.266-2.033,1.9-4.65,1.9-7.85c0-0.767-0.134-1.367-0.4-1.8 			c-0.268-0.433-0.6-0.65-1-0.65C93.543,8.232,92.769,8.899,91.952,10.232z")  
    clipPath(id="clip-i-3")
      path(d="M131.376,33.032c0.233,0.434,0.35,0.984,0.35,1.65c0,1.6-0.483,2.55-1.45,2.85c-2,0.7-4.2,1.101-6.6,1.2 			c-0.634,2.8-1.884,5.042-3.75,6.725c-1.867,1.684-3.984,2.525-6.35,2.525c-2,0-3.708-0.482-5.125-1.45 c-1.417-0.966-2.492-2.25-3.225-3.85c-0.733-1.601-1.1-3.333-1.1-5.2c0-2.533,0.483-4.792,1.45-6.775 c0.966-1.983,2.3-3.533,4-4.65c1.7-1.117,3.583-1.675,5.65-1.675c2.533,0,4.575,0.875,6.125,2.625s2.458,3.909,2.725,6.475 c1.566-0.1,3.433-0.433,5.6-1c0.266-0.066,0.5-0.1,0.7-0.1C130.809,32.382,131.143,32.6,131.376,33.032z M116.751,41.383 c0.783-0.867,1.308-2.117,1.575-3.75c-1.034-0.7-1.825-1.617-2.375-2.75c-0.55-1.133-0.825-2.333-0.825-3.6 c0-0.533,0.05-1.066,0.15-1.6h-0.25c-1.333,0-2.442,0.642-3.325,1.925c-0.884,1.284-1.325,3.092-1.325,5.425 c0,1.834,0.358,3.233,1.075,4.2c0.716,0.967,1.558,1.45,2.525,1.45C115.042,42.683,115.967,42.25,116.751,41.383z")
    clipPath(id="clip-i-4")
      path(d="M155.025,33.032c0.233,0.434,0.35,0.984,0.35,1.65c0,0.833-0.117,1.475-0.35,1.925c-0.233,0.45-0.6,0.759-1.1,0.925 c-2,0.7-4.2,1.101-6.6,1.2c-0.667,2.768-1.925,5-3.775,6.7s-3.892,2.55-6.125,2.55c-3.367,0-5.817-1.283-7.35-3.85 			s-2.3-6.283-2.3-11.15c0-4.3,0.533-8.975,1.6-14.025c1.066-5.05,2.625-9.35,4.675-12.9c2.05-3.55,4.492-5.325,7.325-5.325 			c1.533,0,2.766,0.659,3.7,1.975c0.933,1.317,1.4,3.025,1.4,5.125c0,2.733-0.518,5.45-1.55,8.15c-1.034,2.7-2.75,5.534-5.15,8.5 c2.233,0.167,4.05,1.092,5.45,2.775c1.4,1.684,2.232,3.759,2.5,6.225c1.566-0.1,3.433-0.433,5.6-1c0.2-0.066,0.433-0.1,0.7-0.1 			C154.458,32.382,154.792,32.6,155.025,33.032z M140.375,41.383c0.8-0.867,1.333-2.117,1.6-3.75c-1.034-0.7-1.825-1.617-2.375-2.75 			c-0.55-1.133-0.825-2.333-0.825-3.6c0-0.466,0.066-1.1,0.2-1.9h-0.15c-1.367,0-2.508,0.675-3.425,2.025 			c-0.917,1.35-1.375,3.159-1.375,5.425c0,1.9,0.358,3.351,1.075,4.351c0.716,1,1.558,1.5,2.525,1.5 			C138.658,42.683,139.575,42.25,140.375,41.383z M138.05,8.657c-0.784,1.984-1.508,4.675-2.175,8.075 			c-0.667,3.4-1.167,7.117-1.5,11.15c2.2-4.033,3.958-7.591,5.275-10.675c1.316-3.083,1.975-5.825,1.975-8.225 			c0-1.066-0.125-1.883-0.375-2.45c-0.25-0.566-0.592-0.85-1.025-0.85C139.558,5.683,138.833,6.675,138.05,8.657z")
    clipPath(id="clip-i-5")
      path(d="M189.85,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.334-0.317,2.367-0.95,3.101c-3.3,4.033-6.384,6.05-9.25,6.05 			c-2.167,0-3.742-0.767-4.725-2.3c-0.983-1.533-1.475-3.566-1.475-6.101v-0.75c-1.833,2.768-3.858,4.984-6.075,6.65 			c-2.217,1.667-4.542,2.5-6.975,2.5c-2.9,0-5.208-0.866-6.925-2.6s-2.575-3.967-2.575-6.7c0-2,0.15-3.9,0.45-5.7 			c0.3-1.8,0.767-3.716,1.4-5.75c0.3-0.966,0.791-1.675,1.475-2.125c0.683-0.45,1.675-0.675,2.975-0.675c1.5,0,2.25,0.4,2.25,1.2 			c0,0.333-0.25,1.534-0.75,3.6l-0.35,1.5l-0.7,3c0.9-0.9,1.975-1.642,3.225-2.225c1.25-0.583,2.525-0.875,3.825-0.875 			c1.533,0,2.8,0.458,3.8,1.375c1,0.917,1.566,2.208,1.7,3.875c1.3-1.566,2.367-3.042,3.2-4.425c0.833-1.383,1.55-2.825,2.15-4.325 			c0.3-1,0.691-1.7,1.175-2.1c0.483-0.4,1.275-0.6,2.375- .6c1.7,0,2.55,0.567,2.55,1.7c0,0.833-0.317,2.767-0.95,5.8 			c-0.8,3.667-1.2,6.149-1.2,7.45c0,1,0.133,1.767,0.4,2.3c0.266,0.533,0.716,0.8,1.35,0.8c0.6,0,1.35-0.416,2.25-1.25 			c0.9-0.833,2.1-2.15,3.6-3.95c0.4-0.466,0.85-0.7,1.35-0.7C189.258,36.582,189.6,36.782,189.85,37.183z M162.575,35.882 			c-1.133,0-2.125,0.317-2.975,0.95c-0.85,0.634-1.525,1.367-2.025,2.2c0.133,1.233,0.483,2.15,1.05,2.75 			c0.566,0.601,1.433,0.9,2.6,0.9c1.333,0,2.367-0.366,3.1-1.101c0.733-0.732,1.1-1.75,1.1-3.05 			C165.425,36.766,164.475,35.882,162.575,35.882z")  
    clipPath(id="clip-i-6")
      path(d="M226.55,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.367-0.317,2.418-0.95,3.15c-1.533,1.8-3.025,3.25-4.475,4.35 			c-1.45,1.101-3.043,1.65-4.775,1.65c-1.768,0-3.033-0.666-3.8-2c-0.767-1.333-1.149-3.267-1.149-5.8c0-2.2,0.266-4.95,0.799-8.25 			h-0.1c-0.834,1.434-1.617,3.05-2.35,4.85c-0.734,1.8-1.551,3.934-2.45,6.4l-0.851,2.25c-0.367,1-0.799,1.675-1.299,2.024 			c-0.5,0.351-1.101,0.525-1.801,0.525c-0.733,0-1.268-0.2-1.6-0.6c-0.334-0.4-0.634-1.033-0.9-1.9c-0.3-1-0.55-2.375-0.75-4.125 			c-0.2-1.75-0.3-3.525-0.3-5.325c0-1.1,0.05-2.15,0.15-3.15h-0.1c-0.834,3.234-1.65,5.892-2.45,7.975 			c-0.8,2.084-1.884,3.783-3.25,5.1c-1.367,1.317-3.1,1.976-5.2,1.976c-1.767,0-3.125-0.616-4.075-1.851 			c-0.95-1.232-1.425-2.782-1.425-4.649c0-1.667,0.383-3.058,1.15-4.175c0.766-1.117,1.85-1.675,3.25-1.675c1.333,0,2,0.45,2,1.35 			c0,0.167-0.018,0.3-0.05,0.399c-0.267,1.601-0.4,2.734-0.4,3.4c0,1.134,0.25,1.7,0.75,1.7c0.466,0,0.933-0.342,1.4-1.025 			c0.466-0.683,1.117-2.175,1.95-4.475c1.133-3.1,2.2-6.267,3.2-9.5c0.333-1.033,0.825-1.792,1.475-2.275 			c0.65-0.482,1.525-0.725,2.625-0.725c0.933,0,1.708,0.184,2.325,0.55c0.616,0.367,0.925,0.967,0.925,1.8 			c0,4.834,0.116,8.518,0.351,11.05h0.1c0.566-1.899,1.449-4.083,2.65-6.55c1.199-2.466,2.149-4.083,2.85-4.85 			c0.633-0.667,1.275-1.175,1.925-1.525c0.649-0.35,1.375-0.525,2.175-0.525c1.2,0,2.017,0.259,2.45,0.775 			c0.433,0.518,0.649,1.475,0.649,2.875c0,0.768-0.017,1.525-0.049,2.275c-0.034,0.75-0.068,1.442-0.101,2.075 			c-0.134,2.467-0.2,4.3-0.2,5.5c0,1.899,0.133,3.184,0.4,3.85c0.266,0.667,0.766,1,1.5,1c1.332,0,3.016-1.75,5.05-5.25 			c0.366-0.6,0.816-0.9,1.351-0.9C225.957,36.582,226.3,36.782,226.55,37.183z")
    clipPath(id="clip-i-7")
      path(d="M275.949,5.458c0.45,0.417,0.676,1.075,0.676,1.975c0,1.033-0.275,1.817-0.825,2.35c-0.55,0.534-1.509,0.867-2.875,1 			c-2.534,0.268-4.867,0.442-7,0.525c-2.134,0.083-5.117,0.125-8.95,0.125h-0.1c-1.434,7.2-2.567,13.35-3.4,18.45 			c-0.4,2.434-0.792,5.125-1.175,8.075c-0.384,2.95-0.643,5.293-0.775,7.025c-0.067,0.967-0.467,1.709-1.2,2.225 			c-0.733,0.518-1.617,0.775-2.649,0.775c-1.101,0-1.95-0.267-2.55-0.8c-0.601-0.533-0.9-1.233-0.9-2.101 			c0-0.8,0.125-2.125,0.375-3.975s0.541-3.791,0.875-5.825c0.366-2.033,0.65-3.8,0.85-5.3c0.533-3.633,1.367-8.25,2.5-13.85l0.9-4.4 			c-2.934,0.3-5.05,0.875-6.35,1.725c-1.301,0.85-1.95,2.059-1.95,3.625c0,1.133,0.333,2.217,1,3.25c0.2,0.3,0.3,0.6,0.3,0.9 			c0,0.6-0.334,1.125-1,1.575c-0.667,0.45-1.417,0.675-2.25,0.675c-0.9,0-1.667-0.267-2.3-0.8c-0.468-0.4-0.867-1.142-1.2-2.225 			c-0.334-1.083-0.5-2.175-0.5-3.275c0-4.033,1.783-6.992,5.35-8.875c3.566-1.883,9.117-2.825,16.65-2.825 			c4.2,0,7.441-0.033,9.725-0.1c2.283-0.066,4.476-0.2,6.575-0.4C274.774,4.882,275.5,5.041,275.949,5.458z")
    clipPath(id="clip-i-8")
      path(d="M294.374,33.032c0.233,0.434,0.351,0.984,0.351,1.65c0,1.6-0.484,2.55-1.451,2.85c-2,0.7-4.199,1.101-6.6,1.2 			c-0.633,2.8-1.883,5.042-3.75,6.725c-1.867,1.684-3.983,2.525-6.35,2.525c-2,0-3.709-0.482-5.125-1.45 			c-1.418-0.966-2.492-2.25-3.225-3.85c-0.734-1.601-1.101-3.333-1.101-5.2c0-2.533,0.483-4.792,1.45-6.775 			c0.967-1.983,2.3-3.533,4-4.65c1.699-1.117,3.582-1.675,5.65-1.675c2.532,0,4.574,0.875,6.125,2.625 			c1.549,1.75,2.457,3.909,2.725,6.475c1.566-0.1,3.433-0.433,5.6-1c0.267-0.066,0.5-0.1,0.7-0.1 			C293.807,32.382,294.141,32.6,294.374,33.032z M279.749,41.383c0.782-0.867,1.308-2.117,1.575-3.75 			c-1.033-0.7-1.825-1.617-2.375-2.75c-0.551-1.133-0.825-2.333-0.825-3.6c0-0.533,0.05-1.066,0.149-1.6h-0.25 			c-1.333,0-2.441,0.642-3.324,1.925c-0.884,1.284-1.325,3.092-1.325,5.425c0,1.834,0.358,3.233,1.075,4.2s1.558,1.45,2.525,1.45 			C278.041,42.683,278.965,42.25,279.749,41.383z")
    clipPath(id="clip-i-9")
      path(d="M317.049,37.308c0.25,0.417,0.375,0.942,0.375,1.575c0,0.767-0.117,1.367-0.351,1.8c-0.233,0.434-0.6,0.817-1.1,1.149 			c-2.867,1.934-4.968,3.367-6.3,4.301l-3.2,2.149c-1.268,6.9-2.925,12.325-4.976,16.275c-2.05,3.95-4.658,5.925-7.824,5.925 			c-1.7,0-3.084-0.525-4.15-1.575c-1.067-1.05-1.6-2.425-1.6-4.125c0-2.367,0.933-4.908,2.8-7.625 			c1.866-2.717,5.366-6.059,10.5-10.024l0.3-1.95c-0.567,0.899-1.309,1.592-2.225,2.075c-0.918,0.482-1.825,0.725-2.726,0.725 			c-2.067,0-3.717-0.75-4.95-2.25s-1.85-3.467-1.85-5.9c0-2.666,0.616-5.191,1.85-7.575c1.233-2.383,2.875-4.3,4.926-5.75 			c2.05-1.45,4.225-2.175,6.524-2.175c0.733,0,1.226,0.142,1.476,0.425c0.25,0.284,0.457,0.792,0.625,1.525 			c0.633-0.133,1.366-0.2,2.199-0.2s1.426,0.125,1.775,0.375s0.525,0.742,0.525,1.475c0,0.4-0.018,0.717-0.051,0.95 			c-0.133,1.034-0.55,3.65-1.25,7.85c-0.133,0.8-0.274,1.675-0.425,2.625c-0.149,0.95-0.309,1.959-0.475,3.025 			c2.566-2,5.032-3.767,7.399-5.301c0.434-0.266,0.816-0.399,1.15-0.399C316.456,36.683,316.799,36.891,317.049,37.308z 			 M297.049,62.633c1.05-2,2.058-5.184,3.024-9.551c-2.567,2.2-4.417,4.184-5.55,5.95c-1.134,1.767-1.7,3.316-1.7,4.65			c0,0.566,0.108,1.032,0.325,1.399s0.575,0.551,1.075,0.551C295.057,65.633,295.998,64.633,297.049,62.633z M300.573,41.532 			c0.7-0.933,1.2-2.267,1.5-4l1.601-8.55c-1.367,0.034-2.634,0.559-3.801,1.575c-1.167,1.017-2.1,2.358-2.8,4.025 			c-0.7,1.667-1.05,3.433-1.05,5.3c0,1.033,0.208,1.8,0.625,2.3c0.416,0.5,0.991,0.75,1.725,0.75 			C299.14,42.933,299.873,42.466,300.573,41.532z")  
    clipPath(id="clip-i-10")
      path(d="M340.873,33.032c0.233,0.434,0.351,0.984,0.351,1.65c0,1.6-0.484,2.55-1.45,2.85c-2,0.7-4.2,1.101-6.6,1.2 			c-0.635,2.8-1.885,5.042-3.75,6.725c-1.867,1.684-3.984,2.525-6.351,2.525c-2,0-3.708-0.482-5.125-1.45 			c-1.417-0.966-2.492-2.25-3.226-3.85c-0.732-1.601-1.1-3.333-1.1-5.2c0-2.533,0.482-4.792,1.45-6.775 			c0.966-1.983,2.3-3.533,4-4.65c1.7-1.117,3.583-1.675,5.649-1.675c2.533,0,4.576,0.875,6.125,2.625 			c1.551,1.75,2.459,3.909,2.726,6.475c1.566-0.1,3.433-0.433,5.6-1c0.267-0.066,0.5-0.1,0.7-0.1 			C340.306,32.382,340.64,32.6,340.873,33.032z M326.248,41.383c0.783-0.867,1.309-2.117,1.575-3.75 			c-1.034-0.7-1.825-1.617-2.375-2.75c-0.55-1.133-0.825-2.333-0.825-3.6c0-0.533,0.051-1.066,0.15-1.6h-0.25 			c-1.334,0-2.442,0.642-3.325,1.925c-0.884,1.284-1.325,3.092-1.325,5.425c0,1.834,0.357,3.233,1.075,4.2			c0.716,0.967,1.558,1.45,2.524,1.45C324.539,42.683,325.465,42.25,326.248,41.383z")  
    clipPath(id="clip-i-11")
      path(d="M377.298,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.367-0.317,2.418-0.95,3.15c-1.534,1.8-3.025,3.25-4.476,4.35 c-1.449,1.101-3.042,1.65-4.774,1.65c-1.768,0-3.034-0.666-3.8-2c-0.768-1.333-1.15-3.267-1.15-5.8c0-2.2,0.267-4.95,0.8-8.25 h-0.1c-0.834,1.434-1.617,3.05-2.351,4.85s-1.55,3.934-2.449,6.4l-0.851,2.25c-0.367,1-0.8,1.675-1.3,2.024 c-0.5,0.351-1.1,0.525-1.8,0.525c-0.733,0-1.268-0.2-1.601-0.6c-0.333-0.4-0.633-1.033-0.899-1.9c-0.3-1-0.55-2.375-0.75-4.125 s-0.3-3.525-0.3-5.325c0-1.1,0.05-2.15,0.149-3.15h-0.1c-0.834,3.234-1.65,5.892-2.45,7.975c-0.8,2.084-1.884,3.783-3.25,5.1 c-1.367,1.317-3.1,1.976-5.2,1.976c-1.767,0-3.125-0.616-4.075-1.851c-0.949-1.232-1.425-2.782-1.425-4.649 c0-1.667,0.383-3.058,1.15-4.175c0.767-1.117,1.85-1.675,3.25-1.675c1.333,0,2,0.45,2,1.35c0,0.167-0.018,0.3-0.05,0.399 c-0.268,1.601-0.4,2.734-0.4,3.4c0,1.134,0.25,1.7,0.75,1.7c0.467,0,0.933-0.342,1.4-1.025c0.466-0.683,1.116-2.175,1.949-4.475 c1.133-3.1,2.2-6.267,3.2-9.5c0.333-1.033,0.825-1.792,1.476-2.275c0.649-0.482,1.524-0.725,2.625-0.725			 c0.933,0,1.707,0.184,2.324,0.55c0.617,0.367,0.926,0.967,0.926,1.8c0,4.834,0.116,8.518,0.35,11.05h0.1 c0.566-1.899,1.45-4.083,2.65-6.55c1.2-2.466,2.15-4.083,2.85-4.85c0.633-0.667,1.275-1.175,1.926-1.525 c0.649-0.35,1.375-0.525,2.175-0.525c1.2,0,2.017,0.259,2.45,0.775c0.433,0.518,0.649,1.475,0.649,2.875 c0,0.768-0.017,1.525-0.05,2.275s-0.067,1.442-0.1,2.075c-0.134,2.467-0.2,4.3-0.2,5.5c0,1.899,0.133,3.184,0.399,3.85 c0.267,0.667,0.767,1,1.5,1c1.333,0,3.017-1.75,5.051-5.25c0.366-0.6,0.816-0.9,1.35-0.9 C376.705,36.582,377.048,36.782,377.298,37.183z")
    clipPath(id="clip-i-12")
      path(d="M380.998,46.782c-0.75-0.8-1.125-1.85-1.125-3.149c0-1.5,0.425-2.7,1.274-3.601c0.851-0.899,2.042-1.35,3.575-1.35         c1.467,0,2.575,0.358,3.325,1.075s1.125,1.774,1.125,3.175c0,1.533-0.434,2.759-1.3,3.675c-0.867,0.917-2.051,1.375-3.551,1.375 C382.855,47.982,381.748,47.582,380.998,46.782z M384.572,35.583c-0.434-0.3-0.649-0.767-0.649-1.4l0.05-0.4 c0.566-3.732,1.333-7.982,2.3-12.75c0.967-4.766,1.866-8.883,2.7-12.35c0.533-2.133,1.982-3.2,4.35-3.2 c2.133,0,3.2,0.684,3.2,2.05c0,0.3-0.05,0.634-0.149,1c-0.867,3.534-2.018,7.809-3.45,12.825c-1.434,5.017-2.8,9.375-4.101,13.075 c-0.367,1.067-1.233,1.6-2.6,1.6C385.556,36.032,385.006,35.882,384.572,35.583z")

  g(class="stroke")
    g(clip-path="url(#clip-i-1)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M35.774,19.774 C37.5,15.5,35.723,10.7,33.319,9.215c-2.451-1.515-3.88-1.304-6.908-1.054C21.67,8.552,16.07,15.25,13.839,19.129 c-3.022,5.253-5.143,13.233-1.435,18.246c4.788,6.473,7.671,7.883,15.395,7.883c3.454,0,10.547-0.885,15.395-3.871")
    g(clip-path="url(#clip-i-2)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M53.617,17.879 c0.501,0.067-0.176-2.294,0.315-2.34c1.311-3.691,6.568-8.058,10.567-7.554c6.413,0.808,4.171,6.484,4.177,11.765 c0.006,4.769-1.105,9.532-2.96,13.574c-1.616,3.521-7.467,8.051-3.24,11.909c4.561-2.163,3.126-4.736,3.523-7.607 c0.451-3.256,0.165-5.592,0.056-8.125c-2.445-0.134-7.766,2.07-6.636-0.945c2.33-2.445,26.299,0.749,35.724-8.771 c2.775-2.804,3.277-5.386,2.888-9.364C97.586,5.854,95.59,3.906,92,6.434c-6.547,4.609-6.879,10.436-8.25,16.316 c-1.216,5.216-1.292,11.074,0,16.25c0.807,3.232,4.449,5.944,7.625,6.258c4.597,0.454,6.982-2.556,8.875-5.758")
    g(clip-path="url(#clip-i-3)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M118,26.75 c-2.857-0.808-8.331,0.569-9.688,3.58c-1.16,2.574-1.311,4.001-1.187,6.923c0.106,2.498,2.147,6.832,4.775,7.656 c3.104,0.974,7.026-1.922,8.1-4.159c1.151-2.398,3.389-16.899-3.25-14.984c-0.636,0.184-1.619,1-1.75,1.607 c-0.092,0.427,0.199,1.368,0.372,1.752c0.571,1.273,1.579,3.148,2.554,4.125c2.439,2.443,7.241,2.898,10.699,2.098")
    g(clip-path="url(#clip-i-4)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M133.125,31.25 c1.419-2.163,4.308-5.375,4.969-6.525c0.74-1.288,1.189-2.747,1.875-4.091c1.37-2.686,3.583-5.781,4.041-8.634 c0.38-2.373,0.312-8.02-2.503-8.722c-3.043-0.76-4.665,2.612-5.718,4.883c-1.31,2.824-2.292,6-3.414,8.989 c-0.697,1.858-0.892,3.843-1.333,5.728c-0.377,1.613-0.808,3.195-0.91,4.99c-0.146,2.564-0.006,5.735-0.006,8.314 c0,2.984,0.748,6.454,3.528,7.942c2.098,1.124,5.73,1.75,7.71,0.234c2.19-1.677,2.683-5.658,3.043-8.362 c0.366-2.752,0.848-5.737-0.534-8.216c-0.557-0.999-1.202-1.535-2.369-1.781c-1.578-0.334-1.529,0.363-1.656,1.694 c-0.28,2.948,0.408,4.821,2.905,6.531c2.027,1.388,6.207,1.123,8.671,1.123")
    g(clip-path="url(#clip-i-5)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M156.495,26.468 c-1.75,2.875-1.908,4.518-2.37,6.907c-0.525,2.715,0.219,4.797,1.847,7.317c1.515,2.344,4.462,4.249,7.4,3.813 c3.745-0.555,4.326-3.889,4.634-6.983c0.32-3.224-1.197-4.53-4.284-4.522c-2.498,0.006-5.57,1.022-7.204,3.013 c-0.863,1.051-1.582,1.239-1.713,2.598c-0.105,1.088,0.302,2.679,0.563,3.862c0.708,3.212,4.528,3.152,7.113,3.152 c4.5,0,6.398-3.749,8.744-6.9c2.957-3.973,7.328-8.375,8.9-13.133c-1,2.656-2.96,5.824-3.097,8.758 c-0.101,2.157-0.441,5.021-0.027,7.15c0.519,2.671,3.726,4.115,6.027,2.746c1.225-0.729,4.629-4.202,4.348-5.871")
    g(clip-path="url(#clip-i-6)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M187.875,36.625 c-0.038,2.211-1.71,5.399-0.759,7.632c0.507,1.189,2.333,2.444,3.634,2.243c1.274-0.198,2.249-1.642,2.972-2.628 c3.306-4.51,3.915-10.654,6.032-15.49c0.364-0.832,1.232-2.684,1.993-1.729c0.616,0.774,0.254,3.105,0.254,4.096   c0,2.546,0.075,5.072,0.277,7.588c0.095,1.165,0.977,8.441,2.78,6.787c0.568-0.521,0.66-2.521,1.037-3.375 c0.662-1.501,1.265-2.833,1.78-4.378c0.455-1.368,0.493-2.78,0.841-4.123c0.396-1.533,1.313-2.634,2.481-3.631 c0.607-0.519,1.822-2.489,2.574-2.596c1.492-0.211,1.468,2.062,1.479,3.065c0.029,2.819-0.817,5.475-0.875,8.287 c-0.05,2.433-1.136,5.21,1.659,6.469c1.748,0.788,4.611,0.347,6.207-0.733c1.779-1.206,1.851-3.669,3.259-4.985")
    g(clip-path="url(#clip-i-7)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M246.875,45.75 c0.975-0.226,1.987-5.846,2.28-6.984c0.51-1.986,0.736-4.023,1.001-6.082c0.495-3.854,0.7-7.925,1.587-11.692 c0.664-2.821,0.468-5.658,0.886-8.559c0.204-1.422,0.734-2.993,0.641-4.413c3.795-0.231,7.729-0.394,11.48-0.394 c2.512,0,4.832-0.887,7.409-0.625c1.724,0.175,2.035,1.505,0.111,1.625c-3.104,0.194-6.292,0-9.403,0 c-2.992,0-5.946-0.125-8.946-0.125c-4.722,0-9.186-0.552-12.89,2.781c-1.492,1.342-2.218,2.594-2.601,4.49 c-0.41,2.033,0.022,3.552,1.069,5.1")
    g(clip-path="url(#clip-i-8)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M281.063,27.063 c-2.014-1.454-5.584-1.249-7.506,0.372c-1.867,1.573-3.013,4.91-3.229,7.266c-0.275,2.998,1.042,6.353,3.183,8.404 c2.11,2.022,5.812,2.911,7.228-0.282c1.072-2.421,1.688-4.713,2.128-7.307c0.296-1.753,1.827-6.284-0.375-7.146 c-1.438-0.563-2.37,0.357-2.62,1.756c-0.303,1.693,1.113,2.646,2.374,3.433c2.082,1.298,5.175,0.941,7.628,0.941 c0.167,0,0.127,0,0.127,0")
    g(clip-path="url(#clip-i-9)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M304.375,26.375 c-2.951,0-6.837,1.228-9.024,3.278c-1.814,1.7-2.948,4.999-3.101,7.438c-0.173,2.775,0.207,5.545,2.306,7.531 c2.519,2.385,5.376-0.742,6.569-2.967c1.199-2.233,2.278-4.549,3.275-6.896c0.67-1.577,1.206-2.953,1.6-4.613 c0.191-0.81,0.265-2.935,1.231-3.133c0.162,1.008-0.618,2.625-0.854,3.609c-0.296,1.24-0.512,2.369-0.655,3.649 c-0.329,2.911-0.427,6.104-1.095,8.971c-1.314,5.649-1.282,12.289-3.229,17.758c-0.868,2.439-1.839,4.621-4.24,5.902 c-2.055,1.098-5.354,2.041-6.162-1.019c-0.313-1.182-0.365-3.476,0.027-4.664c0.57-1.728,2.333-2.631,3.479-3.911 c2.416-2.699,5.151-4.906,8.1-7.046c2.643-1.918,5.063-3.65,7.645-5.606c1.989-1.508,3.572-3.081,5.253-4.781")
    g(clip-path="url(#clip-i-10)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M326.5,26.125 c-0.574-0.57-3.143-0.403-3.997-0.256c-1.768,0.305-3.189,1.589-4.158,3.009c-1.513,2.216-2.108,5.02-2.095,7.594 c0.014,2.69,1.021,5.782,3.653,7.146c2.028,1.05,5.831,1.31,7.915-0.083c2.259-1.51,3.093-4.899,3.713-7.407 c0.783-3.164,0.815-5.433-1.782-7.729c-0.731-0.646-1.906-1.527-2.996-1.152c-1.171,0.403-1.19,2.185-1.003,3.378 c0.382,2.424,2.809,4.273,4.973,4.888c2.251,0.64,6.749,0.727,8.402-1.013")
    g(clip-path="url(#clip-i-11)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M338.5,34.125 c-0.841,0.486-0.733,3.838-0.888,4.854c-0.156,1.028-0.532,2.513-0.049,3.524c1.185,2.484,4.668,3.702,6.219,1.007 c1.427-2.48,2.417-5.883,3.367-8.675c0.466-1.37,1.265-2.761,1.705-4.078c0.38-1.133,0.758-3.273,1.727-4.141 c2.28-2.045,2.056,4.243,2.044,5.506c-0.028,2.955-0.752,5.899-0.159,8.815c0.222,1.094,0.434,2.571,1.06,3.557 c1.347,2.122,2.063-1.096,2.38-2.347c0.729-2.864,1.729-5.559,3.102-8.205c0.69-1.332,1.509-2.553,2.556-3.692 c0.656-0.713,1.945-2.409,2.785-2.791c2.182-0.991,1.149,5.736,0.902,7.069c-0.407,2.194-0.77,5.984,0.034,8.097 c1.075,2.823,3.579,3.954,6.091,2.372c1.26-0.793,2.027-1.431,2.75-2.747c0.558-1.018,0.91-2.169,1.625-3")
    g(clip-path="url(#clip-i-12)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M392.625,6.5 c2.086,1.606,1.131,4.841,0.25,6.847c-1.052,2.398-1.841,5.083-2.66,7.653c-1.348,4.23-2.682,8.302-3.465,12.75")
    g(clip-path="url(#clip-i-12)")
      path(fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M384.5,41.375 c-1.19-0.069-1.569,2.474-1.375,3.396c0.277,1.309,2.259,1.25,3.547,0.979c0.87-0.183,2.156-1.461,1.56-2.631 c-0.397-0.779-2.676-1.243-3.481-1.369")
              
            
!

CSS

              
                * {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(74,92,18,1);  
  background: linear-gradient(to bottom, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%, rgba(36,43,9,1) 100%);   
}





@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

// TREE

.x,
.inc,
.dec{
  display: flex;
  flex-flow: row wrap;
  align-items:center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.tree {
  width: 100%;
  height: 100%;  
  position: relative;
  
  svg path{
    fill:#fff;
  }
}

$w: 400;
$h: 400;
$n: 12;

.tree {
  max-width: $w + 0px;
  max-height: $h/2 + 0px;
  
  svg {
    animation: star_scale 3s infinite alternate ease-in-out;
  }
}

.inc {
  flex-flow: row-reverse nowrap;
}


@for $i from 1 through $n/2  {    
  .tree svg:nth-of-type(#{$i}) {
    width:  $w/$n/$i + 0px;
    height: $w/$n/$i + 0px;   
  }  
}

.tree svg {
  animation-delay: randomNum( 1, $n) + 0s;  
}





.tree .mid svg {
  width:  1.25*$w/$n + 0px;
  height: 1.25*$w/$n + 0px;   
  
}


.tree .star+.x {
  .mid svg { 
    animation: star_scale-mid 8s 0s infinite alternate ease-in-out;
    
    path {
      fill: #fff9b8;
      stroke: #fce495;
    }
  }
}


@keyframes star_scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale( randomNum(0.75, 1) );
  }
}

@keyframes star_scale-mid {
  from {
    transform: scale(1);
  }
  to {
    transform: scale( randomNum(1.25, 1.35) );
  }
}





// GLOWING

.star {
    width: 100px;
    height: 100px;
    position: absolute;
    top:10px;
    left:50%;
    margin-left: -50px;
    transform-origin: 50px 10px;
    animation: rotate 36s ease-in-out infinite;
  
    i {
      opacity: 1;
      position: absolute;
      width: 1px;
      height: 20%;
      display: block;
      top: 0%;
      left:50%;
      margin-left: -1px;

      transform-origin: 50% 50%;

      transition: all .3s ease-in-out;

      background:linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(215, 249, 111) 100%);
      box-shadow: 0 0 10px rgb(215, 249, 111);

      opacity: 1;

      transform-style: preserve-3d;

      animation: anim 5s ease-in-out infinite;
    }  
}


$star-n: 15;
$rad: 360;
$deg: $rad/$n;

@for $i from 0 through $star-n - 1 {
  .star i:nth-of-type(#{$i + 1}) { 
    transform: rotateZ($deg * $i + 0deg) perspective(6px) rotateX($deg + 0deg );    
  }
}

@keyframes rotate {
  50% {
    transform:rotate($rad + 0deg) scale(3);
  }
}


// SNOW

.snowflakes {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  z-index: 888;
  display: block;
  
    span {
      position: absolute;
      animation: snowflake_y 10s infinite linear;
      will-change: transform;
      user-select: none;
      pointer-events: none;
     
      i {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
       
        animation: snowflake_x 1s infinite alternate ease-in-out;
       
        &:before {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          content: '';
          background-size: 100% 100%; 
         
          animation: snowflake_rotation 2s infinite linear;
        }
       
     }
     
  }
  
}


$snow-w: 20;
$snow-h: $snow-w;
$snow-n: 15;


$snow-height: 100vh;
$snow-dur: 20;



@for $i from 1 through $snow-n {    
  .snowflakes span:nth-of-type(#{$i}) {
    animation-delay: random(1) + 0s;
    animation-duration: randomNum(10, 30) + 0s;
    left: random(100) + 0%;
    margin-top: -1*random(1)*$snow-w + 0px;
    width: $snow-w + 0px;
    height: $snow-w + 0px;
    z-index: 10099;
    opacity: random(1);
    
    i {
      animation-name: snowflake_x_#{$i};
      animation-delay: random(1) + 0s;
    }
  }  
}



$bg-collection: (
  "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='36.283' height='36.283'%3e%3cpath d='M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z' fill='%23ffffff'/%3e%3c/svg%3e",
  "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='32.813' height='32.813'%3e%3cpath d='M29.106 24.424a.781.781 0 0 1-.781.781h-3.119v3.119a.782.782 0 0 1-1.562 0v-4.682h4.682c.43.001.78.351.78.782zM4.673 9.352h4.682V4.671a.781.781 0 0 0-1.563 0V7.79H4.673a.781.781 0 0 0 0 1.562zM3.708 24.24c0 .431.35.781.781.781H7.61v3.12a.78.78 0 1 0 1.562 0v-4.683H4.489a.782.782 0 0 0-.781.782zM28.923 8.39a.78.78 0 0 0-.781-.781h-3.121V4.488a.781.781 0 0 0-1.562 0v4.684h4.684a.783.783 0 0 0 .78-.782zm3.889 8.017c0 .431-.35.781-.781.781h-3.426l1.876 1.873a.784.784 0 0 1 0 1.107.791.791 0 0 1-.554.228.773.773 0 0 1-.55-.228l-2.979-2.98h-2.995a6.995 6.995 0 0 1-1.728 3.875h5.609a.781.781 0 0 1 0 1.562h-4.666v4.667a.782.782 0 0 1-1.562 0v-5.61a7 7 0 0 1-3.866 1.719v2.995l2.978 2.98c.306.305.306.8 0 1.104a.78.78 0 0 1-1.104 0l-1.874-1.876v3.427a.781.781 0 0 1-1.562 0v-3.427l-1.875 1.876a.78.78 0 1 1-1.105-1.104l2.979-2.98v-2.995a7.016 7.016 0 0 1-3.865-1.717v5.608a.781.781 0 0 1-1.562 0v-4.667H5.535a.781.781 0 0 1 0-1.562h5.607a7.022 7.022 0 0 1-1.728-3.875H6.417l-2.979 2.979a.784.784 0 0 1-1.104 0 .781.781 0 0 1 0-1.106l1.874-1.873H.782a.78.78 0 1 1-.001-1.563h3.426L2.333 13.75a.783.783 0 0 1 1.105-1.106l2.979 2.979h2.995a6.996 6.996 0 0 1 1.72-3.866H5.533a.781.781 0 0 1 0-1.562h4.666V5.528a.781.781 0 0 1 1.562 0v5.599a6.995 6.995 0 0 1 3.865-1.717V6.415l-2.978-2.979a.782.782 0 0 1 1.105-1.105l1.874 1.875V.781a.78.78 0 1 1 1.562 0v3.426l1.875-1.875a.777.777 0 0 1 1.104 0 .78.78 0 0 1 0 1.105l-2.978 2.98v2.996a7.021 7.021 0 0 1 3.866 1.718V5.532a.78.78 0 1 1 1.562 0v4.666h4.666a.78.78 0 1 1 0 1.562h-5.599a7 7 0 0 1 1.718 3.866h2.995l2.979-2.979a.783.783 0 0 1 1.106 1.106l-1.876 1.874h3.427a.777.777 0 0 1 .778.78zm-11.006-.782a5.457 5.457 0 0 0-4.618-4.617c-.257-.037-.514-.079-.781-.079-.268 0-.524.042-.781.079a5.458 5.458 0 0 0-4.618 4.617c-.038.257-.079.514-.079.781s.041.522.079.781a5.455 5.455 0 0 0 4.618 4.616c.257.036.514.079.781.079s.524-.043.781-.079a5.457 5.457 0 0 0 4.618-4.616c.037-.259.079-.515.079-.781s-.043-.524-.079-.781z' fill='%23ffffff'/%3e%3c/svg%3e",
  "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='35.79' height='35.79'%3e%3cpath d='M7.161 22.223l.026-.047.865.5-.026.047a.503.503 0 0 1-.434.25c-.019 0-.034-.013-.053-.016l-.355-.205a.493.493 0 0 1-.023-.529zM9.969 8.988l2.785.001 1.393-2.414a.502.502 0 0 0-.869-.499l-1.103 1.913-2.208-.001a.5.5 0 1 0 .002 1zm15.854 17.813h-2.785l-1.393 2.411a.499.499 0 0 0 .436.75c.172 0 .34-.09.434-.25l1.104-1.911h2.207c.274 0 .5-.224.5-.5a.505.505 0 0 0-.503-.5zM23.038 8.99h2.785a.5.5 0 0 0 0-1h-2.207l-1.105-1.913a.5.5 0 0 0-.868.5l1.395 2.413zM12.754 26.801H9.967a.5.5 0 0 0 0 1h2.209l1.105 1.912a.496.496 0 0 0 .682.184.5.5 0 0 0 .184-.684l-1.393-2.412zm-7.218-6.309a.502.502 0 0 0 .685-.184l1.391-2.413-1.394-2.413a.5.5 0 0 0-.867.5l1.104 1.913-1.104 1.913a.5.5 0 0 0 .185.684zM30.254 15.3a.505.505 0 0 0-.685.183l-1.392 2.412 1.395 2.414a.501.501 0 0 0 .867-.5l-1.104-1.914 1.104-1.912a.5.5 0 0 0-.185-.683zm3.138 11.542a.501.501 0 0 1-.683.184l-.98-.565-2.137 1.231a.516.516 0 0 1-.5 0l-2.385-1.377a.502.502 0 0 1-.25-.433v-.854h-4.441l-2.225 3.852.736.428c.154.088.25.254.25.432l.001 2.755a.5.5 0 0 1-.25.433l-2.133 1.229v1.136c0 .274-.225.5-.5.5s-.5-.226-.5-.5v-1.136l-2.136-1.23a.5.5 0 0 1-.25-.433l.001-2.755c0-.178.096-.344.25-.432l.738-.427-2.224-3.849H9.332l.002.851a.505.505 0 0 1-.25.435l-2.387 1.377a.5.5 0 0 1-.5 0L4.06 26.46l-.982.567a.5.5 0 0 1-.5-.867l.982-.567.001-2.465c0-.179.097-.344.25-.434l2.388-1.377a.497.497 0 0 1 .5 0l.736.426 2.221-3.848-2.222-3.849-.737.426a.51.51 0 0 1-.5 0l-2.386-1.377a.5.5 0 0 1-.25-.434l.002-2.464-.983-.567a.501.501 0 0 1-.184-.683.502.502 0 0 1 .684-.183l.983.568 2.134-1.233a.5.5 0 0 1 .5 0l2.385 1.379c.156.089.25.255.25.433v.85h4.443l2.223-3.846-.74-.427a.501.501 0 0 1-.25-.434l.002-2.755c0-.178.096-.343.25-.433l2.135-1.233V.5a.5.5 0 0 1 1 0v1.135l2.134 1.231c.154.089.25.254.25.434l-.002 2.755a.503.503 0 0 1-.25.433l-.733.425 2.224 3.849h4.44l-.002-.851c0-.179.096-.344.25-.434l2.388-1.378a.502.502 0 0 1 .5 0l2.136 1.233.982-.568a.5.5 0 1 1 .5.866l-.983.568v2.464a.503.503 0 0 1-.25.433l-2.388 1.378a.5.5 0 0 1-.5 0l-.735-.426-2.222 3.849 2.223 3.849.734-.425a.506.506 0 0 1 .5 0l2.389 1.375c.154.09.25.255.25.435l-.002 2.462.982.568c.24.137.321.444.182.682zm-2.165-1.828l.001-1.597-1.888-1.087-.734.424-.348.201-.301.173-.5.289v2.179l1.885 1.088 1.386-.802.498-.286.001-.582zm-3.736-11.467l-.531-.307-2.283 1.318-2.443 3.337 2.442 3.337 2.283 1.316.531-.306-2.514-4.348 2.515-4.347zm-7.712 16.478l-.762-.438-.339-.194-.283-.166-.5-.289-.5.289-.279.162-.349.2-.757.437-.001 2.177 1.386.797.501.289.499-.287 1.386-.798-.002-2.179zM16.008 5.767l.736.425.371.214.279.16.5.288.5-.289.281-.163.367-.212.732-.424.002-2.178-1.381-.797-.502-.289-.498.287-1.385.8-.002 2.178zm6.52 14.227l-1.535-2.099 1.535-2.098.732-1-1.232.134-2.585.281-1.048-2.379-.5-1.133-.5 1.134-1.049 2.379-2.585-.281-1.232-.134.732 1 1.536 2.097-1.536 2.098-.732 1 1.232-.134 2.585-.281 1.049 2.379.5 1.134.5-1.134 1.048-2.379 2.585.281 1.232.134-.732-.999zm8.2-10.084l-1.386-.8-1.887 1.089v1.279l.002.32v.577l.5.289.28.163.367.213.732.424 1.888-1.089v-2.178l-.496-.287zM18.927 7.413l-.532.307v2.637l1.667 3.784 4.111-.447 2.283-1.317-.002-.613h-5.02l-2.507-4.351zm-9.594 4.348v.614l2.283 1.318 4.111.447 1.668-3.785V7.719l-.531-.306-2.509 4.347-5.022.001zm-2.15 1.279l.37-.213.279-.162.5-.289V10.2L6.446 9.11l-1.384.8-.499.289v.578l-.002 1.599 1.885 1.088.737-.424zm1.119 9.205l.53.306 2.281-1.316 2.443-3.339-2.442-3.337-2.281-1.317-.531.307 2.511 4.348-2.511 4.348zm-1.115-.069l-.026.047a.493.493 0 0 0 .023.529l-.734-.424-1.887 1.089-.001 1.599v.578l.5.288 1.386.8 1.887-1.088v-1.278l-.002-.321v-.577l-.5-.289-.293-.169c.02.002.035.017.055.017a.5.5 0 0 0 .433-.25l.026-.047-.867-.504zm9.679 6.202l.529-.306v-2.637l-1.668-3.785-4.111.447-2.283 1.316.002.611 5.021.002 2.51 4.352zm9.591-4.349v-.612L24.174 22.1l-4.111-.447-1.667 3.783v2.639l.531.307 2.512-4.352h5.018v-.001z' fill='%23ffffff'/%3e%3c/svg%3e",
  "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='32.815' height='32.815'%3e%3cpath d='M4.581 23.55h4.681v4.681a.78.78 0 1 1-1.562 0v-3.118H4.581a.781.781 0 0 1 0-1.563zM29.016 8.481a.781.781 0 0 0-.781-.781h-3.119V4.582a.781.781 0 0 0-1.562 0v4.681h4.682c.429 0 .78-.35.78-.782zm-24.252.598l4.683-.001V4.395a.781.781 0 0 0-1.562 0v3.121l-3.121.001a.781.781 0 0 0 0 1.562zm23.655 14.287h-4.685l.002 4.684a.78.78 0 1 0 1.562 0l-.002-3.121h3.122a.781.781 0 0 0 .001-1.563zm4.394-6.96a.78.78 0 0 1-.781.781h-3.426l1.876 1.875a.782.782 0 0 1-1.104 1.105l-2.979-2.979h-1.986L17.19 24.41v1.987l2.977 2.979a.781.781 0 0 1-1.103 1.106l-1.874-1.875v3.426a.78.78 0 1 1-1.562 0v-3.426l-1.875 1.875a.782.782 0 0 1-1.105-1.105l2.978-2.979V24.41l-7.219-7.22H6.418l-2.98 2.98a.777.777 0 0 1-1.103 0 .781.781 0 0 1 0-1.106L4.21 17.19H.783a.78.78 0 1 1 0-1.562h3.426l-1.876-1.875a.782.782 0 1 1 1.106-1.105l2.979 2.979h1.989l7.219-7.218v-1.99L12.648 3.44a.782.782 0 1 1 1.106-1.105l1.874 1.874V.781a.782.782 0 0 1 1.563 0v3.426l1.875-1.875a.783.783 0 0 1 1.106 1.105l-2.979 2.979v1.99l7.216 7.218h1.992l2.979-2.979a.782.782 0 0 1 1.105 1.105l-1.876 1.874h3.427a.781.781 0 0 1 .777.782zm-10.613.782l.778-.78-.781-.782-5.009-5.008-.781-.781-.781.781-5.01 5.008-.781.781.781.781 5.01 5.011.782.781.78-.779 5.012-5.013zm5.863 4.646a.782.782 0 0 0-.781-.781h-6.229v6.228a.78.78 0 1 0 1.562 0v-4.665h4.666a.782.782 0 0 0 .782-.782zm-.001-10.855a.782.782 0 0 0-.781-.781h-4.664V5.532a.782.782 0 0 0-1.562 0v6.228h6.227a.78.78 0 0 0 .78-.781zm-23.318 0c0 .432.35.781.781.781h6.228V5.532a.781.781 0 0 0-1.562 0v4.666H5.525a.781.781 0 0 0-.781.781zm.002 10.855c0 .432.35.781.781.781h4.664v4.665a.78.78 0 1 0 1.562 0v-6.228H5.527a.783.783 0 0 0-.781.782z' fill='%23ffffff'/%3e%3c/svg%3e",
  "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='37.794' height='37.794'%3e%3cpath d='M30.638 17.313l-.914 1.584.915 1.585a.78.78 0 1 1-1.352.78l-1.366-2.366 1.366-2.365a.782.782 0 0 1 1.067-.286c.372.215.5.692.284 1.068zM11.65 11.08l2.733.002 1.367-2.367a.78.78 0 0 0-1.352-.781l-.915 1.585-1.831-.002h-.001a.78.78 0 0 0-.001 1.563zm14.491 15.633h-2.733l-1.365 2.365a.78.78 0 1 0 1.352.78l.914-1.584h1.831a.781.781 0 0 0 .001-1.561zm-4.1-17.998l1.367 2.367h2.733a.78.78 0 1 0 0-1.562h-1.833l-.915-1.585a.78.78 0 0 0-1.352.78zM15.75 29.08l-1.368-2.366h-2.733a.781.781 0 0 0 0 1.562h1.832l.917 1.585c.146.25.409.391.677.391a.779.779 0 0 0 .675-1.172zm-8.313-7.531a.78.78 0 0 0 1.067-.284L9.87 18.9l-1.367-2.368a.781.781 0 0 0-1.351.781l.916 1.587-.914 1.584a.776.776 0 0 0 .283 1.065zm27.827 6.798a.784.784 0 0 1-1.067.285l-.89-.515-2.096 1.209a.793.793 0 0 1-.391.105.762.762 0 0 1-.391-.105l-2.484-1.435a.78.78 0 0 1-.391-.676l-.002-2.417-2.408-1.392a7.714 7.714 0 0 1-5.467 3.168v2.773l2.093 1.208a.78.78 0 0 1 .391.676l.001 2.868c0 .28-.149.537-.392.676l-2.093 1.205v1.032a.781.781 0 0 1-1.562 0V35.98l-2.095-1.207a.78.78 0 0 1-.391-.676l.001-2.868c0-.28.15-.537.391-.676l2.094-1.206v-2.773a7.718 7.718 0 0 1-5.468-3.168l-2.408 1.392.002 2.415c0 .281-.15.539-.391.676l-2.487 1.437a.785.785 0 0 1-.782 0l-2.095-1.209-.893.518a.782.782 0 0 1-.782-1.354l.893-.517.001-2.414a.78.78 0 0 1 .391-.677l2.487-1.434a.774.774 0 0 1 .781 0l2.093 1.208 2.407-1.39a7.655 7.655 0 0 1 0-6.317l-2.406-1.39-2.096 1.209a.772.772 0 0 1-.782 0l-2.485-1.434a.786.786 0 0 1-.391-.676l.002-2.416-.894-.517a.78.78 0 0 1-.285-1.066.788.788 0 0 1 1.07-.283l.893.514 2.093-1.208a.774.774 0 0 1 .781 0L9.851 9.91c.24.14.391.398.391.675L10.24 13l2.408 1.392a7.712 7.712 0 0 1 5.468-3.167V8.45L16.02 7.242a.78.78 0 0 1-.391-.676l.002-2.87c0-.279.15-.538.391-.675l2.094-1.208V.781a.781.781 0 0 1 1.562 0v1.032l2.093 1.206a.785.785 0 0 1 .391.677l-.002 2.87c0 .28-.149.536-.391.674l-2.091 1.208v2.772a7.708 7.708 0 0 1 5.467 3.167l2.409-1.392-.002-2.416c0-.28.149-.539.391-.676l2.487-1.436c.24-.14.539-.14.781 0l2.095 1.208.894-.514a.78.78 0 1 1 .781 1.352l-.894.516v2.417c0 .279-.15.538-.391.675l-2.487 1.436a.785.785 0 0 1-.782 0l-2.092-1.209-2.408 1.39c.436.967.684 2.032.684 3.158a7.65 7.65 0 0 1-.684 3.158l2.408 1.391 2.091-1.206a.782.782 0 0 1 .78 0l2.488 1.432c.24.141.392.398.392.677l-.002 2.414.893.517a.783.783 0 0 1 .287 1.068zm-6.147-16.251l.001.9.78.453.921.531 1.706-.982v-1.965l-.78-.451-.923-.533-1.707.983.002 1.064zm-20.443-.002l.002-1.063-1.706-.985-.922.535-.778.451-.001.902-.001 1.063 1.703.982.924-.533.779-.451v-.901zm0 13.604l-.001-.899-.781-.451-.919-.533-1.706.982-.001 1.064v.901l.781.451.923.533 1.707-.982-.003-1.066zm15.109-3.076c.315-.413.586-.864.789-1.351a6.121 6.121 0 0 0 0-4.748 6.175 6.175 0 0 0-.789-1.35 6.158 6.158 0 0 0-4.106-2.375 6.48 6.48 0 0 0-.781-.056c-.266 0-.525.022-.781.056a6.149 6.149 0 0 0-4.106 2.375 6.128 6.128 0 0 0-.789 1.35 6.104 6.104 0 0 0-.479 2.374 6.1 6.1 0 0 0 1.268 3.725 6.15 6.15 0 0 0 4.106 2.374c.256.031.516.056.781.056s.525-.022.781-.056a6.142 6.142 0 0 0 4.106-2.374zM17.19 6.113l.924.531.781.452.781-.452.919-.531.002-1.968-.921-.531-.784-.452-.779.451-.922.532-.001 1.968zm3.408 25.57l-.921-.532-.781-.452-.781.452-.922.532-.001 1.966.923.531.782.451.78-.449.922-.533-.001-1.966zm11.925-5.819l.001-1.063-1.707-.981-.919.529-.782.451v.901l.001 1.065 1.702.981.924-.533.778-.449.002-.901z' fill='%23ffffff'/%3e%3c/svg%3e"
);

@for $i from 0 to length($bg-collection) {
  span:nth-of-type(#{length($bg-collection)}n+#{$i+1}) i:before {
      background-image: url( nth($bg-collection, $i+1) );
    }
}

@for $i from 1 through $snow-n { 
  @keyframes snowflake_x_#{$i} {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX( random($snow-w) + 0px );
    }
  }
}

@keyframes snowflake_y {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY($snow-height);
  }
}

@keyframes snowflake_rotation {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate($rad + 0deg);
  }
}






// LETTERS

$letter: 12;


#letter {
  position: absolute;
  z-index: 100;
  top: 1vh;
  left: 50%;
  transform:translateX(-50%);
}
.stroke {
  
  
  svg {
    width: 100%;
  }
  
  path {
    fill:none; 
    stroke:#fff;
    stroke-width: 7; 
    animation: dash $letter + 0s linear forwards infinite; 
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
  }
}


@for $i from 1 through $letter {    
  .stroke g:nth-of-type(#{$i}) path {
    animation-delay: $i + 0s;
  }
  
  .stroke g:nth-of-type(#{$letter+1}) path {
    animation-delay: $letter+1 + 0s;
  }
}


@keyframes dash {
  0% {
    stroke-dashoffset: 2200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}











// HELP

// @for $i from 1 through $n/2  {    
//   svg:nth-of-type(#{$i}) {
//     width:  2*$w/$n/($n/2 + 1 - $i) + 0px;
//     height: 2*$w/$n/($n/2 + 1 - $i) + 0px;
//   }  
// }

// @for $j from $n/2 + 1 through $n {
//   svg:nth-of-type(#{$j}) {
//     width:  2*$w/$n/($j - $n/2) + 0px;
//     height: 2*$w/$n/($j - $n/2) + 0px;
//   }
// }



// span:nth-of-type(1){
//   animation-delay: 0.772625s;
//   animation-duration: 5.89333s;
//   left: 88.29%;
//   margin-top: -14.1421px;
//   width: 10px;
//   height: 10px;
//   z-index: 10099;
//   opacity: 0.28;
// }
              
            
!

JS

              
                
              
            
!
999px

Console