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><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="auto" version="1.1" style="shape-rendering: geometricprecision; text-rendering: geometricprecision; image-rendering: optimizequality; fill-rule: evenodd; clip-rule: evenodd;"
    viewBox="0 0 37300 21000">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"></metadata>
  <path class="fil0 str0 OpTroqxE_0" d="M2029 9846c-11,5 -26,37 -46,3 -16,-26 -9,0 -12,-33 -1,-9 -28,-33 -45,13 -8,22 32,70 20,110 -4,12 -4,50 -28,61l-9 4c-32,11 -71,2 -99,-14 0,0 -15,1 -28,-4 -19,-8 -9,11 -43,11 -39,0 -19,31 -70,46 -13,4 -32,51 -30,68 2,24 -6,11 3,38 2,6 4,34 -2,36 -29,11 -34,55 28,46 25,-4 20,19 41,-39 6,-15 21,-51 38,-51 43,0 14,-1 58,-19 27,-11 1,-27 58,-29 8,0 113,-43 44,-7 -38,20 -71,37 -92,77 -5,9 -20,40 -25,45 -21,17 -50,16 -14,54 11,12 -16,30 1,42 6,4 -10,8 2,20 -1,6 -30,-11 4,18 6,5 37,-42 64,7 8,14 74,72 -5,60 -13,-2 10,32 10,32 40,45 10,57 82,107 26,18 34,33 72,49 56,22 76,36 141,55 22,6 42,19 71,24 31,6 113,31 137,32 20,1 95,38 104,23 33,-53 59,-46 107,-65 64,-25 66,-10 123,-19 15,-2 -6,-49 55,-38 38,6 37,-13 65,7 2,2 32,1 34,-20 5,-56 58,-44 61,-52 -38,30 -19,66 -89,115 -87,60 -4,100 -128,175 -56,34 -19,30 -92,56 -80,28 -147,102 -203,35 -7,1 13,29 -54,11 -25,35 -238,107 -175,33 49,-57 -22,1 -64,-56 -66,100 120,437 259,483 214,71 321,411 617,523 179,68 318,-76 512,-114 77,-15 292,-105 299,-187 10,-113 59,-134 53,-316 -2,-77 126,-250 53,-116 45,18 9,-79 63,-143 102,-121 -76,-23 72,-23 122,0 91,13 195,22 7,44 -134,18 -195,101 -70,96 -48,110 8,179 29,35 162,32 29,54 -11,2 -20,63 29,104 39,33 -53,102 46,214 1,1 8,112 51,173 92,129 -72,440 -96,559 -1,4 -3,0 -5,13 1,-1 76,272 75,344 -3,321 30,145 50,146 139,3 106,57 25,121 -56,45 17,96 17,208 0,55 -2,129 74,129 -63,0 -80,78 -30,139 13,16 98,296 97,328 -3,166 88,102 61,312 -16,126 164,484 168,588 0,0 24,52 27,53 -23,12 253,615 323,664 30,21 207,445 202,564 -2,47 252,866 328,907 188,101 439,756 509,959 8,32 197,691 229,728 4,4 110,244 199,291 3,2 155,141 188,164 22,15 170,98 169,55 -2,-44 122,21 175,-93 42,-91 182,-49 173,-260 -1,-17 27,-137 30,-139 275,-152 277,-148 600,-148 31,0 -163,-90 -163,-102 0,-193 19,-159 116,-307 23,-35 57,-11 37,-120 -8,-42 275,-41 340,-80 23,-100 -50,-711 51,-944 33,-75 113,-672 71,-786 -203,-549 240,288 8,-370 -58,-166 -102,-1348 429,-944 15,11 166,-105 138,-317 -18,-131 618,-73 618,-275 0,-202 116,-252 276,-331 253,-126 321,-256 515,-401 87,-64 413,-278 443,-377 -57,-190 187,-444 373,-531 195,-92 399,-233 612,-271 142,-26 67,-157 299,-264 97,-45 14,-349 311,-547 171,-114 364,-150 409,-342 32,32 207,351 334,104 45,-3 235,197 210,-151 -13,-181 -229,-347 -58,-600 107,-159 -117,48 -143,-264 -7,-87 -109,-48 23,-265 1,-1 1,-296 -183,-281 -62,5 -129,-68 -167,-106 -188,-116 79,-103 17,-234 40,-43 110,95 72,-10 -22,-60 71,-32 102,-121 87,-18 199,51 251,-45 35,-65 -47,-22 -89,-159 -5,-14 -81,45 -159,-79 -70,-111 -250,-75 -224,-261 2,-15 37,-5 54,-41 7,-15 64,-33 86,-97 8,-23 195,-95 15,-127 -15,-3 -32,-139 198,68 71,64 260,144 130,-1 -34,-38 76,0 77,84 0,6 223,261 258,128 35,-133 167,-73 148,136 -6,67 43,88 -10,231 -24,64 161,142 218,153 169,31 87,40 278,40 130,0 383,28 490,-24 49,-23 150,32 237,36 135,7 378,183 184,132 -44,-12 -33,7 -33,80 0,298 -40,134 -154,295 -21,29 -126,-117 -43,32 -39,82 -132,10 -133,10 -11,55 -19,78 -98,84 -235,18 -52,67 -193,211 -48,49 50,225 52,304 0,4 60,201 58,64 -2,-166 74,46 106,46 21,0 141,-22 141,-30 5,-107 -43,-173 56,-198 32,-8 -18,-313 90,-169 15,20 65,-86 134,129 19,59 -43,119 26,247 28,52 26,146 86,217 55,66 44,366 58,365 10,109 72,-135 171,62 71,142 20,-112 128,-106 30,2 -15,-119 0,-190 21,-103 -147,-333 69,-326 70,2 66,-534 46,-598 -12,-38 -57,-89 36,-32 0,124 171,33 273,65 106,24 114,168 127,-9 1,-6 66,-76 74,-106 43,-152 137,-278 196,-422 8,-20 41,-33 43,-107 5,-217 -181,-28 -14,-252 37,-50 71,14 139,-149 29,-69 69,-70 78,-182 7,-88 45,-75 -30,-193 -48,-75 12,-190 117,-220 9,-3 57,-29 59,-36 127,-31 111,-131 291,-208 157,-67 22,-71 226,-115 55,-12 20,-20 117,-29 55,-5 102,-89 219,30 137,138 224,105 126,24 -39,-32 -122,-268 -14,-333 26,-16 134,-95 141,-114 35,-94 -167,-121 -14,-195 101,-49 -100,-102 -184,-91 -189,26 -203,-86 -332,-8 -72,44 -90,-62 59,-161 16,-11 85,-88 84,-105 -1,-106 -63,15 -68,-131 -2,-62 -41,-4 -87,11 -38,12 -61,66 -123,21 -6,-4 -11,-62 41,-81 25,-9 123,-79 52,-99 -57,-16 -105,-49 -146,-93 -47,-50 -85,14 -158,44 -209,86 -142,149 -176,169 -35,21 -222,-56 -284,-55 -93,2 -190,-191 -224,-84 0,1 -183,122 -204,148 -54,66 -112,103 -122,194 -4,32 -60,33 -79,33 -45,0 -249,-18 -264,21 -37,99 -118,113 -62,210 -2,3 -1,3 -5,4 -13,-4 -72,10 -85,19 -115,83 -30,36 -157,47 -16,1 -71,92 -68,101 10,36 70,51 -44,119 -49,29 -122,44 -173,11 -54,-35 -76,21 -145,50 -112,46 -73,-25 -208,-52 -116,-23 -31,22 -26,72 7,77 -45,130 98,166 87,22 53,-23 146,66 64,62 1,22 5,123 1,15 14,33 13,90 -1,118 63,41 -118,104 -111,39 -166,19 -285,34 -116,14 -238,5 -352,-13 -75,-12 -154,-58 -204,-21 -50,37 -130,58 -192,62 -69,4 -74,44 -177,4 -61,-23 -17,-14 -62,-34 -25,-11 -63,-20 -91,-20 -84,3 -246,-45 -288,-132 -22,-46 -114,-68 -1,-138 28,-17 -10,-128 12,-232 32,-147 23,-318 -177,-249 -126,43 -110,33 -235,59 -30,86 131,67 10,187 -102,101 -110,387 -14,494 48,54 16,301 -89,276 -270,-64 -311,90 -527,-44 -42,-26 -12,-123 -154,34 -95,106 -222,-87 -372,-88 -50,0 -225,-23 -261,-71 -145,-189 -40,-53 -269,-139 -46,-17 -97,8 -166,-43 -77,-56 -95,-118 -163,-194 -2,-3 -33,-4 -81,-58 -21,-23 -301,-51 -309,-26 -12,39 -104,-17 -146,-17 -185,-37 20,75 -302,-12 -104,-28 -172,-50 -237,-133 -53,-68 -145,13 -325,-100 -129,-82 -54,15 -137,-103 -22,-31 -75,-14 -165,-52 -111,-47 -32,-110 -230,-218 -78,-42 3,-89 -205,-86 -63,1 -132,-55 -142,-18 -1,0 -154,-172 -154,-178 0,-129 157,-103 155,-193 -2,-64 -101,6 6,-224 68,-147 -82,-184 182,-315 74,-37 142,-135 196,-144 -81,-55 -76,6 -237,-115 -49,-37 -293,-116 -293,-214 0,-136 -105,-63 -266,-165 -74,-47 -114,57 -259,-154 -37,-54 -37,-261 -154,-58 -37,64 -121,-92 -66,-176 46,-70 -119,-95 -32,-199 24,-29 -110,-128 -119,-190 -2,-12 -36,-10 -4,-48 -27,-67 -3,-115 -49,-158 -47,-44 72,-48 115,-81 47,-36 135,368 272,123 77,-137 89,82 235,-162 23,-39 -68,-243 -83,-326 -78,0 -197,-39 -244,-105 -79,-110 210,-117 50,-243 -9,-7 -116,-188 79,-181 419,15 -53,-431 278,-325 78,-51 -41,-98 167,-115 12,-1 12,-110 44,-177 0,-119 40,-172 40,-318 0,-78 -101,-303 -150,-287 -109,35 -261,-138 -331,-105 -57,27 -56,88 -72,90 -11,74 -208,-41 -300,33 -26,21 -306,179 -322,176 -128,-28 -187,-83 -352,-110 -97,-16 -388,-260 -488,-330 -22,-15 -169,-278 -269,-331 -132,-3 -168,-194 -585,-181 -113,4 -256,-110 -465,45 -72,53 -284,-84 -203,13 67,79 -259,100 -329,214 -183,24 -548,456 -175,513 139,21 628,148 515,347 -33,59 310,190 43,312 -10,5 -17,96 -159,163 -9,67 -90,209 -35,362 80,221 -83,397 41,597 37,60 60,26 72,71 155,285 168,81 421,262 25,18 91,-190 171,58 13,40 560,208 104,342 -4,1 -195,167 -194,184 47,682 -304,609 -307,687 -3,78 -85,-16 -71,301 4,90 -230,46 -273,259 -69,343 -508,596 -540,667 -15,33 -286,338 -289,430 -1,29 -18,7 -18,73 22,23 -468,116 -536,141 -135,50 -173,-172 -462,15 -9,6 21,88 -185,207 -238,137 137,444 171,557 73,245 -87,311 218,439 53,22 320,647 318,661 -11,89 -92,13 -16,160 9,16 -350,188 -249,37 103,-155 -253,122 -430,68 -188,-57 -290,-60 -487,-9z"></path>
  <path class="fil0 str0 OpTroqxE_1" d="M2759 10201c1683,-620 3106,-1197 4880,-1546 4649,-914 2735,874 3248,868 1642,-18 3080,-1058 5711,-1058l88 0"></path>
  <path class="fil0 str0 OpTroqxE_2" d="M2403 10743c1683,-620 3106,-1197 4880,-1546 4649,-914 2735,874 3248,868 1642,-18 3080,-1058 5711,-1058l88 0"></path>
  <path class="fil0 str0 OpTroqxE_3" d="M2043 11293c1683,-620 3106,-1197 4880,-1546 4649,-914 2735,874 3248,868 1642,-18 3080,-1058 5711,-1058l88 0"></path>
  <path class="fil0 str0 OpTroqxE_4" d="M1556 11843c1683,-620 3106,-1197 4880,-1546 4649,-914 2735,874 3248,868 1642,-18 3080,-1058 5711,-1058l88 0"></path>
  <path class="fil0 str0 OpTroqxE_5" d="M7922,7488L7947,7993L8442,7888L8336,8381L8842,8408L8611,8857L9092,9013L8753,9387L9178,9663L8754,9937L9092,10313L8612,10468L8842,10919L8337,10944L8442,11439L7949,11332L7922,11838L7473,11607L7317,12089L6943,11750L6667,12175L6393,11750L6017,12089L5862,11609L5411,11838L5386,11334L4891,11439L4998,10946L4492,10919L4723,10470L4241,10313L4580,9940L4155,9663L4580,9390L4241,9013L4721,8859L4492,8408L4996,8383L4891,7888L5384,7994L5411,7488L5860,7719L6017,7238L6390,7577L6667,7152L6940,7576L7317,7238L7471,7718Z"></path>
  <path class="fil0 str0 OpTroqxE_6" d="M4810,9663A1857,1857 0,1,1 8524,9663A1857,1857 0,1,1 4810,9663"></path>
  <path class="fil0 str1 OpTroqxE_7" d="M5465 8755c-150,760 192,1967 618,1908 424,-58 814,-1399 519,-1814 -228,-320 -631,855 44,1184"></path>
  <path class="fil0 str1 OpTroqxE_8" d="M7852 9489c-219,133 -536,73 -685,-141 -373,-536 471,-1104 563,-209 60,583 -117,1487 -126,1575"></path>
  <path class="fil0 str2 OpTroqxE_9" d="M17495 5713c135,-201 603,-72 666,430 3348,-4728 3766,-1918 2109,1040 -901,1609 -3021,4135 -2356,3062 609,-981 7495,5590 5157,9568"></path>
  <path class="fil0 str2 OpTroqxE_10" d="M19190 8762c288,-117 787,-327 861,-317"></path>
  <path class="fil0 str2 OpTroqxE_11" d="M21617 6794c-492,-14 -1879,2112 -1303,2082 645,-33 1086,-1360 1264,-1985 7,-24 582,-1656 255,-667 -68,206 -746,2452 -834,2672"></path>
  <path class="fil0 str2 OpTroqxE_12" d="M22782 5696c-306,893 -659,1939 -899,2826"></path>
  <path class="fil0 str2 OpTroqxE_13" d="M21180 6291c486,-424 1247,-855 1948,-659 31,9 37,11 70,27"></path>
  <path class="fil0 str2 OpTroqxE_14" d="M24373 6056c-1046,-493 -2232,2131 -1846,2382"></path>
  <path class="fil0 str2 OpTroqxE_15" d="M24517 5115c-24,293 -664,2350 -851,2815"></path>
  <path class="fil0 str2 OpTroqxE_16" d="M23481 5532c662,-419 921,-554 1647,-675"></path>
  <path class="fil0 str2 OpTroqxE_17" d="M25438 2976c-558,-361 -1411,2014 -437,1548 482,-231 671,-1811 -118,-1488"></path>
  <path class="fil0 str2 OpTroqxE_18" d="M24601 6290c83,-288 350,-775 711,-717 297,47 303,399 277,505 -39,156 -436,467 -1040,1307"></path>
  <path class="fil0 str2 OpTroqxE_19" d="M26272 4583c294,-144 447,814 -461,1142 -245,89 -336,2109 762,189 276,-483 531,-957 730,-1612 -200,562 -828,2313 -1061,3086"></path>
  <path class="fil0 str2 OpTroqxE_20" d="M25509 4787c706,-461 1660,-647 2072,-576"></path>
  <path class="fil0 str2 OpTroqxE_21" d="M27886 4028c257,-169 1562,-1155 1824,-606l-18 45c-552,466 -1190,1407 -1612,2280 -1110,2298 -382,2420 893,82 352,-646 727,-1413 367,-1162 -545,380 -1692,5391 562,4366 190,-86 829,-652 850,-927"></path>
  <path class="fil0 str2 OpTroqxE_22" d="M30113 2938c731,-1117 188,-2096 -745,-1816 -1431,428 -1849,2793 -1157,2829 -117,211 -792,2352 -1068,3078"></path>
  <path class="fil0 str2 OpTroqxE_23" d="M30366 4367c434,-398 258,1428 -616,1697 -276,85 -199,-664 276,-1256 666,-831 1042,-970 1399,-1393 434,-514 410,-1255 -10,47 -51,160 -910,3178 -1141,3832"></path>
  <path class="fil0 str2 OpTroqxE_24" d="M30318 3395c534,-542 1362,-648 1815,-503 335,-790 3410,-2930 3672,-1352"></path>
  <path class="fil0 str2 OpTroqxE_25" d="M27914 9146c-490,598 -1503,1511 -2411,1461 -700,-39 -582,-1137 550,-1795 2116,-1230 2451,372 426,2205 -2172,1966 -2265,616 -1549,365 731,-256 1752,-236 2104,470 44,89 92,119 151,168"></path>
  <path class="fil0 str2 OpTroqxE_26" d="M28382 8414c-11,242 -420,3023 -814,3179 -440,174 -88,-1186 503,-1069 546,108 100,2850 -1780,3325 -3,1 -6,1 -9,2"></path>
  <path class="fil0 str2 OpTroqxE_27" d="M29315 9746c-20,780 -956,985 -477,-7 308,-637 1157,35 144,1933 -365,684 -1097,774 65,-689 332,-418 1078,-1395 1299,-1926 4,-9 -407,1512 -555,2201"></path>
  <path class="fil0 str2 OpTroqxE_28" d="M30601 9083c82,-87 798,-741 801,-749 -609,765 -1078,2918 179,866 16,-26 59,-102 67,-130"></path>
  <path class="fil0 str2 OpTroqxE_29" d="M32462 6959c-259,179 -1276,3369 46,1294 321,-504 -1315,1138 -889,1842 346,571 1588,-972 1853,-2269 40,-197 114,-554 -149,-333 -278,234 -605,1099 -631,1651 -2,37 -3,74 -4,96"></path>
  <path class="fil0 str2 OpTroqxE_30" d="M33428 6570c-75,195 -216,770 -220,869"></path>
  <path class="fil0 str2 OpTroqxE_31" d="M34106 6351c-33,222 -173,721 -210,894 -17,81 -327,1367 -326,1394"></path>
  <path class="fil0 str2 OpTroqxE_32" d="M31632 7572c321,-805 2764,-1631 2690,-1205"></path>
  <path class="fil0 str2 OpTroqxE_33" d="M35370 4671c-127,449 -868,3116 -1057,4736 -2,14 -65,569 -110,757"></path>
  <path class="fil0 str2 OpTroqxE_34" d="M34144 10556c-111,310 60,212 72,123 34,-256 26,-399 -72,-123z"></path>
  <path class="fil0 str0 OpTroqxE_35" d="M2473 15895c0,12706 34421,-7091 33704,-1695"></path>
  <path class="fil0 str0 OpTroqxE_36" d="M25682 16852c175,139 372,24 441,-85 23,-70 17,-76 17,-153 -228,-228 -358,-144 -441,-339 53,-124 123,-189 254,-255"></path>
  <path class="fil0 str0 OpTroqxE_37" d="M26428 16700l0 -221c15,-45 25,-71 34,-119m424 238c-17,-88 -89,-262 -136,-339m0 -51l0 51c-36,12 -51,18 -85,34 -11,6 -56,28 -68,34 -67,31 -58,32 -136,34l0 -255c24,-73 17,-90 17,-170 84,-69 9,-42 102,-34 33,56 42,81 85,136 13,64 41,133 85,170 41,-13 62,-18 102,-34"></path>
  <path class="fil0 str0 OpTroqxE_38" d="M27191 16479c-8,-36 -3,-28 -17,-68l0 -187c-32,-98 -38,-293 0,-390m-68 -170c28,60 46,107 68,170 59,21 74,3 169,119 84,102 234,331 356,356 18,-46 16,-56 34,-102 -27,-70 -17,-123 -17,-204l-34 -221c-20,-63 -56,-207 -68,-272"></path>
  <path class="fil0 str0 OpTroqxE_39" d="M27970 16174c105,68 8,51 254,51 44,-59 27,-33 51,-102 0,-172 33,-651 -17,-781 -121,0 -86,4 -288,136"></path>
  <path class="fil0 str0 OpTroqxE_40" d="M28631 16038c8,-36 3,-28 17,-68l0 -170m-68 0l68 0c12,-56 22,-63 34,-119m424 238c-20,-96 -93,-248 -136,-339m0 -51l0 51c-82,29 -96,27 -169,85 -57,4 -62,13 -119,17 -25,-65 -17,-62 -17,-136 31,-199 -3,-224 68,-322 42,15 29,9 68,17 57,87 100,230 169,289 34,-12 68,-22 102,-34"></path>
  <path class="fil0 str0 OpTroqxE_41" d="M29597 15800c4,-56 0,-33 17,-85l0 -68c17,-53 17,-83 34,-136l0 -102m-424 -356l53 118c34,41 38,45 65,86l119 119c34,12 68,22 102,34l85 0c44,-94 114,-411 136,-526"></path>
  <path class="fil0 str0 OpTroqxE_42" d="M31105 15512l0 -153c27,-84 32,-50 -17,-119m-169 -153c67,-31 58,-32 136,-34 16,34 21,49 34,85l0 102c-169,97 -117,142 -186,187 -126,81 -268,-30 -288,-153 -33,-204 67,-676 322,-696"></path>
  <path class="fil0 str0 OpTroqxE_43" d="M31614 14358c-279,279 -290,866 17,866 167,0 434,-517 220,-781 -83,-102 -138,-85 -237,-85z"></path>
  <path class="fil0 str0 OpTroqxE_44" d="M32258 14680c-26,-67 -17,-78 -17,-153 -23,-70 -17,-76 -17,-153 -30,-93 -33,-78 34,-153m34 -17l-34 17m68 -34l-34 17m85 -34c-35,22 6,17 -51,17m0 492c206,-206 288,-195 288,-424 -90,-90 -67,-85 -237,-85m-136 866c0,-115 -16,-253 17,-356l68 0c32,53 38,55 85,102 103,62 222,145 339,170"></path>
  <path class="fil0 str0 OpTroqxE_45" d="M33478 14748l-305 136c-93,5 -71,26 -153,-34 0,-121 -24,-283 17,-390m322 -85c-76,56 -87,41 -169,68l-85 0c-42,15 -29,9 -68,17l0 -373c80,-59 302,-111 407,-119"></path>
 </g>
</svg></div>
!

CSS 

              
                div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.str0 {stroke:#003399;stroke-width:75;stroke-linecap:round;stroke-linejoin:round}
    .str2 {stroke:#003399;stroke-width:200;stroke-linecap:round;stroke-linejoin:round}
    .str1 {stroke:#003399;stroke-width:250;stroke-linecap:round;stroke-linejoin:round}
    .fil0 {fill:none}

.OpTroqxE_0{stroke-dasharray:86640 86642;stroke-dashoffset:86641;animation:OpTroqxE_draw 1417ms ease-in-out 0ms forwards;}.OpTroqxE_1{stroke-dasharray:15199 15201;stroke-dashoffset:15200;animation:OpTroqxE_draw 248ms ease-in-out 1417ms forwards;}.OpTroqxE_2{stroke-dasharray:15199 15201;stroke-dashoffset:15200;animation:OpTroqxE_draw 248ms ease-in-out 1665ms forwards;}.OpTroqxE_3{stroke-dasharray:15199 15201;stroke-dashoffset:15200;animation:OpTroqxE_draw 248ms ease-in-out 1914ms forwards;}.OpTroqxE_4{stroke-dasharray:15199 15201;stroke-dashoffset:15200;animation:OpTroqxE_draw 248ms ease-in-out 2162ms forwards;}.OpTroqxE_5{stroke-dasharray:24266 24268;stroke-dashoffset:24267;animation:OpTroqxE_draw 396ms ease-in-out 2411ms forwards;}.OpTroqxE_6{stroke-dasharray:11670 11672;stroke-dashoffset:11671;animation:OpTroqxE_draw 190ms ease-in-out 2808ms forwards;}.OpTroqxE_7{stroke-dasharray:5786 5788;stroke-dashoffset:5787;animation:OpTroqxE_draw 94ms ease-in-out 2999ms forwards;}.OpTroqxE_8{stroke-dasharray:3847 3849;stroke-dashoffset:3848;animation:OpTroqxE_draw 62ms ease-in-out 3093ms forwards;}.OpTroqxE_9{stroke-dasharray:25248 25250;stroke-dashoffset:25249;animation:OpTroqxE_draw 412ms ease-in-out 3156ms forwards;}.OpTroqxE_10{stroke-dasharray:920 922;stroke-dashoffset:921;animation:OpTroqxE_draw 15ms ease-in-out 3569ms forwards;}.OpTroqxE_11{stroke-dasharray:9373 9375;stroke-dashoffset:9374;animation:OpTroqxE_draw 153ms ease-in-out 3584ms forwards;}.OpTroqxE_12{stroke-dasharray:2967 2969;stroke-dashoffset:2968;animation:OpTroqxE_draw 48ms ease-in-out 3738ms forwards;}.OpTroqxE_13{stroke-dasharray:2214 2216;stroke-dashoffset:2215;animation:OpTroqxE_draw 36ms ease-in-out 3786ms forwards;}.OpTroqxE_14{stroke-dasharray:3464 3466;stroke-dashoffset:3465;animation:OpTroqxE_draw 56ms ease-in-out 3822ms forwards;}.OpTroqxE_15{stroke-dasharray:2944 2946;stroke-dashoffset:2945;animation:OpTroqxE_draw 48ms ease-in-out 3879ms forwards;}.OpTroqxE_16{stroke-dasharray:1798 1800;stroke-dashoffset:1799;animation:OpTroqxE_draw 29ms ease-in-out 3927ms forwards;}.OpTroqxE_17{stroke-dasharray:4456 4458;stroke-dashoffset:4457;animation:OpTroqxE_draw 72ms ease-in-out 3957ms forwards;}.OpTroqxE_18{stroke-dasharray:3411 3413;stroke-dashoffset:3412;animation:OpTroqxE_draw 55ms ease-in-out 4029ms forwards;}.OpTroqxE_19{stroke-dasharray:8914 8916;stroke-dashoffset:8915;animation:OpTroqxE_draw 145ms ease-in-out 4085ms forwards;}.OpTroqxE_20{stroke-dasharray:2187 2189;stroke-dashoffset:2188;animation:OpTroqxE_draw 35ms ease-in-out 4231ms forwards;}.OpTroqxE_21{stroke-dasharray:17438 17440;stroke-dashoffset:17439;animation:OpTroqxE_draw 285ms ease-in-out 4267ms forwards;}.OpTroqxE_22{stroke-dasharray:9545 9547;stroke-dashoffset:9546;animation:OpTroqxE_draw 156ms ease-in-out 4552ms forwards;}.OpTroqxE_23{stroke-dasharray:11263 11265;stroke-dashoffset:11264;animation:OpTroqxE_draw 184ms ease-in-out 4708ms forwards;}.OpTroqxE_24{stroke-dasharray:6606 6608;stroke-dashoffset:6607;animation:OpTroqxE_draw 108ms ease-in-out 4892ms forwards;}.OpTroqxE_25{stroke-dasharray:15720 15722;stroke-dashoffset:15721;animation:OpTroqxE_draw 257ms ease-in-out 5000ms forwards;}.OpTroqxE_26{stroke-dasharray:9204 9206;stroke-dashoffset:9205;animation:OpTroqxE_draw 150ms ease-in-out 5258ms forwards;}.OpTroqxE_27{stroke-dasharray:11151 11153;stroke-dashoffset:11152;animation:OpTroqxE_draw 182ms ease-in-out 5408ms forwards;}.OpTroqxE_28{stroke-dasharray:4285 4287;stroke-dashoffset:4286;animation:OpTroqxE_draw 70ms ease-in-out 5591ms forwards;}.OpTroqxE_29{stroke-dasharray:11208 11210;stroke-dashoffset:11209;animation:OpTroqxE_draw 183ms ease-in-out 5661ms forwards;}.OpTroqxE_30{stroke-dasharray:898 900;stroke-dashoffset:899;animation:OpTroqxE_draw 14ms ease-in-out 5844ms forwards;}.OpTroqxE_31{stroke-dasharray:2351 2353;stroke-dashoffset:2352;animation:OpTroqxE_draw 38ms ease-in-out 5859ms forwards;}.OpTroqxE_32{stroke-dasharray:3173 3175;stroke-dashoffset:3174;animation:OpTroqxE_draw 51ms ease-in-out 5897ms forwards;}.OpTroqxE_33{stroke-dasharray:5622 5624;stroke-dashoffset:5623;animation:OpTroqxE_draw 91ms ease-in-out 5949ms forwards;}.OpTroqxE_34{stroke-dasharray:808 810;stroke-dashoffset:809;animation:OpTroqxE_draw 13ms ease-in-out 6041ms forwards;}.OpTroqxE_35{stroke-dasharray:37812 37814;stroke-dashoffset:37813;animation:OpTroqxE_draw 618ms ease-in-out 6054ms forwards;}.OpTroqxE_36{stroke-dasharray:1600 1602;stroke-dashoffset:1601;animation:OpTroqxE_draw 26ms ease-in-out 6673ms forwards;}.OpTroqxE_37{stroke-dasharray:2084 2086;stroke-dashoffset:2085;animation:OpTroqxE_draw 34ms ease-in-out 6699ms forwards;}.OpTroqxE_38{stroke-dasharray:2377 2379;stroke-dashoffset:2378;animation:OpTroqxE_draw 38ms ease-in-out 6733ms forwards;}.OpTroqxE_39{stroke-dasharray:1497 1499;stroke-dashoffset:1498;animation:OpTroqxE_draw 24ms ease-in-out 6772ms forwards;}.OpTroqxE_40{stroke-dasharray:2148 2150;stroke-dashoffset:2149;animation:OpTroqxE_draw 35ms ease-in-out 6796ms forwards;}.OpTroqxE_41{stroke-dasharray:1540 1542;stroke-dashoffset:1541;animation:OpTroqxE_draw 25ms ease-in-out 6831ms forwards;}.OpTroqxE_42{stroke-dasharray:2111 2113;stroke-dashoffset:2112;animation:OpTroqxE_draw 34ms ease-in-out 6857ms forwards;}.OpTroqxE_43{stroke-dasharray:2222 2224;stroke-dashoffset:2223;animation:OpTroqxE_draw 36ms ease-in-out 6891ms forwards;}.OpTroqxE_44{stroke-dasharray:2365 2367;stroke-dashoffset:2366;animation:OpTroqxE_draw 38ms ease-in-out 6928ms forwards;}.OpTroqxE_45{stroke-dasharray:2032 2034;stroke-dashoffset:2033;animation:OpTroqxE_draw 33ms ease-in-out 6966ms forwards;}@keyframes OpTroqxE_draw{100%{stroke-dashoffset:0;}}@keyframes OpTroqxE_fade{0%{stroke-opacity:1;}96.42857142857143%{stroke-opacity:1;}100%{stroke-opacity:0;}}
!

JS
!
999px

Console