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 id="root">
<svg width="491px" height="448px" viewBox="0 0 491 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M490.39,219.32 C490.39,219.94 490.39,220.56 490.39,221.17 C490.22,221.28 490.04,221.37 489.89,221.51 C481.07,230.15 472.25,238.8 463.43,247.44 C453.14,257.53 442.87,267.62 432.54,277.67 C431.66,278.53 431.6,279.27 431.89,280.36 C438.76,305.92 445.59,331.5 452.44,357.06 C459.51,383.42 466.59,409.77 473.67,436.13 C474.7,439.96 475.7,443.8 476.74,447.72 C317.78,447.72 158.99,447.72 0.11,447.72 C22.66,310.05 45.18,172.49 67.72,34.89 C69.98,34.89 72.09,34.89 74.2,34.89 C78.43,34.89 78.35,34.88 79.06,30.73 C80.79,20.74 82.62,10.76 84.42,0.7 C113.58,0.7 142.69,0.7 171.9,0.7 C172.6,3.26 173.31,5.85 174,8.33 C229.42,8.33 284.66,8.33 339.97,8.33 C339.29,5.72 338.63,3.23 337.95,0.62 C340.69,0.62 343.21,0.62 345.72,0.62 C357.97,0.62 370.22,0.65 382.47,0.579833919 C383.9,0.57 384.46,1.01 384.72,2.33 C385.03,3.88 385.65,5.38 385.89,6.94 C386.1,8.31 386.78,8.48 387.97,8.47 C402.74,8.43 417.51,8.46 432.28,8.42 C433.42,8.42 433.87,8.75 434.14,9.84 C435.09,13.66 436.15,17.46 437.17,21.27 C443.99,46.74 450.82,72.21 457.64,97.68 C461.78,113.16 465.92,128.65 470.04,144.14 C470.3,145.13 470.71,145.55 471.82,145.5 C473.96,145.39 476.12,145.47 478.27,145.47 C482.26,160.36 486.22,175.13 490.23,190.12 C487.52,190.12 485.03,190.12 482.43,190.12 C482.54,190.65 482.6,190.99 482.69,191.33 C484.49,198.02 486.28,204.72 488.1,211.41 C488.83,214.07 489.63,216.69 490.39,219.32 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <g id="Mask" fill-rule="nonzero"></g>
        <g id="bg" mask="url(#mask-2)" >
          
            <g transform="translate(-3073, -1000)">
              
              <g>
              <animateTransform attributeName="transform" 
                                 repeatCount="indefinite"
                                 attributeType="XML"
                                 type="rotate"
                                 from="0 2049 2049"
                                 to="-360 2049 2049"
                          dur="60s"/>
                <g>
            
            <polygon id="Polygon" fill="#F48100" points="1949 2049 4290 2049 3976.36547 3219"></polygon>
            <polygon id="Polygon" fill="#DF1F00" points="2341 2049 313.63453 3219 0 2049"></polygon>
            <polygon id="Polygon" fill="#FDCA3A" points="1975 1975 4001 3144.71165 3144.71165 4001"></polygon>
            <polygon id="Polygon" fill="#2CC3F8" points="2241 1949 2241 4290 1071 3976.36547"></polygon>
            <polygon id="Polygon" fill="#50AC59" points="3219 3976.36547 2049 4290 2049 1949"></polygon>
            <polygon id="Polygon" fill="#583EB0" points="2315 1975 1145.28835 4001 289 3144.71165"></polygon>
            <polygon id="Polygon" fill="#D50000" transform="translate(3119.500000, 1658.000000) scale(1, -1) translate(-3119.500000, -1658.000000) " points="1949 1073 4290 1073 3976.36547 2243"></polygon>
            <polygon id="Polygon" fill="#F48100" transform="translate(1170.500000, 1657.000000) scale(1, -1) translate(-1170.500000, -1657.000000) " points="2341 1072 313.63453 2242 0 1072"></polygon>
            <polygon id="Polygon" fill="#583EB0" transform="translate(2988.000000, 1302.000000) scale(1, -1) translate(-2988.000000, -1302.000000) " points="1975 289 4001 1458.71165 3144.71165 2315"></polygon>
            <polygon id="Polygon" fill="#50AC59" transform="translate(1657.000000, 1170.500000) scale(1, -1) translate(-1657.000000, -1170.500000) " points="2242 0 2242 2341 1072 2027.36547"></polygon>
            <polygon id="Polygon" fill="#2CC3F8" transform="translate(2632.000000, 1170.500000) scale(1, -1) translate(-2632.000000, -1170.500000) " points="3217 2027.36547 2047 2341 2047 0"></polygon>
            <polygon id="Polygon" fill="#FDCA3A" transform="translate(1302.000000, 1302.000000) scale(1, -1) translate(-1302.000000, -1302.000000) " points="2315 289 1145.28835 2315 289 1458.71165"></polygon>

        </g>
            </g>
              </g>
        </g>
        <g id="lettering" mask="url(#mask-2)" fill-rule="nonzero">
            <g transform="translate(78.990000, 11.079642)">
                <path d="M213.85,179.130358 C249.4,179.130358 284.85,179.130358 320.55,179.130358 C319.6,175.560358 318.7,172.170358 317.77,168.680358 C282.18,168.680358 246.63,168.680358 211,168.680358 C208.88,160.760358 206.78,152.920358 204.64,144.940358 C240.25,144.940358 275.7,144.940358 311.4,144.940358 C310.44,141.340358 309.53,137.910358 308.59,134.410358 C273,134.410358 237.5,134.410358 201.82,134.410358 C199.7,126.510358 197.59,118.650358 195.45,110.650358 C231.07,110.650358 266.52,110.650358 302.21,110.650358 C301.54,108.150358 300.91,105.790358 300.28,103.430358 C299.4,100.140358 299.4,100.140358 296.04,100.140358 C262.17,100.140358 228.31,100.130358 194.44,100.170358 C193.08,100.170358 192.51,99.8403581 192.15,98.4803581 C187.29,80.1403581 182.36,61.8303581 177.45,43.5003581 C177.34,43.1103581 177.29,42.7003581 177.18,42.1403581 C212.75,42.1403581 248.23,42.1403581 283.87,42.1403581 C282.91,38.5503581 282,35.1303581 281.06,31.6503581 C254.8,31.6503581 228.61,31.6503581 202.3,31.6503581 C200.19,23.7703581 198.09,15.9403581 195.94,7.93035813 C222.24,7.93035813 248.35,7.93035813 274.67,7.93035813 C273.97,5.24035813 273.31,2.74035813 272.62,0.100358131 C273.19,0.0703581305 273.64,0.0303581305 274.09,0.0303581305 C281.3,0.0303581305 288.5,0.0603581305 295.71,0.000175815708 C296.93,-0.00964186948 297.39,0.390358131 297.65,1.54035813 C298.11,3.64035813 298.75,5.71035813 299.33,7.88035813 C299.95,7.88035813 300.51,7.88035813 301.07,7.88035813 C315.79,7.88035813 330.51,7.88035813 345.23,7.89035813 C345.94,7.89035813 346.7,7.61035813 347,8.79035813 C348.97,16.3503581 351.02,23.8803581 353.09,31.5803581 C337.3,31.5803581 321.63,31.5803581 305.7,31.5803581 C306.14,33.2703581 306.53,34.7803581 306.93,36.2803581 C307.01,36.5803581 307.08,36.8803581 307.17,37.1703581 C307.66,38.7803581 307.68,41.0203581 308.76,41.8303581 C309.86,42.6503581 312.02,42.0903581 313.71,42.0903581 C327.25,42.1003581 340.78,42.1103581 354.32,42.0703581 C355.48,42.0703581 356.01,42.3303581 356.32,43.5303581 C361.21,61.9703581 366.16,80.3903581 371.09,98.8103581 C371.19,99.2003581 371.25,99.5903581 371.37,100.130358 C355.57,100.130358 339.89,100.130358 324.05,100.130358 C325.01,103.700358 325.92,107.110358 326.85,110.610358 C342.64,110.610358 358.37,110.610358 374.26,110.610358 C377.32,122.010358 380.36,133.370358 383.44,144.830358 C386,144.830358 388.56,144.830358 391.26,144.830358 C393.39,152.770358 395.5,160.630358 397.65,168.670358 C394.95,168.670358 392.45,168.670358 389.83,168.670358 C392.89,180.090358 395.9,191.350358 398.97,202.820358 C383.15,202.820358 367.5,202.820358 351.57,202.820358 C354.65,214.340358 357.66,225.610358 360.73,237.070358 C359.96,237.070358 359.4,237.070358 358.85,237.070358 C336.05,237.070358 313.25,237.060358 290.45,237.110358 C289.05,237.110358 288.54,236.680358 288.2,235.360358 C286.33,228.100358 284.36,220.860358 282.36,213.410358 C298.13,213.410358 313.79,213.410358 329.77,213.410358 C329.38,211.960358 329.05,210.750358 328.73,209.540358 C328.22,207.650358 327.77,205.750358 327.17,203.890358 C327.04,203.470358 326.43,203.170358 325.97,202.920358 C325.73,202.790358 325.37,202.900358 325.06,202.900358 C290.73,202.900358 256.4,202.890358 222.07,202.930358 C220.66,202.930358 220.03,202.620358 219.66,201.170358 C217.91,194.290358 216.03,187.450358 214.2,180.600358 C214.07,180.160358 213.98,179.710358 213.85,179.130358 Z M208.11,65.9903581 C208.93,69.0603581 209.78,72.0103581 210.47,75.0103581 C210.74,76.1703581 211.28,76.4003581 212.37,76.4003581 C238.77,76.3703581 265.16,76.3803581 291.56,76.3703581 C291.99,76.3703581 292.43,76.3203581 292.99,76.2903581 C292.04,72.7403581 291.12,69.3503581 290.22,66.0003581 C262.78,65.9903581 235.52,65.9903581 208.11,65.9903581 Z M367.96,179.110358 C367.14,176.000358 366.32,173.090358 365.62,170.160358 C365.35,169.040358 364.91,168.610358 363.68,168.630358 C357.46,168.700358 351.23,168.660358 345.01,168.660358 C344.2,168.660358 343.38,168.660358 342.4,168.660358 C343.21,171.700358 344.03,174.560358 344.71,177.450358 C345,178.700358 345.48,179.160358 346.85,179.140358 C353.33,179.050358 359.81,179.100358 366.29,179.100358 C366.79,179.110358 367.28,179.110358 367.96,179.110358 Z M317.63,76.2803581 C325.32,76.2803581 332.81,76.2803581 340.42,76.2803581 C339.47,72.7603581 338.56,69.3503581 337.66,66.0203581 C330.01,66.0203581 322.53,66.0203581 314.89,66.0203581 C315.82,69.5203581 316.72,72.8803581 317.63,76.2803581 Z M336,144.810358 C343.65,144.810358 351.14,144.810358 358.78,144.810358 C357.84,141.290358 356.93,137.880358 356.02,134.510358 C348.38,134.510358 340.86,134.510358 333.24,134.510358 C334.18,138.010358 335.08,141.380358 336,144.810358 Z" id="Shape" fill="#FEFEFE"></path>
                <path d="M367.96,179.110358 C367.28,179.110358 366.79,179.110358 366.29,179.110358 C359.81,179.110358 353.33,179.060358 346.85,179.150358 C345.49,179.170358 345,178.710358 344.71,177.460358 C344.03,174.570358 343.21,171.710358 342.4,168.670358 C343.38,168.670358 344.19,168.670358 345.01,168.670358 C351.23,168.670358 357.46,168.710358 363.68,168.640358 C364.91,168.630358 365.35,169.060358 365.62,170.170358 C366.32,173.090358 367.14,176.000358 367.96,179.110358 Z" id="Path" fill="none"></path>
                <path d="M317.63,76.2803581 C316.72,72.8803581 315.82,69.5203581 314.89,66.0203581 C322.53,66.0203581 330.01,66.0203581 337.66,66.0203581 C338.56,69.3503581 339.47,72.7603581 340.42,76.2803581 C332.81,76.2803581 325.32,76.2803581 317.63,76.2803581 Z" id="Path" fill="none"></path>
                <path d="M336,144.810358 C335.08,141.370358 334.17,138.010358 333.24,134.510358 C340.86,134.510358 348.38,134.510358 356.02,134.510358 C356.92,137.890358 357.84,141.290358 358.78,144.810358 C351.14,144.810358 343.66,144.810358 336,144.810358 Z" id="Path" fill="none"></path>
                <path d="M208.11,65.9903581 C235.52,65.9903581 262.78,65.9903581 290.23,65.9903581 C291.13,69.3403581 292.05,72.7403581 293,76.2803581 C292.43,76.3103581 292,76.3603581 291.57,76.3603581 C265.17,76.3603581 238.78,76.3603581 212.38,76.3903581 C211.29,76.3903581 210.75,76.1703581 210.48,75.0003581 C209.78,72.0103581 208.93,69.0503581 208.11,65.9903581 Z" id="Path" fill="none"></path>
                <path d="M384.07,426.200358 C368.48,426.200358 353.1,426.200358 337.57,426.200358 C336.57,422.500358 335.56,418.790358 334.57,415.080358 C323.93,375.350358 313.29,335.630358 302.62,295.910358 C302.48,295.400358 301.92,294.610358 301.54,294.600358 C294.8,294.520358 288.07,294.540358 281.1,294.540358 C290.75,330.560358 300.36,366.430358 310.01,402.430358 C296.22,402.430358 282.56,402.430358 268.76,402.430358 C267.64,398.270358 266.5,394.070358 265.37,389.860358 C256.99,358.580358 248.61,327.290358 240.26,296.000358 C239.98,294.970358 239.64,294.490358 238.43,294.510358 C232.31,294.580358 226.18,294.540358 220.06,294.540358 C219.66,294.540358 219.25,294.540358 218.66,294.540358 C230.43,338.460358 242.16,382.230358 253.95,426.240358 C253.29,426.240358 252.75,426.240358 252.22,426.240358 C229.63,426.240358 207.03,426.230358 184.44,426.270358 C183.18,426.270358 182.69,425.930358 182.37,424.700358 C179.15,412.470358 175.86,400.260358 172.59,388.040358 C172.49,387.650358 172.41,387.250358 172.29,386.720358 C180.46,386.720358 188.53,386.720358 196.77,386.720358 C184.99,342.750358 173.24,298.920358 161.45,254.910358 C162.19,254.910358 162.73,254.910358 163.28,254.910358 C220.98,254.910358 278.67,254.920358 336.37,254.880358 C337.76,254.880358 338.37,255.170358 338.76,256.640358 C353.72,312.670358 368.73,368.680358 383.74,424.690358 C383.84,425.140358 383.93,425.580358 384.07,426.200358 Z" id="Path" fill="#FEFEFE"></path>
                <path d="M167.11,237.080358 C166.21,237.080358 165.6,237.080358 164.99,237.080358 C146.46,237.080358 127.93,237.060358 109.41,237.120544 C107.81,237.130358 107.15,236.740358 106.74,235.110358 C105,228.180358 103.08,221.290358 101.23,214.390358 C101.15,214.110358 101.08,213.820358 100.96,213.330358 C112.71,213.330358 124.31,213.330358 136.11,213.330358 C126.21,176.390358 116.37,139.670358 106.48,102.750358 C112.03,102.750358 117.4,102.750358 122.95,102.750358 C121.76,98.2503581 120.62,93.9403581 119.47,89.6403581 C114.44,70.8703581 109.4,52.1003581 104.41,33.3203581 C104.05,31.9803581 103.51,31.5503581 102.12,31.6103581 C99.3,31.7403581 96.47,31.6503581 93.37,31.6503581 C98.78,51.8503581 104.16,71.9203581 109.56,92.1103581 C109.05,92.1503581 108.65,92.2003581 108.26,92.2003581 C100.95,92.2103581 93.64,92.1903581 86.33,92.2203581 C85.39,92.2203581 84.89,92.0603581 84.61,91.0103581 C76.63,61.1103581 68.61,31.2203581 60.6,1.33035813 C60.5,0.950358131 60.43,0.550358131 60.33,0.0903581305 C68.53,0.0903581305 76.65,0.0903581305 84.88,0.0903581305 C85.57,2.62035813 86.25,5.13035813 86.97,7.80035813 C119.69,7.80035813 152.45,7.80035813 185.32,7.80035813 C187.45,15.7503581 189.55,23.5803581 191.7,31.5903581 C182.33,31.5903581 173.09,31.5903581 163.69,31.5903581 C169.82,54.4903581 175.91,77.2203581 182.05,100.110358 C176.5,100.110358 171.12,100.110358 165.57,100.110358 C166.72,104.390358 167.82,108.490358 168.92,112.600358 C177.77,145.620358 186.63,178.640358 195.44,211.670358 C195.77,212.920358 196.23,213.360358 197.58,213.350358 C221.67,213.300358 245.75,213.320358 269.84,213.320358 C270.45,213.320358 271.06,213.320358 271.75,213.320358 C273.87,221.230358 275.96,229.050358 278.11,237.060358 C277.34,237.060358 276.79,237.060358 276.23,237.060358 C243.96,237.060358 211.69,237.050358 179.42,237.090358 C178.05,237.090358 177.53,236.750358 177.16,235.370358 C166.43,195.140358 155.63,154.920358 144.88,114.690358 C144.59,113.590358 144.13,113.240358 143.01,113.270358 C140.04,113.350358 137.07,113.300358 133.93,113.300358 C145.02,154.640358 156.03,195.740358 167.11,237.080358 Z M154.54,89.5203581 C154.43,89.0203581 154.36,88.6803581 154.27,88.3403581 C151.49,77.9603581 148.71,67.5903581 145.93,57.2103581 C143.75,49.0703581 141.57,40.9303581 139.34,32.8003581 C139.22,32.3503581 138.64,31.7103581 138.26,31.7003581 C135.08,31.6103581 131.89,31.6503581 128.53,31.6503581 C133.72,51.0203581 138.88,70.2603581 144.04,89.5203581 C147.55,89.5203581 150.94,89.5203581 154.54,89.5203581 Z" id="Combined-Shape" fill="#FEFEFE"></path>
                <path d="M11.02,254.990358 C53.05,254.990358 94.87,254.990358 136.76,254.990358 C140.28,268.130358 143.79,281.230358 147.35,294.500358 C119.2,294.500358 91.17,294.500358 63,294.500358 C63.1,295.050358 63.14,295.440358 63.24,295.820358 C64.85,301.880358 66.51,307.930358 68.06,314.000358 C68.37,315.220358 68.87,315.580358 70.14,315.580358 C97.16,315.540358 124.17,315.560358 151.19,315.500358 C152.7,315.500358 153.17,316.000358 153.52,317.360358 C156.74,329.590358 160.04,341.790358 163.31,354.010358 C163.39,354.300358 163.43,354.600358 163.52,355.070358 C135.39,355.070358 107.38,355.070358 79.11,355.070358 C85.49,378.870358 91.8,402.460358 98.15,426.170358 C84.3,426.170358 70.64,426.170358 56.88,426.170358 C41.61,369.130358 26.33,312.100358 11.02,254.990358 Z" id="Path" fill="#FEFEFE"></path>
                <path d="M25.83,34.2503581 C22.74,22.7203581 19.73,11.4603581 16.69,0.110358131 C24.93,0.110358131 33.05,0.110358131 41.3,0.110358131 C42.38,4.10035813 43.46,8.10035813 44.53,12.1003581 C46.39,19.0503581 48.27,26.0003581 50.09,32.9603581 C50.35,33.9403581 50.75,34.2803581 51.76,34.2303581 C53.76,34.1503581 55.77,34.1603581 57.78,34.2403581 C58.22,34.2603581 58.94,34.6003581 59.03,34.9303581 C61.13,42.5403581 63.16,50.1803581 65.26,58.0103581 C62.4,58.0103581 59.71,58.0103581 56.84,58.0103581 C58.14,62.9103581 59.39,67.6203581 60.65,72.3203581 C63.23,81.9503581 65.83,91.5803581 68.37,101.220358 C68.67,102.340358 69.12,102.750358 70.33,102.740358 C78.36,102.680358 86.38,102.730358 94.41,102.680358 C95.49,102.670358 96.02,102.910358 96.33,104.060358 C105.05,136.740358 113.81,169.400358 122.57,202.070358 C122.62,202.260358 122.64,202.460358 122.7,202.790358 C122.2,202.830358 121.76,202.890358 121.33,202.890358 C96.22,202.890358 71.11,202.890358 46,202.920358 C44.87,202.920358 44.44,202.590358 44.14,201.490358 C35.47,169.010358 26.75,136.550358 18.04,104.080358 C17.94,103.690358 17.86,103.300358 17.73,102.720358 C26.58,102.720358 35.3,102.720358 44.17,102.720358 C42.84,97.7603581 41.57,93.0003581 40.29,88.2403581 C37.71,78.6103581 35.1,68.9803581 32.57,59.3403581 C32.29,58.2703581 31.86,57.9803581 30.8,57.9903581 C23.13,58.0403581 15.47,58.0303581 7.8,57.9803581 C7.26,57.9803581 6.35,57.6503581 6.25,57.2903581 C4.13,49.6803581 2.1,42.0403581 0,34.2303581 C8.63,34.2503581 17.09,34.2503581 25.83,34.2503581 Z M48.68,126.480358 C53.42,144.170358 58.1,161.620358 62.75,178.980358 C72.48,178.980358 82.06,178.980358 91.73,178.980358 C91.41,177.760358 91.12,176.670358 90.83,175.590358 C86.59,159.760358 82.33,143.930358 78.14,128.090358 C77.79,126.780358 77.25,126.410358 75.96,126.450358 C72.77,126.540358 69.58,126.480358 66.39,126.480358 C60.58,126.480358 54.78,126.480358 48.68,126.480358 Z" id="Combined-Shape" fill="#FEFEFE"></path>
                <path d="M154.54,89.5203581 C150.93,89.5203581 147.55,89.5203581 144.05,89.5203581 C138.89,70.2603581 133.73,51.0203581 128.54,31.6503581 C131.9,31.6503581 135.09,31.6103581 138.27,31.7003581 C138.65,31.7103581 139.22,32.3503581 139.35,32.8003581 C141.58,40.9303581 143.75,49.0703581 145.94,57.2103581 C148.72,67.5903581 151.5,77.9603581 154.28,88.3403581 C154.37,88.6803581 154.43,89.0203581 154.54,89.5203581 Z" id="Path" fill="none"></path>
            </g>
        </g>
    </g>
</svg>
  </div>
!

CSS 

              
                body {
  overflow-y: hidden;
}


#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

svg {
  height: 256px;
  width: 256px;
  transform: scale(.75)
}
!

JS
!
999px

Console