Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

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

            
              <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>
            
          
!
            
              @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;
  }
}
            
          
!
            
              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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console