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 

              
                <div class="wrapper">
  <div class="ball-container">
    <?xml version="1.0" encoding="utf-8"?>
    <svg role="img" aria-labelledby="sparklingBallTitle sparklingBallDesc" class="starred-ball" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <title id="sparklingBallTitle">Sparkling Ball</title>
      <desc id="sparklingBallDesc">
        Festive ball with sparkling stars, which morphs into a heart.
      </desc>
  <defs>
    <style type="text/css">
      .sparkling-star {
        fill: rgba(216, 216, 216, 0.5);
      }
      
      .heart {
        visibility: hidden;
      }
    </style>
  </defs>
  <path id="ball" class="ball" fill="rgba(21, 19, 121, 1)" d="M 360.759 250 A 110.759 110.759 0 0 1 250 360.759 A 110.759 110.759 0 0 1 139.241 250 A 110.759 110.759 0 0 1 250 139.241 A 110.759 110.759 0 0 1 360.759 250 Z"/>
  
  <path id="heartpath" class="heart" fill="#7c0e18" d="M166.644,261.463C146.619,250.505,133.275,231.956,132.978,210.98C132.504,177.555,165.336,150.625,206.311,150.831C230.146,150.95,251.486,160.226,265.262,174.544C277.177,167.832,291.69,163.938,307.396,164.017C348.518,164.223,382.239,191.582,382.714,225.125C383.071,250.307,364.589,271.816,337.954,280.886L338.125,281.134L230.839,354.261Z" fill="red"/>

  <path class="sparkling-star" d="M 733.5 312.796 L 735.624 319.36 L 742.093 319.501 L 736.937 323.699 L 738.811 330.351 L 733.5 326.382 L 728.189 330.351 L 730.063 323.699 L 724.907 319.501 L 731.376 319.36 Z" transform="matrix(1.000003, 0, 0, 1.000002, -528.007025, -116.335804)"/>
  <path class="sparkling-star" d="M 304.543 183.076 L 306.982 189.413 L 314.408 189.55 L 308.489 193.603 L 310.64 200.025 L 304.543 196.193 L 298.446 200.025 L 300.597 193.603 L 294.678 189.55 L 302.104 189.413 Z"/>
  <path class="sparkling-star" d="M 803.5 371.458 L 806.254 378.927 L 814.639 379.088 L 807.956 383.865 L 810.384 391.433 L 803.5 386.917 L 796.616 391.433 L 799.044 383.865 L 792.361 379.088 L 800.746 378.927 Z" transform="matrix(0.999999, 0, 0, 1, -551.156622, -136.180847)"/>
  <path class="sparkling-star" d="M 258.031 185.083 L 258.818 187.573 L 261.213 187.627 L 259.304 189.219 L 259.998 191.742 L 258.031 190.236 L 256.064 191.742 L 256.758 189.219 L 254.849 187.627 L 257.244 187.573 Z"/>
  <path class="sparkling-star" d="M 744 261.315 L 745.102 264.484 L 748.456 264.552 L 745.782 266.579 L 746.754 269.79 L 744 267.874 L 741.246 269.79 L 742.218 266.579 L 739.544 264.552 L 742.898 264.484 Z" transform="matrix(1, 0, 0, 0.999997, -531.477509, -97.646549)"/>
  <path class="sparkling-star" d="M 687 361.654 L 687.944 363.917 L 690.818 363.966 L 688.527 365.414 L 689.36 367.707 L 687 366.338 L 684.64 367.707 L 685.473 365.414 L 683.182 363.966 L 686.056 363.917 Z" transform="matrix(1.000004, 0, 0, 1.000005, -512.626863, -130.394227)"/>
  <path class="sparkling-star" d="M 933 386.985 L 933.944 389.701 L 936.818 389.759 L 934.527 391.496 L 935.36 394.248 L 933 392.606 L 930.64 394.248 L 931.473 391.496 L 929.182 389.759 L 932.056 389.701 Z" transform="matrix(1, 0, 0, 1.000004, -593.990967, -138.99378)"/>
  <path class="sparkling-star" d="M 303.874 228.585 L 305.369 231.98 L 309.921 232.053 L 306.293 234.224 L 307.611 237.664 L 303.874 235.612 L 300.137 237.664 L 301.455 234.224 L 297.827 232.053 L 302.379 231.98 Z"/>
  <path class="sparkling-star" d="M 734 370.819 L 735.416 373.309 L 739.728 373.363 L 736.291 374.955 L 737.54 377.478 L 734 375.972 L 730.46 377.478 L 731.709 374.955 L 728.272 373.363 L 732.584 373.309 Z" transform="matrix(0.999997, 0, 0, 1.000004, -528.168062, -133.536327)"/>
  <path class="sparkling-star" d="M 738.5 375.992 L 738.579 377.35 L 738.819 377.379 L 738.627 378.248 L 738.697 379.625 L 738.5 378.803 L 738.303 379.625 L 738.373 378.248 L 738.181 377.379 L 738.421 377.35 Z" transform="matrix(1.000091, 0, 0, 1, -529.725697, -134.692429)"/>
  <path class="sparkling-star" d="M 750 410.638 L 751.888 415.618 L 757.638 415.725 L 753.055 418.91 L 754.721 423.956 L 750 420.945 L 745.279 423.956 L 746.945 418.91 L 742.362 415.725 L 748.112 415.618 Z" transform="matrix(1.000002, 0, 0, 1, -533.463492, -147.922791)"/>
  <path class="sparkling-star" d="M 806.5 439.969 L 808.467 445.401 L 814.457 445.518 L 809.683 448.993 L 811.417 454.497 L 806.5 451.212 L 801.583 454.497 L 803.317 448.993 L 798.543 445.518 L 804.533 445.401 Z" transform="matrix(0.999998, 0, 0, 1, -552.148477, -157.845551)"/>
  <path class="sparkling-star" d="M 845 415.811 L 846.416 419.659 L 850.728 419.742 L 847.291 422.203 L 848.54 426.102 L 845 423.776 L 841.46 426.102 L 842.709 422.203 L 839.272 419.742 L 843.584 419.659 Z" transform="matrix(0.999995, 0, 0, 1, -564.879874, -149.080444)"/>
  <path class="sparkling-star" d="M 0 0 L 0 0 L 0 0 L 0 0 L 0 0 L 0 0 L 0 0 L 0 0 L 0 0 L 0 0 Z" transform="matrix(NaN, NaN, NaN, NaN, NaN, NaN)"/>
  <path class="sparkling-star" d="M 325.624 288.816 L 326.883 291.985 L 330.716 292.053 L 327.661 294.08 L 328.771 297.291 L 325.624 295.375 L 322.477 297.291 L 323.587 294.08 L 320.532 292.053 L 324.365 291.985 Z"/>
  <path class="sparkling-star" d="M 674.5 444.158 L 675.365 445.742 L 678.001 445.776 L 675.9 446.789 L 676.664 448.395 L 674.5 447.437 L 672.336 448.395 L 673.1 446.789 L 670.999 445.776 L 673.635 445.742 Z" transform="matrix(0.999996, 0, 0, 1, -508.486965, -157.349426)"/>
  <path class="sparkling-star" d="M 160.656 258.7 L 161.207 260.737 L 162.883 260.781 L 161.547 262.084 L 162.033 264.149 L 160.656 262.917 L 159.279 264.149 L 159.765 262.084 L 158.429 260.781 L 160.105 260.737 Z"/>
  <path class="sparkling-star" d="M 744 486.15 L 744.787 489.092 L 747.182 489.156 L 745.273 491.038 L 745.967 494.019 L 744 492.24 L 742.033 494.019 L 742.727 491.038 L 740.818 489.156 L 743.213 489.092 Z" transform="matrix(1.000005, 0, 0, 1, -531.480901, -171.902802)"/>
  <path class="sparkling-star" d="M 844.5 483.819 L 845.523 486.309 L 848.637 486.363 L 846.155 487.955 L 847.057 490.478 L 844.5 488.972 L 841.943 490.478 L 842.845 487.955 L 840.363 486.363 L 843.477 486.309 Z" transform="matrix(1.000007, 0, 0, 1, -564.724705, -170.910522)"/>
  <path class="sparkling-star" d="M 825 249.819 L 825.787 252.309 L 828.182 252.363 L 826.273 253.955 L 826.967 256.478 L 825 254.972 L 823.033 256.478 L 823.727 253.955 L 821.818 252.363 L 824.213 252.309 Z" transform="matrix(1, 0, 0, 1.000004, -558.268982, -93.51399)"/>
</svg>
  </div>

  <!-- starred background -->

  <div class="bg">
    <?xml version="1.0" encoding="utf-8"?>
    <svg role="img" aria-labelledby="starredSkyTitle starredSkyDesc" class="starred-sky" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <title id="starredSkyTitle">Starred Sky</title>
      <desc id="starredSkyDesc">Sparkling stars on a blue background</desc>
  <defs>
    <style type="text/css">
      rect {
        fill: rgb(8, 4, 45);
      }
      
      .star {
        fill: rgba(216, 216, 216, 0.5);
      }
    </style>
  </defs>
  <rect class="sky-bg" x="2.191" y="1.044" width="500" height="500"/>
  <g>
   <path class="star" d="M 327 101.19 L 328.888 105.458 L 334.638 105.55 L 330.055 108.28 L 331.721 112.605 L 327 110.024 L 322.279 112.605 L 323.945 108.28 L 319.362 105.55 L 325.112 105.458 Z" transform="matrix(0.999998, 0, 0, 1.000001, -159.602253, -0.334328)"/>
  <path class="star" d="M 176.002 154.777 L 178.834 163.313 L 187.458 163.497 L 180.585 168.957 L 183.082 177.607 L 176.002 172.445 L 168.922 177.607 L 171.419 168.957 L 164.546 163.497 L 173.17 163.313 Z"/>
  <path class="star" d="M 280.5 120.411 L 281.714 123.515 L 285.41 123.582 L 282.464 125.567 L 283.535 128.713 L 280.5 126.836 L 277.465 128.713 L 278.536 125.567 L 275.59 123.582 L 279.286 123.515 Z" transform="matrix(0.999999, 0, 0, 1, -166.450185, 2.242905)"/>
  <path class="star" d="M 252 107.748 L 254.428 114.344 L 261.82 114.486 L 255.928 118.705 L 258.069 125.39 L 252 121.401 L 245.931 125.39 L 248.072 118.705 L 242.18 114.486 L 249.572 114.344 Z" transform="matrix(0.999999, 0, 0, 1, -170.647211, 1.138435)"/>
  <path class="star" d="M 266 101.411 L 267.349 104.515 L 271.455 104.582 L 268.182 106.567 L 269.372 109.713 L 266 107.836 L 262.628 109.713 L 263.818 106.567 L 260.545 104.582 L 264.651 104.515 Z" transform="matrix(0.999997, 0, 0, 1, -168.585199, -0.555092)"/>
  <path class="star" d="M 281 50.632 L 282.349 52.572 L 286.455 52.614 L 283.182 53.855 L 284.372 55.82 L 281 54.647 L 277.628 55.82 L 278.818 53.855 L 275.545 52.614 L 279.651 52.572 Z" transform="matrix(0.999997, 0, 0, 1, -166.376221, -8.286381)"/>
  <path class="star" d="M 99.709 29.726 L 100.788 32.83 L 104.073 32.897 L 101.455 34.882 L 102.406 38.028 L 99.709 36.151 L 97.012 38.028 L 97.963 34.882 L 95.345 32.897 L 98.63 32.83 Z"/>
  <path class="star" d="M 217.5 55.043 L 218.984 60.087 L 223.501 60.196 L 219.9 63.422 L 221.209 68.533 L 217.5 65.483 L 213.791 68.533 L 215.1 63.422 L 211.499 60.196 L 216.016 60.087 Z" transform="matrix(0.999999, 0, 0, 1.000001, -175.727883, -6.96105)"/>
  <path class="star" d="M 469 104.264 L 470.619 108.144 L 475.547 108.227 L 471.619 110.709 L 473.046 114.641 L 469 112.294 L 464.954 114.641 L 466.381 110.709 L 462.453 108.227 L 467.381 108.144 Z" transform="matrix(1, 0, 0, 1.000001, -138.691589, 0.033812)"/>
  <path class="star" d="M 306.79 35.462 L 308.274 40.506 L 312.791 40.615 L 309.19 43.841 L 310.499 48.952 L 306.79 45.902 L 303.081 48.952 L 304.39 43.841 L 300.789 40.615 L 305.306 40.506 Z"/>
  <path class="star" d="M 215.582 38.904 L 216.661 40.844 L 219.946 40.886 L 217.328 42.127 L 218.279 44.092 L 215.582 42.919 L 212.885 44.092 L 213.836 42.127 L 211.218 40.886 L 214.503 40.844 Z"/>
  <path class="star" d="M 251.721 123.801 L 252.665 126.905 L 255.539 126.972 L 253.248 128.957 L 254.081 132.103 L 251.721 130.226 L 249.361 132.103 L 250.194 128.957 L 247.903 126.972 L 250.777 126.905 Z"/>
  <path class="star" d="M 433.562 71.027 L 434.641 74.131 L 437.926 74.198 L 435.308 76.183 L 436.259 79.329 L 433.562 77.452 L 430.865 79.329 L 431.816 76.183 L 429.198 74.198 L 432.483 74.131 Z"/>
  <path class="star" d="M 364.726 35.462 L 365.805 39.73 L 369.09 39.822 L 366.472 42.552 L 367.423 46.877 L 364.726 44.296 L 362.029 46.877 L 362.98 42.552 L 360.362 39.822 L 363.647 39.73 Z"/>
  <path class="star" d="M 265 228.043 L 267.158 233.087 L 273.729 233.196 L 268.492 236.422 L 270.395 241.533 L 265 238.483 L 259.605 241.533 L 261.508 236.422 L 256.271 233.196 L 262.842 233.087 Z" transform="matrix(1, 0, 0, 0.999998, -168.73317, 18.515909)"/>
  <path class="star" d="M 272 167.969 L 273.888 173.401 L 279.638 173.518 L 275.055 176.993 L 276.721 182.497 L 272 179.212 L 267.279 182.497 L 268.945 176.993 L 264.362 173.518 L 270.112 173.401 Z" transform="matrix(0.999998, 0, 0, 1, -167.701815, 9.753296)"/>
  <path class="star" d="M 220 161.19 L 221.619 165.458 L 226.547 165.55 L 222.619 168.28 L 224.046 172.605 L 220 170.024 L 215.954 172.605 L 217.381 168.28 L 213.453 165.55 L 218.381 165.458 Z" transform="matrix(1, 0, 0, 0.999998, -175.359989, 8.501977)"/>
  <path class="star" d="M 413.5 177.791 L 417.411 189.431 L 429.321 189.682 L 419.828 197.127 L 423.278 208.922 L 413.5 201.884 L 403.722 208.922 L 407.172 197.127 L 397.679 189.682 L 409.589 189.431 Z" transform="matrix(1, 0, 0, 1.000001, -146.864655, 12.551112)"/>
  <path class="star" d="M 347.5 225.043 L 349.523 230.087 L 355.683 230.196 L 350.773 233.422 L 352.557 238.533 L 347.5 235.483 L 342.443 238.533 L 344.227 233.422 L 339.317 230.196 L 345.477 230.087 Z" transform="matrix(1.000002, 0, 0, 1, -156.584616, 18.073639)"/>
  <path class="star" d="M 313 261.306 L 316.506 270.23 L 327.184 270.423 L 318.674 276.131 L 321.766 285.174 L 313 279.778 L 304.234 285.174 L 307.326 276.131 L 298.816 270.423 L 309.494 270.23 Z" transform="matrix(1, 0, 0, 1.000002, -161.664566, 24.258032)"/>
  <path class="star" d="M 50.376 319.983 L 53.343 326.191 L 62.378 326.325 L 55.177 330.295 L 57.794 336.586 L 50.376 332.832 L 42.958 336.586 L 45.575 330.295 L 38.374 326.325 L 47.409 326.191 Z"/>
  <path class="star" d="M 260.5 370.043 L 262.793 375.087 L 269.775 375.196 L 264.21 378.422 L 266.232 383.533 L 260.5 380.483 L 254.768 383.533 L 256.79 378.422 L 251.225 375.196 L 258.207 375.087 Z" transform="matrix(0.999999, 0, 0, 1, -169.395647, 39.426727)"/>
  <path class="star" d="M 289 327.116 L 290.619 331.772 L 295.547 331.873 L 291.619 334.851 L 293.046 339.569 L 289 336.754 L 284.954 339.569 L 286.381 334.851 L 282.453 331.873 L 287.381 331.772 Z" transform="matrix(0.999999, 0, 0, 1, -165.19854, 33.020813)"/>
  <path class="star" d="M 434.709 202.962 L 436.867 208.394 L 443.438 208.511 L 438.201 211.986 L 440.104 217.49 L 434.709 214.205 L 429.314 217.49 L 431.217 211.986 L 425.98 208.511 L 432.551 208.394 Z"/>
  <path class="star" d="M 437.577 136.421 L 439.061 141.465 L 443.578 141.574 L 439.977 144.8 L 441.286 149.911 L 437.577 146.861 L 433.868 149.911 L 435.177 144.8 L 431.576 141.574 L 436.093 141.465 Z"/>
  <path class="star" d="M 504.5 182.086 L 507.872 192.174 L 518.139 192.391 L 509.956 198.843 L 512.929 209.066 L 504.5 202.966 L 496.071 209.066 L 499.044 198.843 L 490.861 192.391 L 501.128 192.174 Z" transform="matrix(1.000002, 0, 0, 1.000001, -133.464819, 12.845608)"/>
  <path class="star" d="M 460 233.791 L 464.316 245.431 L 477.458 245.682 L 466.983 253.127 L 470.789 264.922 L 460 257.884 L 449.211 264.922 L 453.017 253.127 L 442.542 245.682 L 455.684 245.431 Z" transform="matrix(1, 0, 0, 0.999998, -140.016937, 20.798449)"/>
  <path class="star" d="M 257.457 307.363 L 262.177 319.003 L 276.551 319.254 L 265.095 326.699 L 269.258 338.494 L 257.457 331.456 L 245.656 338.494 L 249.819 326.699 L 238.363 319.254 L 252.737 319.003 Z"/>
  <path class="star" d="M 357.5 333.233 L 361.141 342.545 L 372.23 342.746 L 363.392 348.702 L 366.604 358.138 L 357.5 352.507 L 348.396 358.138 L 351.608 348.702 L 342.77 342.746 L 353.859 342.545 Z" transform="matrix(1.000001, 0, 0, 1, -155.111726, 34.935211)"/>
  <path class="star" d="M 567 266.19 L 568.619 270.458 L 573.547 270.55 L 569.619 273.28 L 571.046 277.605 L 567 275.024 L 562.954 277.605 L 564.381 273.28 L 560.453 270.55 L 565.381 270.458 Z" transform="matrix(0.999996, 0, 0, 1.000005, -124.257313, 23.962824)"/>
  <path class="star" d="M 600.5 232.264 L 601.444 236.144 L 604.318 236.227 L 602.027 238.709 L 602.86 242.641 L 600.5 240.294 L 598.14 242.641 L 598.973 238.709 L 596.682 236.227 L 599.556 236.144 Z" transform="matrix(0.999992, 0, 0, 1.000003, -119.321974, 18.882942)"/>
  <path class="star" d="M 540.5 343.337 L 542.793 346.829 L 549.775 346.905 L 544.21 349.138 L 546.232 352.677 L 540.5 350.565 L 534.768 352.677 L 536.79 349.138 L 531.225 346.905 L 538.207 346.829 Z" transform="matrix(1.000003, 0, 0, 0.999994, -128.163984, 35.158188)"/>
  <path class="star" d="M 540.5 344.853 L 540.635 345.629 L 541.046 345.646 L 540.718 346.142 L 540.837 346.928 L 540.5 346.459 L 540.163 346.928 L 540.282 346.142 L 539.954 345.646 L 540.365 345.629 Z" transform="matrix(1.000053, 0, 0, 0.999973, -128.191049, 34.797167)"/>
  <path class="star" d="M 553 393.264 L 554.349 397.144 L 558.455 397.227 L 555.182 399.709 L 556.372 403.641 L 553 401.294 L 549.628 403.641 L 550.818 399.709 L 547.545 397.227 L 551.651 397.144 Z" transform="matrix(0.999995, 0, 0, 1, -126.318561, 42.592865)"/>
  <path class="star" d="M 589 334.337 L 590.349 337.829 L 594.455 337.905 L 591.182 340.138 L 592.372 343.677 L 589 341.565 L 585.628 343.677 L 586.818 340.138 L 583.545 337.905 L 587.651 337.829 Z" transform="matrix(0.999995, 0, 0, 1, -121.016917, 33.83075)"/>
  <path class="star" d="M 347.517 330.309 L 349.136 335.353 L 354.064 335.462 L 350.136 338.688 L 351.563 343.799 L 347.517 340.749 L 343.471 343.799 L 344.898 338.688 L 340.97 335.462 L 345.898 335.353 Z"/>
  <path class="star" d="M 310.231 437.004 L 311.984 442.436 L 317.323 442.553 L 313.068 446.028 L 314.614 451.532 L 310.231 448.247 L 305.848 451.532 L 307.394 446.028 L 303.139 442.553 L 308.478 442.436 Z"/>
  <path class="star" d="M 302.774 383.083 L 304.123 386.963 L 308.229 387.046 L 304.956 389.528 L 306.146 393.46 L 302.774 391.113 L 299.402 393.46 L 300.592 389.528 L 297.319 387.046 L 301.425 386.963 Z"/>
  <path class="star" d="M 185.18 453.065 L 186.933 458.497 L 192.272 458.614 L 188.017 462.089 L 189.563 467.593 L 185.18 464.308 L 180.797 467.593 L 182.343 462.089 L 178.088 458.614 L 183.427 458.497 Z"/>
  <path class="star" d="M 52.671 456.507 L 55.099 459.999 L 62.491 460.075 L 56.599 462.308 L 58.74 465.847 L 52.671 463.735 L 46.602 465.847 L 48.743 462.308 L 42.851 460.075 L 50.243 459.999 Z"/>
  <path class="star" d="M 230.5 225.896 L 232.523 231.716 L 238.683 231.841 L 233.773 235.564 L 235.557 241.461 L 230.5 237.942 L 225.443 241.461 L 227.227 235.564 L 222.317 231.841 L 228.477 231.716 Z" transform="matrix(1, 0, 0, 0.999998, -173.81363, 18.36858)"/>
  </g>
  </svg>
  </div>

  <h1 class="greeting" aria-label="Season's Greetings"></h1>
</div>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css?family=Tangerine:700');

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
  padding: 1em;
  overflow: hidden;
  border: 2px solid darkgray;
  border-radius: 20px;
  background-color: #1b2225;
}

svg {
  overflow: visible;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-width: 600px;
  height: 400px;
  background-color: #08042d;
  opacity: 0;
}

.starred-sky {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.greeting {
  font-family: 'Tangerine', cursive;
  font-size: 4em;
  text-align: center;
  transform: rotate(-30deg) scale(0deg) translate(-100px, -300px);
  color: #fff;
  position: relative;
  z-index: 3;
  mix-blend-mode: hard-light;
  filter: drop-shadow(1px 1px 2px white);
}

.ball-container {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

.starred-ball {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  margin: 0 auto; 
}

/* media queries */
@media (min-width: 493px) {
  .greeting {
    font-size: 6em;
    transform: rotate(30deg) translate(-120px, -250px);
    white-space: nowrap;
  }
}

@media (min-width: 580px) {
  .greeting {
    font-size: 6em;
    transform: rotate(30deg) translate(-120px, -250px);
    white-space: nowrap;
  }
}
!

JS 

              
                function getTranslatePos() {
  var coords = [];
  if (window.innerWidth >= 300 && window.innerWidth <= 492) {
    coords.push(5, -280);
  } else if (window.innerWidth >= 493 && window.innerWidth <= 579) {
    coords.push(-35, -310);
  } else {
    coords.push(-20, -310);
  }
  return coords;
}

var coords = getTranslatePos(),
  xCoord = coords[0],
  yCoord = coords[1];

var sparkBallStars = KUTE.allFromTo('.sparkling-star', {
  opacity: 1
}, {
  opacity: 0
}, {
  offset: 200,
  repeat: 2,
  yoyo: true
});

var morphingBall = KUTE.fromTo('#ball', {
  path: '#ball',
  attr: {
    fill: 'rgba(21, 19, 121, 1)'
  },
  opacity: 0.5
}, {
  path: '#heartpath',
  attr: {
    fill: '#7c0e18'
  },
  opacity: 1
}, {
  easing: 'easingElasticIn',
  morphIndex: 12,
  duration: 3000
});

var starredSky = KUTE.to('.bg', {
  opacity: 1
}, {
  duration: 8000,
  delay: -300,
});

var sparkSkyStars = KUTE.allFromTo('.star', {
  opacity: 0.1
}, {
  opacity: 1
}, {
  offset: 200,
  repeat: 4,
  yoyo: true
});

var greetingText = KUTE.to('.greeting', {
  opacity: 1,
  scale: 1,
  rotate: 30,
  translateX: xCoord,
  translateY: yCoord,
  text: 'Happy 2017 Folks!',
  color: '#b254e5'
}, {
  easing: 'easingBounceIn',
  duration: 4000,
  delay: -1000
});

sparkBallStars.chain(morphingBall, starredSky, sparkSkyStars, greetingText).start();
!
999px

Console