Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div id="total-animation" class="animate">
  <div id="ring-1" class="ring">
    <svg viewBox="0 0 1756 1756">
      <path d="
          M940.396,1682.636
          C495.765,1716.95,107.541,1384.349,73.23,939.719 M1554.421,505.405c205.562,373.438,69.481,842.77-303.958,1048.332
           M1492.62,1245.941c-203.443,339.307-643.392,449.436-982.697,245.986 M387.872,465.698
          c227.493-270.847,631.438-305.993,902.285-78.501 M702.036,1481.495c-333.539-97.34-525.001-446.61-427.66-780.147
           M1457.607,796.938c44.541,319.971-178.715,615.438-498.688,659.979 M942.021,358.87
          c286.491,35.209,490.176,295.972,454.969,582.464 M1225.755,1207.476c-182.198,191.912-485.448,199.791-677.36,17.595
           M452.407,694.084c101.353-235.206,374.164-343.707,609.37-242.355 M751.591,1228.441
          c-193.772-69.97-294.129-283.753-224.162-477.527 M591.517,793.082c46.676-158.375,212.891-248.921,371.263-202.246
           M871.917,661.593c119.293-3.509,218.836,90.343,222.347,209.636 M1131.709,926.843c-27.203,139.974-162.71,231.376-302.681,204.172
           M1158.467,609.435c148.1,154.747,142.708,400.242-12.039,548.342 M1382.21,1587.358
          c-391.993,278.271-935.305,186.104-1213.589-205.88 M660.711,192.408c378.408-120.166,782.524,89.151,902.688,467.545
           M1515.923,928.533c-28.138,352.104-336.354,614.704-688.46,586.561 M338.518,1033.302
          c-85.995-298.086,85.931-609.424,384.02-695.407 M1019.518,1263.507c-213.131,77.98-449.107-31.557-527.102-244.692
           M1174.914,537.781c187.629,163.786,206.954,448.64,43.158,636.264 M494.846,712.695c91.061-211.742,336.49-309.57,548.244-218.518
           M1117.385,1102.5c-124.209,132.032-331.919,138.373-463.961,14.167 M944.501,587.305
          c160.302,36.592,260.582,196.188,223.999,356.493 M1099.845,818.386c32.702,122.373-39.979,248.062-162.35,280.767
           M785.895,1045.701c-92.854-51.01-126.77-167.617-75.75-260.478 M735.145,858.038c10.783-79.03,83.584-134.355,162.615-123.57
           M96.776,814.421C131.732,382.853,509.893,61.364,941.457,96.322 M213.484,327.76C517.22-39.358,1061.007-90.728,1428.121,213.007
           M755.795,58.847c452.266-67.583,873.65,244.24,941.233,696.506 M1619.266,1085.969
          c-115.023,409.326-540.051,647.881-949.375,532.857 M868.974,1565.472c-379.859-5.066-683.659-317.084-678.586-696.941
           M1412.24,493.352c212.287,294.978,145.258,706.161-149.721,918.447 M290.165,1041.221
          c-90.312-324.75,99.724-661.198,424.478-751.51 M775.399,397.657c265.14-56.758,526.062,112.151,582.819,377.29 M489.185,936.881
          c-32.684-214.833,114.969-415.466,329.801-448.148 M831.425,1158.235c-154.937-25.808-259.608-172.313-233.804-327.25
           M808.91,618.101c143.387-38.251,290.62,46.975,328.872,190.361 M961.173,1048.854c-94.521,45.857-208.311,6.413-254.169-88.107
           M985.865,762.807c63.471,59.483,66.704,159.147,7.221,222.621 M822.381,995.222c-64.9-30.801-92.542-108.375-61.741-173.279
           M993.704,884.199c-3.572,63.817-58.193,112.651-122.008,109.083 M785.21,836.586c22.711-51.34,82.734-74.546,134.075-51.836
           M920.014,798.579c43.71,23.114,60.407,77.281,37.293,120.99 M923,945.889c-37.646,24.774-88.244,14.34-113.019-23.306
           M805.388,897.882c-11.143-40.191,12.401-81.803,52.593-92.947 M926.526,843.249c19.04,26.711,12.817,63.796-13.894,82.835
           M882.934,931.366c-29.639,2.638-55.798-19.246-58.435-48.883 M916.438,893.75c-8.857,21.14-33.172,31.096-54.311,22.237
           M865.717,845.308c17.895-6.873,37.974,2.062,44.846,19.955 M852.026,877.706c0-14.435,11.697-26.133,26.133-26.133
           M1217.393,858.588c10.566,187.368-132.738,347.811-320.108,358.374 M1195.806,1277.249
          c-220.661,175.441-541.753,138.784-717.191-81.878 M1410.018,918.627c-22.664,293.695-279.102,513.393-572.798,490.727
           M1350.496,1382.105c-278.648,260.82-715.938,246.367-976.757-32.277 M1332.215,228.061
          c358.757,250.735,446.315,744.787,195.58,1103.542 M1200.056,390.457c269.046,177.73,343.064,539.885,165.333,808.933
           M1491.157,475.569c222.039,338.509,127.631,792.882-210.88,1014.921 M254.42,950.019
          c-40.004-344.55,206.859-656.263,551.408-696.266 M1121.564,1283.384c-224.125,134.386-514.729,61.642-649.109-162.485
           M606.19,553.665c178.904-150.267,445.726-127.052,595.993,51.853 M1277.152,761.174c64.298,220.314-62.17,451.021-282.485,515.317
           M824.983,1260.257c-211.354-29.422-358.822-224.589-329.401-435.942 M535.623,919.694
          c-23.256-189.239,111.285-361.483,300.523-384.74 M1096.152,1107.111c-126.767,120.349-327.073,115.145-447.422-11.621
           M757.043,596.291c155.363-66.947,335.565,4.722,402.513,160.085 M1110.001,793.914c46.216,127.996-20.073,269.209-148.067,315.426
           M822.436,688.177c104.61-30.831,214.401,28.979,245.232,133.591 M735.584,873.387c2.319-78.798,68.071-140.791,146.869-138.473
           M910.783,1044.985c-92.456,17.97-181.964-42.406-199.934-134.863 M701.129,1062.662c-102.217-97.825-105.777-259.984-7.953-362.2
           M1460,634.196c134.448,321.299-17.01,690.715-338.304,825.161 M771.71,216.606c365.099-58.972,708.851,189.16,767.823,554.257
           M1347.008,1210.427c-183.816,258.921-542.695,319.8-801.623,135.991 M425.704,733.831
          c79.372-249.944,346.307-388.206,596.259-308.832 M911.817,1298.686c-232.578,18.59-436.168-154.866-454.754-387.447
           M981.125,521.099c196.899,56.795,310.463,262.446,253.659,459.344 M1133.128,970.872
          c-51.517,140.785-207.39,213.139-348.171,161.63 M653.804,1073.408c-108.192-123.935-95.428-312.089,28.509-420.276 M769.387,624.33
          c139.872-60.145,301.988,4.475,362.139,144.339 M1026.776,1035.508c-87.221,82.043-224.419,77.855-306.464-9.355 M686.549,921.321
          c-24.165-105.889,42.074-211.307,147.96-235.479 M839.137,1023.938c-80.83-21.604-128.839-104.623-107.236-185.456 M989.312,816.577
          c33.697,61.338,11.297,138.36-50.037,172.056 M865.383,783.051c52.203-7.124,100.291,29.42,107.414,81.623 M192.198,1025.806
          c-81.819-378.954,159.036-752.451,537.991-834.27 M437.268,1499.73C93.691,1256.136,12.644,780.179,256.24,436.601 M211.171,559.571
          C386.857,191.097,827.95,34.823,1196.424,210.508 M372.009,299.696C691.227,20.05,1176.657,52.127,1456.301,371.342
           M141.077,526.148c194.144-407.19,681.579-579.882,1088.77-385.736 M1704.721,861.101
          c9.148,456.421-353.404,833.809-809.828,842.955 M836.52,361.531c285.064-23.091,534.854,189.265,557.943,474.332 M643.689,1425.779
          C340.964,1296.184,200.628,945.75,330.225,643.024 M515.059,438.606c242.493-200.629,601.686-166.697,802.315,75.798
           M337.436,796.847c44.642-298.739,322.981-504.711,621.721-460.07 M1015.899,1367.203
          c-270.374,75.978-551.12-81.598-627.101-351.972 M1332.632,871.604c3.349,250.911-197.321,457.01-448.233,460.357 M624.445,1230.454
          c-194.845-140.226-239.12-411.826-98.896-606.67 M986.339,489.272c214.513,59.653,340.038,281.89,280.384,496.4 M561.231,809.789
          c37.49-175.134,209.841-286.706,384.976-249.215 M917.417,620.733c141.905,21.588,239.435,154.113,217.846,296.019
           M1063.637,846.804c17.045,102.341-52.095,199.116-154.437,216.162 M706.84,831.927c25.269-94.713,122.521-151.007,217.232-125.741
           M991.385,932.517c-30.291,62.438-105.453,88.49-167.889,58.199 M802.417,948.819c-39.291-41.927-37.155-107.759,4.771-147.05
           M955.956,840.831c20.346,42.871,2.088,94.112-40.782,114.458 M882.6,954.007c-42.15,2.358-78.229-29.896-80.591-72.053
           M851.165,816.264c33.912-15.001,73.56,0.328,88.562,34.24 M826.05,905.317c-15.268-28.872-4.237-64.65,24.634-79.918
           M923.364,907.308c-16.364,24.867-49.786,31.761-74.653,15.396 M891.66,829.597c26.547,7.361,42.099,34.848,34.738,61.396
           M855.558,909.621c-17.644-12.576-21.752-37.072-9.176-54.716 M913.775,880.821c-1.742,19.575-19.021,34.03-38.601,32.289
           M888.92,902.952c-13.963,5.851-30.021-0.726-35.873-14.689 M856.927,869.446c4.54-11.82,17.805-17.722,29.622-13.182
           M878.33,860.403c9.534,0,17.262,7.728,17.262,17.262 M865.698,1101.757c-123.766-6.979-218.424-112.956-211.444-236.72
           M1142.246,1087.495c-115.885,145.756-327.979,169.97-473.734,54.084
         " />
    </svg>
  </div>

  <div id="ring-2" class="ring">
    <svg viewBox="0 0 1756 1756">
      <path d="	
          M739.537,160.516c396.092-76.463,779.14,182.62,855.604,578.716 M1199.637,1675.333
          c-440.55,177.652-941.659-35.453-1119.312-476.004 M1325.768,409.333c258.678,247.319,267.879,657.466,20.562,916.139
           M548.74,1354.339c-263.269-181.841-329.272-542.637-147.43-805.906 M579.726,393.031
          c267.671-164.732,618.181-81.285,782.912,186.391 M1402.667,809.405c37.711,289.791-166.624,555.255-456.413,592.965
           M1057.714,1314.936c-241.5,99.271-517.721-16.019-616.994-257.521 M1102.171,506.753
          c204.867,123.818,270.563,390.249,146.742,595.119 M550.387,1139.666c-144.703-180.932-115.33-444.887,65.604-589.59
           M683.517,601.925c152.304-107.406,362.819-71.016,470.223,81.284 M648.048,1020.017c-78.613-126.989-39.398-293.657,87.589-372.273
           M924.119,1067.624c-104.909,25.485-210.603-38.897-236.088-143.802 M1087.274,774.075c57.229,115.596,9.916,255.68-105.684,312.905
           M1186.573,1044.561c-92.165,170.438-305.038,233.886-475.474,141.717 M345.784,197.546
          C721.416-96.417,1264.17-30.214,1558.126,345.41 M852.066,1527.438c-358.852-14.278-638.155-316.729-623.875-675.595 M369.9,870.965
          c3.68-280.616,234.141-505.101,514.76-501.415 M908.848,507.274c204.599,17.036,356.619,196.685,339.594,401.275 M1217.91,1103.168
          c-124.479,187.787-377.6,239.094-565.382,114.604 M582.944,1113.21c-130.102-162.938-103.489-400.456,59.435-530.559
           M757.171,753.11c68.8-66.729,178.642-65.043,245.358,3.752 M757.789,928.928c-28.321-66.363,2.521-143.113,68.886-171.431
           M211.548,1119.751C77.781,751.631,267.746,344.809,635.866,211.04 M1686.947,988.874
          c-61.486,446.756-473.467,759.049-920.219,697.557 M429.795,1516.378C76.98,1268.802-8.33,782.126,239.245,429.306 M967.27,1621.182
          c-410.715,49.271-783.573-243.718-832.841-654.429 M1474.745,518.518c198.294,329.56,91.89,757.422-237.667,955.713
           M705.471,279.754c330.165-95.317,675.053,95.041,770.374,425.205 M903.288,1320.929c-244.88,13.936-454.672-173.27-468.604-418.149
           M524.567,919.007c-22.896-195.231,116.798-372.05,312.03-394.946 M773.501,651.218c124.998-57.744,273.132-3.229,330.876,121.77
           M879.774,1120.605c-134.239,0.942-243.818-107.104-244.763-241.348 M909.541,708.371c93.43,17.385,155.072,107.212,137.686,200.642
           M999.53,952.033c-41.139,67.077-128.855,88.104-195.935,46.972 M801.287,788.375c49.247-42.4,123.535-36.85,165.938,12.396
           M975.11,845.002c17.976,53.589-10.896,111.597-64.485,129.571 M903.648,798.845c43.459,14.128,67.234,60.808,53.104,104.269
           M928.508,896.047c-10.215,27.858-41.079,42.16-68.938,31.943 M871.982,843.944c18.562-3.354,36.322,8.968,39.683,27.525
           M855.257,883.806c-3.452-12.59,3.951-25.598,16.544-29.053 M1178.586,813.054c35.621,165.981-70.052,329.391-236.032,365.011
           M1059.567,452.984c234.479,100.244,343.294,371.583,243.046,606.063 M677.079,1211.709
          c-184.503-111.194-243.927-350.881-132.732-535.386 M1153.921,1387.483c-281.597,152.178-633.212,47.268-785.388-234.328
           M151.595,797.465c44.364-401.345,405.651-690.71,807-646.347 M940.006,1410.135c-294.094,34.021-560.062-176.788-594.084-470.884
           M533.359,903.493c-14.275-190.577,128.632-356.622,319.208-370.896 M823.582,1176.547
          c-165.084-30.277-274.356-188.641-244.076-353.725 M645.801,717.254c88.587-128.471,264.532-160.799,393.003-72.212 M963.331,639.91
          c131.306,46.902,199.722,191.355,152.819,322.663 M656.898,944.731c-37.053-122.341,32.083-251.542,154.425-288.596
           M1102.021,890.746c-7.23,123.506-113.207,217.755-236.714,210.521 M857.039,1056.562
          c-98.816-11.802-169.352-101.467-157.551-200.28 M927.973,785.788c50.737,27.374,69.675,90.69,42.303,141.426 M758.333,843.974
          c18.597-66.32,87.428-105.003,153.749-86.405 M815.582,701.156c97.477-34.7,204.622,16.188,239.32,113.666 M846.562,1337.716
          c-254.104-17.574-445.825-237.789-428.252-491.887 M1345.348,1024.932c-81.271,257.959-356.246,401.188-614.199,319.911
           M1120.872,629.068c137.299,133.896,140.059,353.721,6.157,491.024 M592.191,761.393c64.176-158.099,244.347-234.229,402.445-170.05
           M1077.628,1061.868c-101.733,110.041-273.401,116.771-383.442,15.033 M733.801,1013.606
          c-75.102-79.871-71.233-205.482,8.63-280.585 M824.089,666.701c116.5-30.038,235.278,40.051,265.312,156.552 M1079.648,889.61
          c-6.598,111.147-102.028,195.893-213.173,189.302 M912.738,738.011c77.131,18.957,124.29,96.841,105.337,173.976 M881.835,970.251
          c-51.146,1.896-94.131-38.023-96.022-89.164 M944.415,900.261c-12.476,36.455-52.14,55.891-88.594,43.413 M1006.684,380.646
          c274.515,70.889,439.563,350.866,368.677,625.378 M395.971,597.83c154.526-266.435,495.755-357.147,762.188-202.62 M1305.16,546.05
          c183.156,235.738,140.534,575.294-95.204,758.449 M1422.216,736.445c78,300.393-102.265,607.11-402.651,685.112 M1350.005,511.208
          c202.402,260.508,155.302,635.735-105.208,838.139 M617.961,1423.186c-301.29-143.804-428.945-504.595-285.14-805.884
           M1229.366,1019.727c-78.46,193.882-299.214,287.438-493.095,208.979 M597.122,544.453
          c184.04-155.313,459.117-132.025,614.427,52.016 M1284.488,784.348c51.539,224.318-88.515,447.929-312.832,499.47 M1108.654,550.702
          c180.588,127.21,223.854,376.711,96.645,557.297 M513.255,806.929c39.074-201.634,234.188-333.399,435.821-294.325
           M733.205,1176.564c-165.078-80.153-233.917-278.934-153.764-444.014 M731.088,595.976
          c155.583-81.319,347.615-21.125,428.938,134.458 M1026.753,692.713c102.153,81.975,118.511,231.229,36.535,333.381
           M1033.419,987.535c-60.677,85.654-179.294,105.902-264.949,45.227 M838.945,1004.85c-70.236-21.752-109.54-96.315-87.788-166.555
           M964.502,780.608c53.606,47.594,58.482,129.625,10.887,183.234 M805.384,933.558c-30.862-40.284-23.226-97.957,17.062-128.818
           M856.743,804.711c40.293-11.919,82.616,11.08,94.536,51.373 M876.931,940.493c-34.692-0.772-62.188-29.521-61.419-64.215
           M828.188,855.909c12.017-27.689,44.2-40.392,71.891-28.375 M1545.367,910.31c-18.024,368.356-331.217,652.319-699.573,634.296
           M840.052,899.761c-12.195-21.136-4.952-48.155,16.188-60.352 M469.046,378.809c275.431-225.969,681.855-185.901,907.844,89.525
           M864.921,852.305c14.008-7.403,31.366-2.051,38.771,11.958 M868.733,893.179c-8.564-5.3-11.21-16.538-5.911-25.103
           M889.614,883.338c-3.129,6.229-10.715,8.746-16.947,5.617 M736.026,795.878c45.176-78.594,145.501-105.679,224.095-60.503
           M654.591,981.292c-57.227-123.567-3.449-270.124,120.121-327.351
         " />
    </svg>
  </div>

  <svg id="polaris-graphics-animation" viewBox="0 0 1200 800">

    <g id="center">
      <path id="blur-1" class="blurred-star" d="
            M483.7,355.5c-1.4,0-2.5-1.1-2.5-2.5c0-7.8-6.3-14.1-14.1-14.1c-1.4,0-2.5-1.1-2.5-2.5
            s1.1-2.5,2.5-2.5c10.5,0,19.1,8.6,19.1,19.1C486.2,354.4,485.1,355.5,483.7,355.5z
          " />
      <path id="blur-2" class="blurred-star" d="
            M490.9,355.5c-1.4,0-2.5-1.1-2.5-2.5c0-11.7-9.6-21.3-21.3-21.3c-1.4,0-2.5-1.1-2.5-2.5
            c0-1.4,1.1-2.5,2.5-2.5c14.5,0,26.3,11.8,26.3,26.3C493.4,354.4,492.2,355.5,490.9,355.5z
          " />
      <path id="blur-3" class="blurred-star" d="
            M498.1,355.5c-1.4,0-2.5-1.1-2.5-2.5c0-15.7-12.8-28.6-28.6-28.6c-1.4,0-2.5-1.1-2.5-2.5
            s1.1-2.5,2.5-2.5c18.5,0,33.6,15.1,33.6,33.6C500.6,354.4,499.5,355.5,498.1,355.5z
          " />
      <path id="blur-4" class="blurred-star" d="
            M505.4,355.5c-1.4,0-2.5-1.1-2.5-2.5c0-19.8-16.1-35.8-35.8-35.8c-1.4,0-2.5-1.1-2.5-2.5
            c0-1.4,1.1-2.5,2.5-2.5c22.5,0,40.8,18.3,40.8,40.8C507.9,354.4,506.8,355.5,505.4,355.5z
          " />
      <circle id="star" cx="467" cy="353" r="8.3" />
    </g>

    <g id="lettering">

      <g id="graphics">

        <path id="gG" class="g-letter" d="
              M402.9,447.3v-12.2h-11.7v1.2h10.4V447c-5,5.8-10.2,8.4-16,8.4c-10.9,0-19.7-10.1-19.7-21.2
              c0-10.4,7.2-21.2,18.9-21.2c6.9,0,12.4,2.6,15.7,8.8l1.2-0.4c-2.8-5.6-7.7-9.7-16.9-9.7c-11.8,0-20.2,10.9-20.2,22.5
              c0,10.9,8.6,22.5,20.9,22.5c6,0,11.4-2.6,16-7.9L402.9,447.3z
            " />
        <path id="gR" class="g-letter" d="
              M469.5,425.4c0-6.6-5.2-13.4-12.5-13.4h-18v44.3h1.2v-43.1H457c6.2,0,11.2,5.9,11.2,12.2
              c0,6.1-4.1,12.2-10.8,12.2h-1.6l12.1,18.7h1.5l-11.2-17.4C464.8,438.4,469.5,432.2,469.5,425.4z
            " />
        <polygon id="gA" class="g-letter" points="

              520.4,413.8 538.8,456.3 540.2,456.3 520.9,412 519.8,412 500.5,456.3 501.8,456.3
            " />
        <path id="gP" class="g-letter" d="
              M590.5,412h-18v44.3h1.2v-43.1h16.8c6.2,0,11.2,5.9,11.2,12.2c0,6-4.1,12.2-10.8,12.2h-1.6
              l0.8,1.2h0.8c7.2,0,12-6.6,12-13.5C603,418.8,597.7,412,590.5,412z
            " />
        <polygon id="gH" class="g-letter" points="
              668.9,412 668.9,456.3 667.7,456.3 667.7,434.2 636.9,434.2 636.9,456.3 635.6,456.3 
              635.6,412 636.9,412 636.9,433 667.7,433 667.7,412
            " />
        <rect id="gI" class="g-letter" x="706.4" y="412" width="1.2" height="44.3" />
        <path id="gC" class="g-letter" d="
              M763.1,411.7c7.9,0,13.5,4.1,16.2,9.7l-1.2,0.4c-3.4-6.5-9.5-8.8-15.2-8.8
              c-12.4,0-19.4,10.8-19.4,21c0,11.3,8.7,21.4,19.6,21.4c5.9,0,12.7-2.9,16.1-9.4l1.2,0.3c-3.1,6.7-10.8,10.3-17.5,10.3
              c-12,0-20.6-11.6-20.6-22.8C742.2,423.2,749.8,411.7,763.1,411.7z
            " />
        <path id="gS" class="g-letter" d="
              M840,417.8c-3.5-3.9-7-5-12.2-5c-10.1,0-14.4,4.2-14.4,10.6c0,6.4,4.1,8.1,14,10.1
              c9.9,2,16.1,4.1,16.1,11.9c0,7.2-5.9,11.2-15.6,11.2c-7.1,0-12.5-2.2-17.2-6.9l0.9-0.8c4.5,4.6,9.6,6.6,16.4,6.6
              c8.8,0,14.3-3.3,14.3-9.9c0-6.6-4.6-8.9-14.8-10.9c-9.8-1.9-15.3-3.7-15.3-11.1c0-7.7,6.1-11.9,15.5-11.9c5.6,0,9.7,1.5,13.2,5.3
              L840,417.8z
            " />

      </g>

      <g id="p-laris">
        <path id="pP" class="p-letter" d="
              M393.7,318.9h-27.9c-0.5,0-1,0.4-1,1v66.2c0,0.6,0.5,1,1,1H377c0.5,0,1-0.4,1-1v-54.5
              c0-0.6,0.4-1,1-1h13.8c4.7,0,9.1,4,9.1,11c0,6.7-3.6,11-8.5,11h-8.6c-0.5,0-0.8,0.4-0.5,0.8l6.2,9.9c0.3,0.5,1,0.8,1.5,0.8h2.1
              c12.7,0,21.2-11,21.2-22.7C415.4,330.4,406.3,318.9,393.7,318.9z
            " />
        <path id="pL" class="p-letter" d="
              M524.5,387.1c-0.5,0-1-0.4-1-1v-66.2c0-0.6,0.5-1,1-1h11.2c0.5,0,1,0.4,1,1v54.5c0,0.6,0.4,1,1,1
              h32.7c0.5,0,1,0.5,1,1v9.6c0,0.6-0.5,1-1,1h-45.9V387.1z
            " />
        <path id="pA" class="p-letter" d="
              M621.5,334.3c0.2-0.5,0.5-0.5,0.7,0l18.2,51.9c0.2,0.5,0.8,0.9,1.3,0.9h10.9c0.6,0,0.9-0.4,0.7-0.9
              L630,319.9c-0.2-0.5-0.8-0.9-1.3-0.9H615c-0.5,0-1.1,0.4-1.3,0.9l-23.2,66.3c-0.2,0.5,0.1,0.9,0.7,0.9H602c0.5,0,1.1-0.4,1.3-0.9
              L621.5,334.3z
            " />
        <path id="pR" class="p-letter" d="
              M729.5,386.2l-15-23.9c-0.3-0.5-0.2-1,0.1-1.1c7.1-3.4,11.6-11.1,11.6-19.6
              c0-11.1-9.1-22.7-21.7-22.7h-29.1c-0.5,0-1,0.4-1,1v66.2c0,0.6,0.5,1,1,1h11.2c0.5,0,1-0.4,1-1v-54.5c0-0.6,0.4-1,1-1h15
              c4.7,0,9.2,4.7,9.2,11c0,6.1-3.7,11-8.6,11h-9.9c-0.5,0-0.8,0.4-0.5,0.8l20.6,32.8c0.3,0.5,1,0.8,1.5,0.8h13
              C729.6,387.1,729.8,386.7,729.5,386.2z
            " />
        <path id="pI" class="p-letter" d="
              M753.5,387.1c-0.6,0-1-0.4-1-1V320c0-0.5,0.4-1,1-1h11.2c0.6,0,1,0.5,1,1v66.1c0,0.6-0.4,1-1,1
              H753.5z
            " />
        <path id="pS" class="p-letter" d="
              M839.8,325.5c-5.9-3.8-13.9-7-23-7c-13.8,0-24.9,7.5-24.9,21.4c0,10.5,6.3,14.9,19.3,18.4
              c10.7,2.9,17.7,4.6,17.7,10.7c0,4.5-3.7,7-10.9,7c-9.5,0-18.9-5.1-22.2-7.7c-0.4-0.4-1-0.3-1.2,0.2l-4.9,9.6
              c-0.3,0.5-0.1,1.2,0.4,1.5c7.8,5.2,18,8.3,27.8,8.3c13.4,0,25.2-5.6,25.2-20.3c0-12.5-8.4-16.7-21.9-20.2
              c-10.3-2.7-15.6-4.1-15.6-9.7c0-4.9,3.6-7.7,10.8-7.7c7.3,0,14.9,3.9,17.6,6c0.4,0.4,1,0.3,1.2-0.2l4.9-9
              C840.4,326.4,840.2,325.8,839.8,325.5z
            " />
      </g>
    </g>
  </svg>
</div>
              
            
!

CSS

              
                

// --------------------------------------------------------------- Z INDECIES
// list all elements that need z-indexing in ascending order here
// use the index() function to return a number to be used as the z-index
// example - z-index:index($z-of,class-name);
$z-of:
'#home-bg',
'#home-header',
'.ring',
'#polaris-graphics-animation',
'#home-nav',
;



// --------------------------------------------------------------- MIXINS
@mixin absoluteFill{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}



// --------------------------------------------------------------- DIMENSIONS
$polarisCenterX:467;
$polarisCenterY:353;
$polarisWidth:1200;
$polarisHeight:800;

$ringHeight:1756;
$ringWidth:$ringHeight;

$ringSizeWidth: (100% * $ringWidth) / $polarisWidth;
$ringSizeHeight: (100% * $ringHeight) / $polarisHeight;
$ringSizeWidth: (100% * $ringWidth) / $polarisWidth;
$ringSizeHeight: (100% * $ringHeight) / $polarisHeight;

$polarisCenterXPercent:(100% * $polarisCenterX) / $polarisWidth;
$polarisCenterYPercent:(100% * $polarisCenterY) / $polarisHeight;



// --------------------------------------------------------------- COLOR VARS
$colorAccent: #ff5831; // that blood orange
$colorAnimationRings:			#448784	;
$colorAnimationBG:				#172126	;



// --------------------------------------------------------------- TIMER VARS
$rushOut:cubic-bezier(0,0,0,1); // fast into slow

// star initial timing
$a1Delay:						.5s		;
$a1Start: 						$a1Delay;
$a1Duration:					0.6s	;
$a1Bleed:						0.35s	;

// center blur timings
$a2Delay:						.07s	;
$a2Duration:					$a2Delay * 50 ;
$a2Start: $a1Start + $a1Duration - $a2Delay - $a1Bleed	;
	$a21Start:			$a2Start	+ ( $a2Delay * 0 );
	$a21Duration:		$a2Duration + ( $a2Delay * 3 );
	$a22Start:			$a2Start	+ ( $a2Delay * 1 );
	$a22Duration:		$a2Duration + ( $a2Delay * 2 );
	$a23Start:			$a2Start	+ ( $a2Delay * 2 );
	$a23Duration:		$a2Duration + ( $a2Delay * 1 );
	$a24Start:			$a2Start	+ ( $a2Delay * 3 );
	$a24Duration:		$a2Duration + ( $a2Delay * 0 );

$a3Delay:	0.4s;
$a3Start:	$a2Start + ($a2Delay * 4) + $a3Delay;
$a3Duration: $a2Duration - ($a2Delay * 4);

// rings start & spin
$a4Delay:	0.5s;
$a4Start:	$a2Start + $a2Duration ;
$a4Duration: 200s;
	$a41Duration: 40s;
	$a42Duration: 60s;

// lettering animation timing
$a5Delay:	-1.7s;
$a5Start:	$a2Start + $a2Duration + $a5Delay;
$a5Duration: 1s;
	$a5gDelay: .15s;

// center spin finals
$a6Delay:0;
$a6Start: $a2Start + $a2Duration + ($a2Delay );

$a7Start: $a5Start+0.75;

$timing1:cubic-bezier(.22,-0.08,0,.99);
$timing2:cubic-bezier(.52,-0.61,0,1);
$timing3:cubic-bezier(.25,0,0,1);
$timingZoomOut:cubic-bezier(0,0,0,.93) ;



// --------------------------------------------------------------- POSITION VARS
$centerInitialPosition:			translate(0,600px)	scale(1);
$centerSecondaryPosition:		translate(0,-30px)	scale(1.3) ;
$centerPosition:				translate(0,0)		scale(1);

$blurredStarInitialPosition:	rotate(	-45deg) 		scale(0)	;
$blurredStarStopPosition:		rotate( -45deg) 		scale(1.2)	;
$blurredStarSecondaryPosition:	rotate( -45deg) 		scale(1)	;
$blurredStar1Position:			rotate(260 + 25deg) 	scale(1)	;
$blurredStar2Position:			rotate(260 + 240deg) 	scale(1)	;
$blurredStar3Position:			rotate(260 + 70deg) 	scale(1)	;
$blurredStar4Position:			rotate(260 + 340deg) 	scale(1)	;
$blurredStar1Position2:			rotate(360 + 260 + 25deg) 	scale(1)	;
$blurredStar2Position2:			rotate(360 + 260 + 240deg) 	scale(1)	;
$blurredStar3Position2:			rotate(360 + 260 + 70deg) 	scale(1)	;
$blurredStar4Position2:			rotate(360 + 260 + 340deg) 	scale(1)	;

$outerRingInitialPosition: 		rotate(0deg);
$outerRingPosition: 			rotate(70deg);



// --------------------------------------------------------------- KEYFRAMES
$z: translateZ(0);

@keyframes spin-in {
	0% 		{ 	transform: rotate(0deg)	$z; 	opacity: 0;}
	1%		{ 	opacity: 1;}
	100% 	{ 	transform: rotate(360deg)	$z; 	opacity: 1;}
}
@keyframes spin {
	0% 		{ 	transform: rotate(0deg)		$z;}
	100% 	{ 	transform: rotate(360deg)	$z;}
}

@keyframes a1 {
	0% 		{	transform: $centerInitialPosition	$z;}
	70%		{	transform: $centerSecondaryPosition	$z;}
	100% 	{	transform: $centerPosition			$z;}
}

$stoppoint: 7%;
$midpoint: 15%;
@keyframes a21 {
	0% 				{	transform: $blurredStarInitialPosition		$z; opacity: 0;}
	#{$stoppoint}	{	transform: $blurredStarStopPosition			$z; opacity: 1;}
	#{$midpoint}	{	transform: $blurredStarSecondaryPosition	$z;}
	100% 			{	transform: $blurredStar1Position			$z;}
}
@keyframes a22 {
	0% 				{	transform: $blurredStarInitialPosition		$z; opacity: 0;}
	#{$stoppoint}	{	transform: $blurredStarStopPosition			$z; opacity: 1;}
	#{$midpoint}	{	transform: $blurredStarSecondaryPosition	$z;}
	100% 			{	transform: $blurredStar2Position			$z;}
}
@keyframes a23 {
	0% 				{	transform: $blurredStarInitialPosition		$z; opacity: 0;}
	#{$stoppoint}	{	transform: $blurredStarStopPosition			$z; opacity: 1;}
	#{$midpoint}	{	transform: $blurredStarSecondaryPosition	$z;}
	100% 			{	transform: $blurredStar3Position			$z;}
}
@keyframes a24 {
	0% 				{	transform: $blurredStarInitialPosition		$z; opacity: 0;}
	#{$stoppoint}	{	transform: $blurredStarStopPosition			$z; opacity: 1;}
	#{$midpoint}	{	transform: $blurredStarSecondaryPosition	$z;}
	100% 			{	transform: $blurredStar4Position			$z;}
}

@keyframes spin1 {
	0% 		{ 	transform: $blurredStar1Position	$z;}
	100% 	{ 	transform: $blurredStar1Position2	$z;}
}
@keyframes spin2 {
	0% 		{ 	transform: $blurredStar2Position	$z;}
	100% 	{ 	transform: $blurredStar2Position2	$z;}
}
@keyframes spin3 {
	0% 		{ 	transform: $blurredStar3Position	$z;}
	100% 	{ 	transform: $blurredStar3Position2	$z;}
}
@keyframes spin4 {
	0% 		{ 	transform: $blurredStar4Position	$z;}
	100% 	{ 	transform: $blurredStar4Position2	$z;}
}

@keyframes a3 {
	0% 		{ 	
		transform: $outerRingInitialPosition $z;
		opacity: 0;
	}
	100% 	{ 	
		transform: $outerRingPosition $z;	
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		transform: scale(1.1) translateX(0);
		// opacity: 0;
	}
	100% {
		// opacity: 1;
		transform: scale(1) translateX(0); 
		fill: #fff; /* without this it won't work in Chrome/Safari */
	}

}



// --------------------------------------------------------------- ANIMATION ALLOCATION
.animate{ // class is added by jQuery durin the window.load event

	#p-laris, #graphics{	
		opacity: 1;
		animation: fade-in $a5Duration $a5Start $rushOut 1 forwards;
		fill: rgba(white,0);
	}
	#graphics{ animation-delay: $a5Start + $a5gDelay; }

	#star{
		transform: $centerInitialPosition;
		animation: a1 $a1Duration $a1Start ease 1 forwards;
	}

	.blurred-star{ transform: $blurredStarInitialPosition; }
	#blur-1{	animation: a21 $a21Duration $a21Start $timing3 1 forwards, spin1 20s $a6Start linear infinite; }
	#blur-2{	animation: a22 $a22Duration $a22Start $timing3 1 forwards, spin2 30s $a6Start linear infinite; }
	#blur-3{	animation: a23 $a23Duration $a23Start $timing3 1 forwards, spin3 40s $a6Start linear infinite; }
	#blur-4{	animation: a24 $a24Duration $a24Start $timing3 1 forwards, spin4 50s $a6Start linear infinite; }

	#ring-1{	
		animation: 	spin-in $a41Duration $a21Start+1 linear 1 forwards, 
					spin $a41Duration linear infinite ;
		opacity: 0;
	}
	#ring-2{	
		animation: 	spin-in $a42Duration $a23Start+1 linear 1 forwards, 
					spin $a42Duration linear infinite ;
		opacity: 0;
	}
}



// --------------------------------------------------------------- STYLING PROPERTIES
#p-laris
,#graphics
,#star
,.blurred-star
{
	transform-origin: 467px 353px;
	backface-visibility: hidden;
}

#lettering
,.blurred-star
{
	fill:#fff;
}
#star{
	fill: $colorAccent;
}

.ring svg{
	fill: none;
	stroke: $colorAnimationRings;
	stroke-linecap: round;
	stroke-miterlimit: 10;
}
#ring-1 svg{
	opacity:.3;
	stroke-width:1px;
}
#ring-2 svg{
	opacity:.35;
	stroke-width:3px;
}

#home-bg{
	z-index: index($z-of, '#home-bg');
	@include absoluteFill;
	background: $colorAnimationBG;
}

#total-animation{
	@include absoluteFill;
  background: $colorAnimationBG;
  overflow: hidden;
}

.ring {
	z-index: index($z-of, '.ring');
	position: absolute;
	top: 50%;	// this is reset by perfectCenterRings()
	left: 50%; 	// this is reset by perfectCenterRings()
	width: 100% ;
	height: 100%;
	transform-origin: top left ;
	svg{
		width: 300%;
		height: 300%;
		transform: translate(-50%,-50%);
	}
}

#polaris-graphics-animation{
	z-index: index($z-of, '#polaris-graphics-animation');
	position: absolute;
	height: 100%;
	width: 100%;
}

#home-nav{
	z-index: index($z-of, '#home-nav');
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

$polarisRatio: $polarisWidth / $polarisHeight ;
$polarisRatioInvert: $polarisHeight / $polarisWidth ;
$windowHeight: 100vh ;
$windowWidth: 100vw ;

@media screen and (min-aspect-ratio: #{$polarisWidth}/#{$polarisHeight}) {
  .ring{
    top:((100% * $polarisCenterY) / $polarisHeight);
    $offsetX: ( $windowHeight/( $polarisRatioInvert * $polarisWidth/$polarisCenterX ) - $polarisRatio * $windowHeight/2 );
    $insetX: $windowWidth/2 ;
    left:calc(#{$insetX} + #{$offsetX});
  }
}

@media screen and (max-aspect-ratio: #{$polarisWidth}/#{$polarisHeight}) {
  .ring{
    left:((100% * $polarisCenterX) / $polarisWidth);
    $offsetY: ( $windowWidth/( $polarisRatio * $polarisHeight/$polarisCenterY ) - $polarisRatioInvert * $windowWidth/2 );
    $insetY: $windowHeight/2 ;
    top:calc(#{$insetY} + #{$offsetY});
  }
}

/*! 
 * Firefox 1.0+ Detection 
 * FireFox can't handle animationing such a large area?
 * hide the .rings so we don't see choppy animation
 */
@-moz-document url-prefix() { 
  .ring {
     display:none;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console