Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                - @snow = 30
%div
  %svg{'class'=>'icon-snow', :fill => "none", :height => "271", :viewbox => "0 0 752 271", :width => "752", :xmlns => "http://www.w3.org/2000/svg"}
    %path#Line1{:d => "M21 1L15.6071 11.0167C12.4344 16.9095 12.5546 24.0282 15.9242 29.8106L20.0427 36.8782C22.8307 41.6624 21.4247 47.7894 16.8298 50.8794V50.8794C11.6029 54.3946 10.625 61.6885 14.7416 66.4562L17.266 69.38C21.7256 74.5451 21.7854 82.1808 17.4072 87.4151L15.4265 89.7831C10.5868 95.5693 10.7219 104.029 15.7437 109.658L17.512 111.64C21.7512 116.391 21.6625 123.593 17.3075 128.238V128.238C13.3378 132.473 12.8693 138.906 16.1835 143.672L18.3554 146.794C22.3608 152.553 22.4172 160.181 18.4975 165.998L17.257 167.839C13.0954 174.016 12.6619 181.978 16.1284 188.57L19.7134 195.387C22.9616 201.564 22.4993 209.035 18.5146 214.764V214.764C13.7662 221.592 14.098 230.734 19.3287 237.199L20.9605 239.216C25.9358 245.365 27.2547 253.701 24.4209 261.085L21 270", :stroke => "black"}
    %path#Line2{:d => "M37.5 1L43.4609 9.33804C47.0298 14.3303 45.7313 21.2889 40.6021 24.6581L39.9829 25.0649C34.2522 28.8291 33.758 37.048 38.9962 41.4719L41.058 43.2132C45.4348 46.9095 44.8633 53.8178 39.9385 56.7446V56.7446C34.6501 59.8875 34.4728 67.4805 39.6088 70.8667L41.2783 71.9674C47.1266 75.8233 46.8775 84.4842 40.8173 87.9976V87.9976C34.1887 91.8405 34.6678 101.566 41.642 104.738L44.3583 105.974C51.3933 109.175 53.0005 118.452 47.4519 123.833L44.2633 126.924C40.1744 130.889 38.8956 136.936 41.0294 142.217L44.0048 149.581C47.638 158.572 45.5314 168.865 38.6579 175.706L34.2806 180.063C28.8535 185.465 27.8909 193.905 31.9624 200.389L39.5513 212.477C41.7437 215.969 39.8812 220.583 35.879 221.575V221.575C31.2055 222.733 29.6871 228.618 33.2172 231.892L44.0137 241.907C49.5741 247.065 50.0215 255.71 45.0232 261.414L37.5 270", :stroke => "black"}
    %path#Line3{:d => "M59.1695 1L53.8663 22.7407C52.704 27.5056 55.4565 32.3509 60.1446 33.7923V33.7923C65.8968 35.5609 68.4628 42.2584 65.3649 47.4177L62.5293 52.1403C59.0299 57.9684 61.7972 65.5393 68.2302 67.737V67.737C75.4044 70.1879 77.8087 79.1272 72.8318 84.8463L70.0618 88.0293C65.3364 93.4594 65.6976 101.641 70.8831 106.633L71.493 107.22C77.7366 113.232 77.2952 123.356 70.5521 128.801L60.008 137.315C51.8815 143.877 54.9339 156.93 65.1096 159.287V159.287C76.3929 161.9 78.4163 177.154 68.1546 182.524L65.8362 183.738C59.1157 187.255 58.0782 196.45 63.8461 201.376L68.1391 205.043C72.8774 209.09 71.1366 216.791 65.1183 218.407V218.407C59.2815 219.973 57.4106 227.325 61.7884 231.491L71.1551 240.406C75.9926 245.009 77.2037 252.257 74.1259 258.183L68.5085 269", :stroke => "black"}
    %path#Line4{:d => "M91.5949 1L87.8397 6.11553C84.3351 10.8897 87.052 17.6844 92.8821 18.726V18.726C99.6674 19.9382 101.846 28.5908 96.4446 32.8721L94.4851 34.4252C89.2389 38.5832 90.1046 46.7865 96.103 49.7579L98.0033 50.6992C104.211 53.7741 105.776 61.9207 101.15 67.0769L97.0323 71.6659C91.0211 78.3657 94.7411 89.0625 103.612 90.5867V90.5867C114.506 92.4585 116.679 107.157 106.793 112.101L96.1145 117.44C87.1174 121.94 90.319 135.5 100.378 135.5V135.5C110.101 135.5 113.585 148.348 105.195 153.26L92.8496 160.487C84.6728 165.274 83.9027 176.8 91.3701 182.632L95.626 185.956C104.369 192.785 104.383 206.007 95.6536 212.854L94.944 213.41C86.9439 219.685 85.9389 231.511 92.6016 239.191V239.191C96.8265 244.061 98.1969 250.889 96.0918 256.983L91.5949 270", :stroke => "black"}
    %path#Line5{:d => "M119 1L122.291 3.31877C130.816 9.32473 130.648 22.0195 121.967 27.7973L114.926 32.4832C106.396 38.1604 109.095 51.3318 119.171 53.1966L125.707 54.4064C133.239 55.8005 135.355 65.5864 129.072 69.9679V69.9679C124.17 73.387 124.144 80.6342 129.023 84.0876L135.05 88.3544C144.23 94.8526 142.215 109.01 131.587 112.689L121.793 116.079C109.709 120.262 108.727 136.973 120.239 142.541L126.618 145.627C134.614 149.495 134.773 160.827 126.889 164.917V164.917C119.676 168.659 119.031 178.73 125.708 183.361L130.14 186.434C136.849 191.086 137.73 200.669 131.982 206.467L125.818 212.685C122.481 216.051 123.457 221.703 127.729 223.756V223.756C132.822 226.202 132.973 233.398 127.989 236.056L119.623 240.518C114.631 243.181 112.259 249.035 113.991 254.421L119 270", :stroke => "black"}
    %path#Line6{:d => "M153.5 1L145.877 23.948C144.171 29.082 146.052 34.726 150.496 37.811V37.811C155.177 41.0604 156.983 47.1182 154.847 52.4009L147.012 71.7777C144.667 77.5772 146.659 84.2273 151.806 87.7824V87.7824C157.346 91.6085 159.174 98.9583 156.073 104.934L147.818 120.837C145.237 125.809 147.51 131.923 152.712 134.003V134.003C157.567 135.945 159.933 141.452 157.998 146.311L150.992 163.9C148.154 171.026 148.719 179.057 152.527 185.715L155.986 191.763C159.281 197.526 158.534 204.748 154.128 209.713L151.141 213.078C146.755 218.022 147.518 225.656 152.797 229.632L153.748 230.348C160.176 235.189 159.086 245.143 151.763 248.479V248.479C144.8 251.652 143.382 260.927 149.078 266.035L153.5 270", :stroke => "black"}
    %path#Line7{:d => "M166.649 1L171.619 10.2573C175.586 17.6446 176.279 26.3546 173.532 34.2766L169.576 45.6864C167.76 50.9227 168.827 56.7278 172.386 60.9765L175.349 64.514C179.265 69.1892 178.681 76.147 174.04 80.1043V80.1043C169.808 83.714 168.896 89.8976 171.908 94.575L179.396 106.205C182.679 111.304 179.018 118.015 172.954 118.015V118.015C166.709 118.015 163.087 125.084 166.735 130.153L171.712 137.069C175.224 141.95 174.593 148.674 170.234 152.816L169.373 153.633C164.812 157.967 163.883 164.891 167.141 170.273L170.981 176.619C175.218 183.619 175.341 192.363 171.303 199.48L165.51 209.69C161.24 217.214 163.339 226.747 170.373 231.784V231.784C177.268 236.721 179.44 246.002 175.451 253.486L166.649 270", :stroke => "black"}
    %path#Line8{:d => "M184.738 1L181.654 32.1194C181.023 38.4864 182.814 44.8575 186.672 49.9621V49.9621C191.812 56.7636 193.202 65.6877 190.375 73.7304L187.754 81.1889C185.787 86.7839 185.523 92.8362 186.995 98.5812L192.069 118.389C193.894 125.512 193.039 133.057 189.666 139.592L185.201 148.244C182.424 153.626 182.912 160.113 186.465 165.019V165.019C190.071 169.998 190.516 176.6 187.61 182.018L176.605 202.538C172.886 209.474 175.168 218.106 181.83 222.297L186.337 225.133C193.288 229.506 193.517 239.556 186.773 244.242V244.242C183.061 246.82 181.212 251.339 182.051 255.779L184.738 270", :stroke => "black"}
    %path#Line9{:d => "M211.364 1L206.195 11.0564C203.162 16.9582 203.278 23.985 206.504 29.7838L210.537 37.0345C213.178 41.7829 211.812 47.759 207.37 50.8884V50.8884C202.314 54.4509 201.356 61.5621 205.29 66.3353L207.806 69.3884C212.105 74.6043 212.163 82.1181 207.946 87.4001L206.032 89.7978C201.368 95.6392 201.5 103.967 206.346 109.658L208.044 111.651C212.133 116.453 212.046 123.537 207.841 128.236V128.236C204.013 132.514 203.557 138.838 206.732 143.62L208.841 146.797C212.693 152.599 212.748 160.131 208.98 165.989L207.792 167.838C203.794 174.054 203.375 181.92 206.691 188.525L210.16 195.436C213.266 201.623 212.819 208.999 208.99 214.766V214.766C204.417 221.654 204.741 230.69 209.794 237.233L211.317 239.204C216.099 245.396 217.368 253.609 214.677 260.955L211.364 270", :stroke => "black"}
    %path#Line10{:d => "M228.5 1L234.461 9.33804C238.03 14.3303 236.731 21.2889 231.602 24.6581L230.983 25.0649C225.252 28.8291 224.758 37.048 229.996 41.4719L232.058 43.2132C236.435 46.9095 235.863 53.8178 230.938 56.7446V56.7446C225.65 59.8875 225.473 67.4805 230.609 70.8667L232.278 71.9674C238.127 75.8233 237.878 84.4842 231.817 87.9976V87.9976C225.189 91.8405 225.668 101.566 232.642 104.738L235.358 105.974C242.393 109.175 244 118.452 238.452 123.833L235.263 126.924C231.174 130.889 229.896 136.936 232.029 142.217L235.005 149.581C238.638 158.572 236.531 168.865 229.658 175.706L225.281 180.063C219.854 185.465 218.891 193.905 222.962 200.389L230.551 212.477C232.744 215.969 230.881 220.583 226.879 221.575V221.575C222.205 222.733 220.687 228.618 224.217 231.892L235.014 241.907C240.574 247.065 241.022 255.71 236.023 261.414L228.5 270", :stroke => "black"}
    %path#Line11{:d => "M250.5 1L245.132 22.6351C243.937 27.4478 246.726 32.3517 251.472 33.7864V33.7864C257.305 35.5493 259.899 42.348 256.723 47.5479L253.986 52.0286C250.409 57.8855 253.199 65.5481 259.705 67.733V67.733C266.961 70.1697 269.379 79.2197 264.305 84.9507L261.592 88.0162C256.801 93.4279 257.165 101.664 262.414 106.632L263.036 107.22C269.35 113.197 268.907 123.38 262.098 128.786L251.458 137.231C243.221 143.77 246.319 156.959 256.574 159.294V159.294C267.896 161.872 269.967 177.211 259.641 182.524L257.241 183.758C250.474 187.24 249.437 196.49 255.266 201.383L259.553 204.983C264.363 209.022 262.621 216.805 256.549 218.407V218.407C250.658 219.962 248.784 227.393 253.232 231.555L262.686 240.399C267.594 244.992 268.822 252.302 265.682 258.245L260 269", :stroke => "black"}
    %path#Line12{:d => "M282 1L278.248 6.04595C274.691 10.8312 277.417 17.6875 283.289 18.7234V18.7234C290.121 19.9286 292.301 28.6552 286.837 32.9309L284.935 34.4188C279.649 38.5556 280.514 46.798 286.544 49.7472L288.495 50.7013C294.75 53.7608 296.321 61.9665 291.638 67.12L287.581 71.5843C281.492 78.2848 285.217 89.0676 294.143 90.5819V90.5819C305.093 92.4395 307.257 107.23 297.299 112.147L286.677 117.391C277.62 121.863 280.803 135.5 290.904 135.5V135.5C300.669 135.5 304.136 148.427 295.681 153.314L283.291 160.476C275.045 165.242 274.274 176.85 281.815 182.666L286.082 185.956C294.894 192.751 294.908 206.041 286.109 212.855L285.39 213.412C277.32 219.661 276.295 231.537 283.032 239.205V239.205C287.302 244.065 288.678 250.913 286.542 257.019L282 270", :stroke => "black"}
    %path#Line13{:d => "M309.559 1L312.821 3.33278C321.265 9.37051 321.097 21.9778 312.495 27.7883L305.449 32.5479C297.009 38.2496 299.714 51.3157 309.725 53.1963L316.069 54.388C323.588 55.8005 325.719 65.5538 319.475 69.9738V69.9738C314.618 73.4114 314.593 80.6092 319.425 84.081L325.368 88.3505C334.484 94.9005 332.46 109 321.869 112.721L312.352 116.065C300.322 120.291 299.335 136.922 310.781 142.542L317.06 145.624C325.004 149.525 325.164 160.793 317.332 164.917V164.917C310.175 168.685 309.53 178.688 316.145 183.344L320.505 186.413C327.165 191.101 328.044 200.637 322.353 206.463L316.248 212.714C312.955 216.086 313.927 221.692 318.164 223.758V223.758C323.22 226.223 323.372 233.373 318.426 236.051L310.198 240.505C305.252 243.182 302.904 248.994 304.603 254.355L309.559 270", :stroke => "black"}
    %path#Line14{:d => "M344.968 1L337.54 24.1035C335.911 29.1713 337.739 34.7113 342.065 37.8141V37.8141C346.619 41.0809 348.377 47.0207 346.335 52.2399L338.625 71.9417C336.38 77.6791 338.321 84.2083 343.336 87.7874V87.7874C348.731 91.6379 350.516 98.8455 347.54 104.769L339.366 121.043C336.904 125.944 339.125 131.905 344.195 133.999V133.999C348.93 135.956 351.239 141.333 349.396 146.114L342.524 163.942C339.779 171.064 340.329 179.035 344.024 185.713L347.407 191.824C350.595 197.584 349.864 204.719 345.575 209.713L342.633 213.138C338.373 218.099 339.127 225.615 344.287 229.631L345.3 230.419C351.575 235.303 350.487 245.09 343.292 248.477V248.477C336.456 251.695 335.045 260.806 340.587 265.941L344.968 270", :stroke => "black"}
    %path#Line15{:d => "M357.351 1L362.31 10.5663C366.048 17.777 366.702 26.1952 364.124 33.8971L360.15 45.7654C358.407 50.9743 359.442 56.713 362.896 60.9842L365.793 64.5671C369.588 69.2588 369.014 76.1065 364.491 80.101V80.101C360.369 83.742 359.477 89.827 362.381 94.4981L369.834 106.488C372.958 111.514 369.345 118.015 363.428 118.015V118.015C357.336 118.015 353.757 124.861 357.232 129.863L362.297 137.153C365.683 142.026 365.067 148.629 360.837 152.791L359.983 153.631C355.546 157.998 354.638 164.819 357.779 170.194L361.538 176.627C365.645 183.655 365.765 192.323 361.854 199.462L356.144 209.884C352.05 217.358 354.099 226.706 360.944 231.782V231.782C367.654 236.758 369.773 245.862 365.951 253.29L357.351 270", :stroke => "black"}
    %path#Line16{:d => "M375.262 1L372.269 32.2132C371.663 38.5318 373.398 44.853 377.145 49.9767V49.9767C382.13 56.7937 383.479 65.613 380.759 73.6085L378.097 81.4355C376.246 86.8771 375.998 92.7359 377.381 98.3148L382.438 118.716C384.155 125.643 383.347 132.954 380.158 139.339L375.692 148.281C373.003 153.666 373.48 160.09 376.934 165.019V165.019C380.44 170.022 380.874 176.561 378.06 181.984L367.307 202.703C363.728 209.598 365.966 218.083 372.478 222.317L376.829 225.145C383.645 229.576 383.874 239.474 377.27 244.214V244.214C373.642 246.819 371.84 251.282 372.643 255.676L375.262 270", :stroke => "black"}
    %path#Line17{:d => "M396 1L392.248 6.04595C388.691 10.8312 391.417 17.6875 397.289 18.7234V18.7234C404.121 19.9286 406.301 28.6552 400.837 32.9309L398.935 34.4188C393.649 38.5556 394.514 46.798 400.544 49.7472L402.495 50.7013C408.75 53.7608 410.321 61.9665 405.638 67.12L401.581 71.5843C395.492 78.2848 399.217 89.0676 408.143 90.5819V90.5819C419.093 92.4395 421.257 107.23 411.299 112.147L400.677 117.391C391.62 121.863 394.803 135.5 404.904 135.5V135.5C414.669 135.5 418.136 148.427 409.681 153.314L397.291 160.476C389.045 165.242 388.274 176.85 395.815 182.666L400.082 185.956C408.894 192.751 408.908 206.041 400.109 212.855L399.39 213.412C391.32 219.661 390.295 231.537 397.032 239.205V239.205C401.302 244.065 402.678 250.913 400.542 257.019L396 270", :stroke => "black"}
    %path#Line18{:d => "M424 1L427.291 3.31877C435.816 9.32473 435.648 22.0195 426.967 27.7973L419.926 32.4832C411.396 38.1604 414.095 51.3318 424.171 53.1966L430.707 54.4064C438.239 55.8005 440.355 65.5864 434.072 69.9679V69.9679C429.17 73.387 429.144 80.6342 434.023 84.0876L440.05 88.3544C449.23 94.8526 447.215 109.01 436.587 112.689L426.793 116.079C414.709 120.262 413.727 136.973 425.239 142.541L431.618 145.627C439.614 149.495 439.773 160.827 431.889 164.917V164.917C424.676 168.659 424.031 178.73 430.708 183.361L435.14 186.434C441.849 191.086 442.73 200.669 436.982 206.467L430.818 212.685C427.481 216.051 428.457 221.703 432.729 223.756V223.756C437.822 226.202 437.973 233.398 432.989 236.056L424.623 240.518C419.631 243.181 417.259 249.035 418.991 254.421L424 270", :stroke => "black"}
    %path#Line19{:d => "M459.5 1L451.877 23.948C450.171 29.082 452.052 34.726 456.496 37.811V37.811C461.177 41.0604 462.983 47.1182 460.847 52.4009L453.012 71.7777C450.667 77.5772 452.659 84.2273 457.806 87.7824V87.7824C463.346 91.6085 465.174 98.9583 462.073 104.934L453.818 120.837C451.237 125.809 453.51 131.923 458.712 134.003V134.003C463.567 135.945 465.933 141.452 463.998 146.311L456.992 163.9C454.154 171.026 454.719 179.057 458.527 185.715L461.986 191.763C465.281 197.526 464.534 204.748 460.128 209.713L457.141 213.078C452.755 218.022 453.518 225.656 458.797 229.632L459.748 230.348C466.176 235.189 465.086 245.143 457.763 248.479V248.479C450.8 251.652 449.382 260.927 455.078 266.035L459.5 270", :stroke => "black"}
    %path#Line20{:d => "M472.053 1L476.993 10.8828C480.506 17.9106 481.121 26.0361 478.708 33.513L474.727 45.8437C473.054 51.025 474.057 56.6984 477.406 60.9918L480.236 64.6216C483.907 69.3284 483.343 76.066 478.942 80.0976V80.0976C474.932 83.77 474.06 89.7567 476.856 94.4201L484.266 106.781C487.23 111.726 483.668 118.015 477.902 118.015V118.015C471.968 118.015 468.435 124.635 471.738 129.564L476.882 137.242C480.139 142.103 479.538 148.583 475.442 152.762L474.593 153.629C470.282 158.028 469.396 164.747 472.42 170.114L476.095 176.635C480.071 183.69 480.187 192.283 476.404 199.444L470.785 210.081C466.866 217.5 468.863 226.665 475.515 231.78V231.78C482.036 236.795 484.101 245.722 480.444 253.091L472.053 270", :stroke => "black"}
    %path#Line21{:d => "M489.787 1L486.884 32.3056C486.303 38.5764 487.981 44.8486 491.617 49.991V49.991C496.447 56.8233 497.754 65.54 495.14 73.4884L492.445 81.6849C490.707 86.9707 490.474 92.6356 491.77 98.0466L496.802 119.046C498.415 125.773 497.652 132.85 494.645 139.08L490.184 148.319C487.584 153.705 488.048 160.068 491.403 165.019V165.019C494.809 170.046 495.232 176.522 492.509 181.949L482.012 202.871C478.575 209.722 480.765 218.06 487.126 222.337L491.32 225.158C497.996 229.647 498.224 239.39 491.765 244.186V244.186C488.222 246.818 486.469 251.225 487.237 255.572L489.787 270", :stroke => "black"}
    %path#Line31{:d => "M509.649 1L514.619 10.2573C518.586 17.6446 519.279 26.3546 516.532 34.2766L512.576 45.6864C510.76 50.9227 511.827 56.7278 515.386 60.9765L518.349 64.514C522.265 69.1892 521.681 76.147 517.04 80.1043V80.1043C512.808 83.714 511.896 89.8976 514.908 94.575L522.396 106.205C525.679 111.304 522.018 118.015 515.954 118.015V118.015C509.709 118.015 506.087 125.084 509.735 130.153L514.712 137.069C518.224 141.95 517.593 148.674 513.234 152.816L512.373 153.633C507.812 157.967 506.883 164.891 510.141 170.273L513.981 176.619C518.218 183.619 518.341 192.363 514.303 199.48L508.51 209.69C504.24 217.214 506.339 226.747 513.373 231.784V231.784C520.268 236.721 522.44 246.002 518.451 253.486L509.649 270", :stroke => "black"}
    %path#Line32{:d => "M527.738 1L524.654 32.1194C524.023 38.4864 525.814 44.8575 529.672 49.9621V49.9621C534.812 56.7636 536.202 65.6877 533.375 73.7304L530.754 81.1889C528.787 86.7839 528.523 92.8362 529.995 98.5812L535.069 118.389C536.894 125.512 536.039 133.057 532.666 139.592L528.201 148.244C525.424 153.626 525.912 160.113 529.465 165.019V165.019C533.071 169.998 533.516 176.6 530.61 182.018L519.605 202.538C515.886 209.474 518.168 218.106 524.83 222.297L529.337 225.133C536.288 229.506 536.517 239.556 529.773 244.242V244.242C526.061 246.82 524.212 251.339 525.051 255.779L527.738 270", :stroke => "black"}
    %path#Line33{:d => "M552.968 1L545.54 24.1035C543.911 29.1713 545.739 34.7113 550.065 37.8141V37.8141C554.619 41.0809 556.377 47.0207 554.335 52.2399L546.625 71.9417C544.38 77.6791 546.321 84.2083 551.336 87.7874V87.7874C556.731 91.6379 558.516 98.8455 555.54 104.769L547.366 121.043C544.904 125.944 547.125 131.905 552.195 133.999V133.999C556.93 135.956 559.239 141.333 557.396 146.114L550.524 163.942C547.779 171.064 548.329 179.035 552.024 185.713L555.407 191.824C558.595 197.584 557.864 204.719 553.575 209.713L550.633 213.138C546.373 218.099 547.127 225.615 552.287 229.631L553.3 230.419C559.575 235.303 558.487 245.09 551.292 248.477V248.477C544.456 251.695 543.045 260.806 548.587 265.941L552.968 270", :stroke => "black"}
    %path#Line30{:d => "M565.351 1L570.31 10.5663C574.048 17.777 574.702 26.1952 572.124 33.8971L568.15 45.7654C566.407 50.9743 567.442 56.713 570.896 60.9842L573.793 64.5671C577.588 69.2588 577.014 76.1065 572.491 80.101V80.101C568.369 83.742 567.477 89.827 570.381 94.4981L577.834 106.488C580.958 111.514 577.345 118.015 571.428 118.015V118.015C565.336 118.015 561.757 124.861 565.232 129.863L570.297 137.153C573.683 142.026 573.067 148.629 568.837 152.791L567.983 153.631C563.546 157.998 562.638 164.819 565.779 170.194L569.538 176.627C573.645 183.655 573.765 192.323 569.854 199.462L564.144 209.884C560.05 217.358 562.099 226.706 568.944 231.782V231.782C575.654 236.758 577.773 245.862 573.951 253.29L565.351 270", :stroke => "black"}
    %path#Line29{:d => "M583.262 1L580.269 32.2132C579.663 38.5318 581.398 44.853 585.145 49.9767V49.9767C590.13 56.7937 591.479 65.613 588.759 73.6085L586.097 81.4355C584.246 86.8771 583.998 92.7359 585.381 98.3148L590.438 118.716C592.155 125.643 591.347 132.954 588.158 139.339L583.692 148.281C581.003 153.666 581.48 160.09 584.934 165.019V165.019C588.44 170.022 588.874 176.561 586.06 181.984L575.307 202.703C571.728 209.598 573.966 218.083 580.478 222.317L584.829 225.145C591.645 229.576 591.874 239.474 585.27 244.214V244.214C581.642 246.819 579.84 251.282 580.643 255.676L583.262 270", :stroke => "black"}
    %path#Line22{:d => "M604 1L600.248 6.04595C596.691 10.8312 599.417 17.6875 605.289 18.7234V18.7234C612.121 19.9286 614.301 28.6552 608.837 32.9309L606.935 34.4188C601.649 38.5556 602.514 46.798 608.544 49.7472L610.495 50.7013C616.75 53.7608 618.321 61.9665 613.638 67.12L609.581 71.5843C603.492 78.2848 607.217 89.0676 616.143 90.5819V90.5819C627.093 92.4395 629.257 107.23 619.299 112.147L608.677 117.391C599.62 121.863 602.803 135.5 612.904 135.5V135.5C622.669 135.5 626.136 148.427 617.681 153.314L605.291 160.476C597.045 165.242 596.274 176.85 603.815 182.666L608.082 185.956C616.894 192.751 616.908 206.041 608.109 212.855L607.39 213.412C599.32 219.661 598.295 231.537 605.032 239.205V239.205C609.302 244.065 610.678 250.913 608.542 257.019L604 270", :stroke => "black"}
    %path#Line23{:d => "M632 1L635.291 3.31877C643.816 9.32473 643.648 22.0195 634.967 27.7973L627.926 32.4832C619.396 38.1604 622.095 51.3318 632.171 53.1966L638.707 54.4064C646.239 55.8005 648.355 65.5864 642.072 69.9679V69.9679C637.17 73.387 637.144 80.6342 642.023 84.0876L648.05 88.3544C657.23 94.8526 655.215 109.01 644.587 112.689L634.793 116.079C622.709 120.262 621.727 136.973 633.239 142.541L639.618 145.627C647.614 149.495 647.773 160.827 639.889 164.917V164.917C632.676 168.659 632.031 178.73 638.708 183.361L643.14 186.434C649.849 191.086 650.73 200.669 644.982 206.467L638.818 212.685C635.481 216.051 636.457 221.703 640.729 223.756V223.756C645.822 226.202 645.973 233.398 640.989 236.056L632.623 240.518C627.631 243.181 625.259 249.035 626.991 254.421L632 270", :stroke => "black"}
    %path#Line24{:d => "M667.5 1L659.877 23.948C658.171 29.082 660.052 34.726 664.496 37.811V37.811C669.177 41.0604 670.983 47.1182 668.847 52.4009L661.012 71.7777C658.667 77.5772 660.659 84.2273 665.806 87.7824V87.7824C671.346 91.6085 673.174 98.9583 670.073 104.934L661.818 120.837C659.237 125.809 661.51 131.923 666.712 134.003V134.003C671.567 135.945 673.933 141.452 671.998 146.311L664.992 163.9C662.154 171.026 662.719 179.057 666.527 185.715L669.986 191.763C673.281 197.526 672.534 204.748 668.128 209.713L665.141 213.078C660.755 218.022 661.518 225.656 666.797 229.632L667.748 230.348C674.176 235.189 673.086 245.143 665.763 248.479V248.479C658.8 251.652 657.382 260.927 663.078 266.035L667.5 270", :stroke => "black"}
    %path#Line25{:d => "M680.053 1L684.993 10.8828C688.506 17.9106 689.121 26.0361 686.708 33.513L682.727 45.8437C681.054 51.025 682.057 56.6984 685.406 60.9918L688.236 64.6216C691.907 69.3284 691.343 76.066 686.942 80.0976V80.0976C682.932 83.77 682.06 89.7567 684.856 94.4201L692.266 106.781C695.23 111.726 691.668 118.015 685.902 118.015V118.015C679.968 118.015 676.435 124.635 679.738 129.564L684.882 137.242C688.139 142.103 687.538 148.583 683.442 152.762L682.593 153.629C678.282 158.028 677.396 164.747 680.42 170.114L684.095 176.635C688.071 183.69 688.187 192.283 684.404 199.444L678.785 210.081C674.866 217.5 676.863 226.665 683.515 231.78V231.78C690.036 236.795 692.101 245.722 688.444 253.091L680.053 270", :stroke => "black"}
    %path#Line28{:d => "M697.787 1L694.884 32.3056C694.303 38.5764 695.981 44.8486 699.617 49.991V49.991C704.447 56.8233 705.754 65.54 703.14 73.4884L700.445 81.6849C698.707 86.9707 698.474 92.6356 699.77 98.0466L704.802 119.046C706.415 125.773 705.652 132.85 702.645 139.08L698.184 148.319C695.584 153.705 696.048 160.068 699.403 165.019V165.019C702.809 170.046 703.232 176.522 700.509 181.949L690.012 202.871C686.575 209.722 688.765 218.06 695.126 222.337L699.32 225.158C705.996 229.647 706.224 239.39 699.765 244.186V244.186C696.222 246.818 694.469 251.225 695.237 255.572L697.787 270", :stroke => "black"}
    %path#Line26{:d => "M717.649 1L722.619 10.2573C726.586 17.6446 727.279 26.3546 724.532 34.2766L720.576 45.6864C718.76 50.9227 719.827 56.7278 723.386 60.9765L726.349 64.514C730.265 69.1892 729.681 76.147 725.04 80.1043V80.1043C720.808 83.714 719.896 89.8976 722.908 94.575L730.396 106.205C733.679 111.304 730.018 118.015 723.954 118.015V118.015C717.709 118.015 714.087 125.084 717.735 130.153L722.712 137.069C726.224 141.95 725.593 148.674 721.234 152.816L720.373 153.633C715.812 157.967 714.883 164.891 718.141 170.273L721.981 176.619C726.218 183.619 726.341 192.363 722.303 199.48L716.51 209.69C712.24 217.214 714.339 226.747 721.373 231.784V231.784C728.268 236.721 730.44 246.002 726.451 253.486L717.649 270", :stroke => "black"}
    %path#Line27{:d => "M735.738 1L732.654 32.1194C732.023 38.4864 733.814 44.8575 737.672 49.9621V49.9621C742.812 56.7636 744.202 65.6877 741.375 73.7304L738.754 81.1889C736.787 86.7839 736.523 92.8362 737.995 98.5812L743.069 118.389C744.894 125.512 744.039 133.057 740.666 139.592L736.201 148.244C733.424 153.626 733.912 160.113 737.465 165.019V165.019C741.071 169.998 741.516 176.6 738.61 182.018L727.605 202.538C723.886 209.474 726.168 218.106 732.83 222.297L737.337 225.133C744.288 229.506 744.517 239.556 737.773 244.242V244.242C734.061 246.82 732.212 251.339 733.051 255.779L735.738 270", :stroke => "black"}
    - (1..@snow).each do
      %g
        %g
          %g
            %path{:d => "M13.1292 4.6817L12.6419 8.0046L12.1806 5.65855L9.82202 5.2662L13.1292 4.6817Z", :fill => "#fff"}
            %path{:d => "M12.181 5.65859L11.893 7.90965L11.2324 6.63544L9.93929 6.01243L12.181 5.65859Z", :fill => "#fff"}
            %path{:d => "M11.2322 6.6355L10.6782 7.57934L11.5248 8.02685L10.4986 8.13749L10.4181 9.16651L9.94598 8.33332L9.01879 8.91481L9.57285 7.97098L8.72617 7.52346L9.75238 7.41282L9.83289 6.38381L10.305 7.217L11.2322 6.6355Z", :fill => "#fff"}
            %path{:d => "M4.88495 13.1252L5.40869 9.80781L5.84424 12.1588L8.19836 12.577L4.88495 13.1252Z", :fill => "#fff"}
            %path{:d => "M5.84465 12.1587L6.15735 9.91098L6.80394 11.1924L8.09008 11.8296L5.84465 12.1587Z", :fill => "#fff"}
            %path{:d => "M6.80365 11.1923L7.36805 10.2546L6.52634 9.79784L7.5537 9.69848L7.6455 8.67042L8.10847 9.50874L9.04199 8.93747L8.47759 9.87516L9.3193 10.3319L8.29194 10.4313L8.20013 11.4594L7.73717 10.621L6.80365 11.1923Z", :fill => "#fff"}
            %path{:d => "M4.97842 4.57831L8.27332 5.22848L5.90741 5.57384L5.39948 7.91024L4.97842 4.57831Z", :fill => "#fff"}
            %path{:d => "M5.90765 5.57405L8.14182 5.97244L6.83664 6.56957L6.15076 7.83042L5.90765 5.57405Z", :fill => "#fff"}
            %path{:d => "M6.83635 6.5693L7.75178 7.16913L8.24041 6.3455L8.30043 7.37591L9.32423 7.50694L8.46882 7.93753L9.00399 8.8922L8.08856 8.29237L7.59993 9.116L7.53991 8.08559L6.51611 7.95455L7.37152 7.52397L6.83635 6.5693Z", :fill => "#fff"}
            %path{:d => "M13.006 13.2283L9.7184 12.542L12.088 12.2227L12.6215 9.89198L13.006 13.2283Z", :fill => "#fff"}
            %path{:d => "M12.0881 12.2225L9.85841 11.7995L11.1701 11.2168L11.8698 9.96355L12.0881 12.2225Z", :fill => "#fff"}
            %path{:d => "M11.1701 11.2167L10.2613 10.6069L9.76367 11.4251L9.71498 10.3941L8.69268 10.2518L9.55277 9.83063L9.02812 8.87013L9.9369 9.47998L10.4346 8.66177L10.4832 9.69277L11.5055 9.83505L10.6455 10.2562L11.1701 11.2167Z", :fill => "#fff"}
            %path{:d => "M9.09206 2.97542L9.29934 5.96905L9.01874 8.91466L9.19202 11.8686L8.78725 15.0167L8.73821 11.8603L9.01874 8.91466L8.84553 5.9608L9.09206 2.97542Z", :fill => "#fff"}
            %path{:d => "M2.99504 9.03461L5.98431 8.77178L8.93462 8.99764L11.8848 8.76953L15.0399 9.11578L11.885 9.22342L8.93462 8.99764L5.98449 9.22567L2.99504 9.03461Z", :fill => "#fff"}
          %animatetransform{:attributename => "transform", :attributetype => "XML", :dur => "10s", :from => "0 6 7", :repeatcount => "indefinite", :to => "-360 6 7", :type => "rotate"}
          %animatemotion{:dur => "#{rand(10..22)}s", :begin => "#{rand(0..22)}s", :repeatcount => "indefinite"}
            %mpath{"xlink:href" => "#Line#{rand(1..33)}"}
        %g
          %g
            %path{:d => "M5.99534 1.38416L6.22604 3.69109L5.99534 5.99803L6.22604 8.30496L5.99534 10.6119L5.76465 8.30496L5.99534 5.99803L5.76465 3.69109L5.99534 1.38416Z", :fill => "#fff"}
            %ellipse{:cx => "5.99553", :cy => "0.922774", :fill => "#fff", :rx => "0.922775", :ry => "0.922774"}
            %ellipse{:cx => "5.99553", :cy => "11.0733", :fill => "#fff", :rx => "0.922775", :ry => "0.922774"}
            %path{:d => "M5.99553 1.84558L6.79467 3.22974H5.19638L5.99553 1.84558Z", :fill => "#fff"}
            %path{:d => "M5.99533 10.1662L5.22023 8.76842L6.81828 8.79604L5.99533 10.1662Z", :fill => "#fff"}
            %path{:d => "M5.99549 3.22974L7.19421 4.6139H4.79677L5.99549 3.22974Z", :fill => "#fff"}
            %path{:d => "M5.95362 8.77104L4.72368 7.38258L7.1932 7.39118L5.95362 8.77104Z", :fill => "#fff"}
            %path{:d => "M10.6144 5.99974L8.30716 6.22715L6.00055 5.99318L3.69329 6.2206L1.38668 5.98663L3.69394 5.75921L6.00055 5.99318L8.30781 5.76577L10.6144 5.99974Z", :fill => "#fff"}
            %ellipse{:cx => "11.0759", :cy => "6.00032", :fill => "#fff", :rx => "0.922774", :ry => "0.922774", :transform => "rotate(90.0814 11.0759 6.00032)"}
            %ellipse{:cx => "0.925037", :cy => "5.98604", :fill => "#fff", :rx => "0.922774", :ry => "0.922774", :transform => "rotate(90.0814 0.925037 5.98604)"}
            %path{:d => "M10.153 5.99907L8.76769 6.79625L8.76996 5.19796L10.153 5.99907Z", :fill => "#fff"}
            %path{:d => "M1.8322 5.98718L3.23106 5.21406L3.20117 6.81207L1.8322 5.98718Z", :fill => "#fff"}
            %path{:d => "M8.76903 5.99707L7.38317 7.19383L7.38657 4.79639L8.76903 5.99707Z", :fill => "#fff"}
            %path{:d => "M3.22769 5.94765L4.61789 4.71968L4.60578 7.18918L3.22769 5.94765Z", :fill => "#fff"}
            %path{:d => "M7.89813 3.88063L7.05634 5.03189L6.00325 5.99366L5.16145 7.14491L4.10836 8.10668L4.95015 6.95542L6.00325 5.99366L6.84504 4.8424L7.89813 3.88063Z", :fill => "#fff"}
            %ellipse{:cx => "8.08757", :cy => "3.66926", :fill => "#fff", :rx => "0.567643", :ry => "0.567643", :transform => "rotate(41.8846 8.08757 3.66926)"}
            %ellipse{:cx => "3.91863", :cy => "8.31794", :fill => "#fff", :rx => "0.567643", :ry => "0.567643", :transform => "rotate(41.8846 3.91863 8.31794)"}
            %path{:d => "M7.70874 4.09187L7.50626 5.05398L6.77429 4.39757L7.70874 4.09187Z", :fill => "#fff"}
            %path{:d => "M4.29104 7.90235L4.51012 6.94388L5.23063 7.61284L4.29104 7.90235Z", :fill => "#fff"}
            %path{:d => "M7.13977 4.72581L7.12028 5.85203L6.02232 4.86742L7.13977 4.72581Z", :fill => "#fff"}
            %path{:d => "M4.84517 7.2464L4.85212 6.1054L5.97956 7.12355L4.84517 7.2464Z", :fill => "#fff"}
            %path{:d => "M8.11751 7.89128L6.96745 7.04786L6.00718 5.9934L4.85712 5.14997L3.89685 4.09551L5.04691 4.93894L6.00718 5.9934L7.15724 6.83682L8.11751 7.89128Z", :fill => "#fff"}
            %ellipse{:cx => "8.32824", :cy => "8.08094", :fill => "#fff", :rx => "0.567643", :ry => "0.567643", :transform => "rotate(131.966 8.32824 8.08094)"}
            %ellipse{:cx => "3.68566", :cy => "3.90553", :fill => "#fff", :rx => "0.567643", :ry => "0.567643", :transform => "rotate(131.966 3.68566 3.90553)"}
            %path{:d => "M7.90607 7.70124L6.94425 7.4974L7.60169 6.76636L7.90607 7.70124Z", :fill => "#fff"}
            %path{:d => "M4.10068 4.27853L5.05884 4.49896L4.38886 5.21853L4.10068 4.27853Z", :fill => "#fff"}
            %path{:d => "M7.27341 7.132L6.14722 7.11091L7.13339 6.01436L7.27341 7.132Z", :fill => "#fff"}
            %path{:d => "M4.75575 4.83355L5.89673 4.84212L4.87698 5.96811L4.75575 4.83355Z", :fill => "#fff"}
          %animatetransform{:attributename => "transform", :attributetype => "XML", :dur => "10s", :from => "0 6 7", :repeatcount => "indefinite", :to => "360 6 7", :type => "rotate"}
          %animatemotion{:dur => "#{rand(10..22)}s", :begin => "#{rand(0..22)}s", :repeatcount => "indefinite"}
            %mpath{"xlink:href" => "#Line#{rand(1..33)}"}
        %g
          %g
            %path{:d => "M5.99512 1.37988L6.22511 3.67975L5.99512 5.97961L6.22511 8.27948L5.99512 10.5793L5.76514 8.27948L5.99512 5.97961L5.76514 3.67975L5.99512 1.37988Z", :fill => "#fff"}
            %ellipse{:cx => "5.99514", :cy => "0.919946", :fill => "#fff", :rx => "0.919946", :ry => "0.919946"}
            %ellipse{:cx => "5.99514", :cy => "11.0393", :fill => "#fff", :rx => "0.919946", :ry => "0.919946"}
            %path{:d => "M5.99514 1.83984L6.79184 3.21976H5.19844L5.99514 1.83984Z", :fill => "#fff"}
            %path{:d => "M5.99523 10.135L5.2225 8.7415L6.81566 8.76904L5.99523 10.135Z", :fill => "#fff"}
            %path{:d => "M5.99515 3.21985L7.1902 4.59977H4.80011L5.99515 3.21985Z", :fill => "#fff"}
            %path{:d => "M5.95359 8.7442L4.72742 7.36L7.18937 7.36857L5.95359 8.7442Z", :fill => "#fff"}
            %path{:d => "M1.40096 5.91469L3.70405 5.71968L6.00015 5.98458L8.30325 5.78957L10.5994 6.05448L8.29626 6.24949L6.00015 5.98458L3.69706 6.1796L1.40096 5.91469Z", :fill => "#fff"}
            %ellipse{:cx => "0.940654", :cy => "5.90761", :fill => "#fff", :rx => "0.919946", :ry => "0.919946", :transform => "rotate(-89.1294 0.940654 5.90761)"}
            %ellipse{:cx => "11.0588", :cy => "6.06142", :fill => "#fff", :rx => "0.919946", :ry => "0.919946", :transform => "rotate(-89.1294 11.0588 6.06142)"}
            %path{:d => "M1.86066 5.92159L3.25252 5.14595L3.22831 6.73916L1.86066 5.92159Z", :fill => "#fff"}
            %path{:d => "M10.1547 6.04776L8.74964 6.79922L8.80138 5.20667L10.1547 6.04776Z", :fill => "#fff"}
            %path{:d => "M3.24021 5.94263L4.63812 4.76869L4.60181 7.1585L3.24021 5.94263Z", :fill => "#fff"}
            %path{:d => "M8.76349 6.06802L7.36082 7.27301L7.4068 4.81148L8.76349 6.06802Z", :fill => "#fff"}
            %path{:d => "M2.6641 9.14638L4.17564 7.3978L6.0035 5.98316L7.51503 4.23458L9.34289 2.81994L7.83136 4.56852L6.0035 5.98316L4.49196 7.73174L2.6641 9.14638Z", :fill => "#fff"}
            %ellipse{:cx => "2.33016", :cy => "9.46266", :fill => "#fff", :rx => "0.919946", :ry => "0.919946", :transform => "rotate(-133.448 2.33016 9.46266)"}
            %ellipse{:cx => "9.67684", :cy => "2.50368", :fill => "#fff", :rx => "0.919946", :ry => "0.919946", :transform => "rotate(-133.448 9.67684 2.50368)"}
            %path{:d => "M2.99821 8.83005L3.45215 7.30268L4.54792 8.45948L2.99821 8.83005Z", :fill => "#fff"}
            %path{:d => "M9.02042 3.12561L8.54016 4.6449L7.46455 3.46934L9.02042 3.12561Z", :fill => "#fff"}
            %path{:d => "M3.99976 7.88112L4.17975 6.06455L5.82341 7.79975L3.99976 7.88112Z", :fill => "#fff"}
            %path{:d => "M8.03933 4.11212L7.87764 5.95423L6.19079 4.16096L8.03933 4.11212Z", :fill => "#fff"}
            %path{:d => "M9.06158 9.41289L7.36099 7.84755L6.00405 5.97645L4.30347 4.41111L2.94653 2.54002L4.64711 4.10536L6.00405 5.97645L7.70464 7.54179L9.06158 9.41289Z", :fill => "#fff"}
            %circle{:cx => "9.36722", :cy => "9.75662", :fill => "#fff", :r => "0.919946", :transform => "rotate(138.339 9.36722 9.75662)"}
            %ellipse{:cx => "2.64066", :cy => "2.19643", :fill => "#fff", :rx => "0.919946", :ry => "0.919946", :transform => "rotate(138.339 2.64066 2.19643)"}
            %path{:d => "M8.75558 9.06927L7.24312 8.56792L8.43354 7.50876L8.75558 9.06927Z", :fill => "#fff"}
            %path{:d => "M3.24219 2.87202L4.74576 3.39944L3.53722 4.43786L3.24219 2.87202Z", :fill => "#fff"}
            %path{:d => "M7.8387 8.03835L6.02863 7.80179L7.81425 6.21305L7.8387 8.03835Z", :fill => "#fff"}
            %path{:d => "M4.19754 3.88357L6.0337 4.10264L4.1887 5.73274L4.19754 3.88357Z", :fill => "#fff"}
          %animatetransform{:attributename => "transform", :attributetype => "XML", :dur => "10s", :from => "0 6 7", :repeatcount => "indefinite", :to => "360 6 7", :type => "rotate"}
          %animatemotion{:dur => "#{rand(10..22)}s", :begin => "#{rand(0..22)}s", :repeatcount => "indefinite"}
            %mpath{"xlink:href" => "#Line#{rand(1..33)}"}
  #card.card.cpc-holiday-card
    .svg
      %svg.svg-icon{:fill => "none", :viewbox => "0 0 666 227", :xmlns => "http://www.w3.org/2000/svg"}
        %g{'class'=>'path'}
          %path{:d => "M547.207 39.8569L541.437 65.6238C539.983 72.1193 540.185 78.8364 542.024 85.1652L547.206 102.996L535.913 96.8732C525.376 91.1607 512.692 90.5114 501.391 95.1059L481.987 102.996C493.784 91.9264 487.682 72.5491 471.766 70.5434L448.711 67.638C466.167 63.0008 475.619 44.1043 468.593 27.8893L467.345 25.0102L476.386 31.7883C489.697 41.7685 508.936 38.8266 519.067 25.2616L519.255 25.0102C516.436 40.0593 533.764 50.2482 546.04 40.7589L547.207 39.8569Z", :fill => "#209969", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M606.898 125.444L577.313 109.496C571.574 106.402 565.105 104.715 558.466 104.582L533.766 104.085L549.417 81.3003C554.541 73.8413 556.917 64.9916 556.159 56.1926L554.359 35.3103C563.706 50.2357 587.365 46.8541 592.452 29.8659L595.572 19.4459L600.537 30.0408C605.816 41.3076 618.002 48.0031 630.944 46.7476L653.957 44.5151L639.068 54.3742C624.628 63.9358 621.111 82.9269 631.324 96.1968L634.547 100.383C618.41 92.3775 600.107 108.021 606.48 124.371L606.898 125.444Z", :fill => "#209969", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M560.999 91L578.681 73.9983C584.116 68.7727 590.917 65.1894 598.301 63.6618L615.998 60", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M486 48L498.4 52.1332C505.961 54.6535 512.597 59.375 517.456 65.6922L530 82", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M554.5 75C554.5 84.5934 546.29 92.5 536 92.5C525.709 92.5 517.5 84.5934 517.5 75C517.5 65.4066 525.709 57.5 536 57.5C546.29 57.5 554.5 65.4066 554.5 75Z", :fill => "#B73E30", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M564.5 106C564.5 115.593 556.29 123.5 546 123.5C535.709 123.5 527.5 115.593 527.5 106C527.5 96.4066 535.709 88.5 546 88.5C556.29 88.5 564.5 96.4066 564.5 106Z", :fill => "#B73E30", :stroke => "black", "stroke-width" => "3"}
          %path{:d => "M584.5 87C584.5 96.5934 576.29 104.5 566 104.5C555.709 104.5 547.5 96.5934 547.5 87C547.5 77.4066 555.709 69.5 566 69.5C576.29 69.5 584.5 77.4066 584.5 87Z", :fill => "#CD3930", :stroke => "black", "stroke-width" => "3"}

    %h1
      Happy New Year,
      %input#nameInput.input{:value => "dear friend"}
      %span#name
      %span !
    %p#text.text-congratulations
    .slider
      .m-slider
        .swiper-container
          #wrapper.swiper-wrapper
          .swiper-pagination
    %span.author
      %input#authorInput.input{:value => "Brawada"}
      %span#author
    %a#link.btn{:target => "_blank", :href => "https://codepen.io/Anna_Batura/full/WNGMerN?name=dear%20friend&author=Brawada&slider_id=0&status=sent"} Get a link to congratulations
!

CSS 

              
                @import "compass/css3"
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap')
html
  height: 100%
body
  margin: 0
  background-color: #30308a
  height: 100%
  overflow: hidden
  display: flex
  align-items: center
  justify-content: center
  font-family: 'Courgette', cursive
.sent-off
  .slider, .input, .btn
    display: none
    
.icon-snow
  position: absolute
  top: -40px
  left: -40px
  pointer-events: none
  width: auto
  height: 150%
  opacity: 0.6
  path
    stroke: none
.card
  position: relative
  width: 600px
  margin: 0 auto
  border-radius: 4px
  padding: 40px
  box-sizing: border-box
  background: #fff
  box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09)
  
h1
  margin: 0 0 20px
.input
  appearance: none
  outline: 0
  border: none
  border-bottom: 3px solid #454
  max-width: 235px
  display: inline-block
  font-family: 'Courgette', cursive
  &:focus
    border-color: #0fa573
.author
  display: inline-block
  width: 100%
  text-align: right
.svg
  position: absolute
  top: -78px
  left: -44px
  right: -81px
  pointer-events: none
.svg-icon
  width: 100%
  height: auto
.text-congratulations, .m-slider
  font-size: 20px
  line-height: 1.2
.m-slider
  margin: 0 -30px
.swiper-container
  width: 100%
  height: 114px
  padding-bottom: 40px
.swiper-slide
  width: 70%
.m-slide
  position: relative
  box-sizing: border-box
  padding: 15px 10px
  background: #eee
  border: 1px solid #eee
  height: 125px
  border-radius: 3px
.swiper-slide
  opacity: 0.6 !important
  @include transition(all 0.6s)
  &.swiper-slide-active
    opacity: 1 !important
.swiper-pagination-bullet-active
  background-color: #0fa573
.btn
  display: table
  box-sizing: border-box
  text-decoration: none
  background-color: #0fa573
  border: 0
  margin-top: 15px
  line-height: 50px
  padding: 0 15px
  color: #fff
  font-weight: 500
  border-radius: 4px
  width: 100%
  cursor: pointer
  font-size: 24px
  text-align: center
  @include transition(all 0.6s)
  &:hover
    background-color: #009b7d

@media (max-width: 740px)
  body
    display: block
    overflow: auto
  svg
    display: none
  h1
    font-size: 24px
  .card
    width: 100%
  .text-congratulations, .m-slider
    font-size: 14px
  .btn 
    line-height: 34px
    font-size: 18px
!

JS 

              
                //cpc-holiday-card //codepenchallenge
const params = new URLSearchParams(window.location.search);
const sliderId = 0;
const nameInput = document.getElementById('nameInput');
const authorInput = document.getElementById('authorInput');
const link = document.getElementById('link');
const name = document.getElementById('name');
const text = document.getElementById('text');
const author = document.getElementById('author');

const slides = [
  'Wishing you health, wealth, and happiness in the New Year ahead.',
  'I hope all your dreams come true in 2021 — onwards and upwards!',
  'Wave goodbye to the old and embrace the new with hope, dreams, and ambition. Wishing you a Happy New Year full of happiness!',
  'May the 12 months of the New Year be full of new achievements for you. May the days be filled with eternal happiness for you and your family!',
  'Don’t forget the past, learn from it and go out strong for your dreams and future. My best wishes are with you.',
  'Wishing for a better year with new opportunities and beautiful moments. Let’s have a great year ahead.',
  'Years will come and go, but my love for you will always be the same. It will never stop to grow as long as there is a tomorrow.',
  'When I think of you, my heart overflows with joy and pleasure. I have fallen more in love with you every year. This new year will not be an exception.',
  'We are blessed to have each other, I could not be any more thankful. May this year bring us success and good health.'
]

const status = params.get('status');
if (status === 'sent') {
  const card = document.getElementById('card');
  card.classList.add('sent-off'); 
  console.log(params.get('name'))
  name.innerHTML = params.get('name') || 'dear friend';
  author.innerHTML = params.get('author') || 'Brawada';
  const sliderId = +params.get('slider_id') || 0;
  text.innerHTML = slides[sliderId];
} else {
  const slideWrapper = document.getElementById('wrapper');
  slides.forEach(slideText => {
    const swiperSlide = document.createElement("div");
    swiperSlide.setAttribute("class", "swiper-slide");
    const slide = document.createElement("div");
    slide.setAttribute("class", "m-slide");
    slide.innerHTML = slideText;
    swiperSlide.appendChild(slide);
    slideWrapper.appendChild(swiperSlide);
  });
    
  const mySwiper = new Swiper('.swiper-container', {
    loop: true,
    effect: 'coverflow',
    grabCursor: true,
    mousewheel: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    initialSlide: sliderId,
    coverflowEffect: {
          rotate: -30,
          stretch: 0,
          depth: 200,
          modifier: 1,
          slideShadows: false,
    },

    pagination: {
      el: '.swiper-pagination',
          dynamicBullets: true,
    }
  });

  function stateChange() {
    const name = encodeURIComponent(nameInput.value);
    const author = encodeURIComponent(authorInput.value);
    const index = mySwiper.realIndex;
    link.href = `https://codepen.io/Anna_Batura/full/WNGMerN?name=${name}&author=${author}&slider_id=${index}&status=sent`;
  }

  mySwiper.on('slideChange', stateChange);
  nameInput.addEventListener('input', stateChange);
  authorInput.addEventListener('input', stateChange);
}
!
999px

Console