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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
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.
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.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<svg version="1.1" width="840px" height="250px" viewBox="0 0 840 250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
.st0{fill:url(#SVGID_1_);}
.st1{display:inline;}
.st2{display:inline;fill:#00F;}
.st3{fill:#35F52F;}
.st5{fill:none;stroke:#fff;stroke-width:20;stroke-miterlimit:10;}
]]>
</style>
<g transform="matrix( 1, 0, 0, 1, 0,0) " class="st4">
<g id="bg" class="st1">
<g id="Layer2_0_FILL">
<radialGradient id="SVGID_1_" cx="505.3926" cy="104.0498" r="283.2375" gradientTransform="matrix(2.8 0 0 1 -1230.3003 -39.0498)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#2A3030"/>
<stop offset="1" style="stop-color:#231F20"/>
</radialGradient>
<path class="st0" d="M840,0H0v250h840V0z"/>
</g>
</g>
</g>
<defs>
<mask id="Mask">
<path id="fivePath" class="st5" d="M469.5,94.5c-26.915,9.72-109.544-30.882-100.5,28.047c4.561,29.718,45.691,26.71,68.861,27.849
c4.635,9.938,13.22,20.045,10.414,30.1c-4.177,14.968-12.254,17.367-26.552,18.004c-13.69,0.609-25.518-2.002-37.278-8.726
c-12.528-7.164-9.945-19.52-9.945-32.774"/>
</mask>
</defs>
<g id="brush" mask="url(#Mask)" class="st4">
<g class="st1">
<path class="st3" d="M463.127,98.671c0.14,0.081,0.367,0.163,0.546,0.246C463.12,98.804,462.86,98.725,463.127,98.671z"/>
<path class="st3" d="M470.61,101.163c-1.967-0.517-5.081-1.354-6.938-2.245C465.443,99.279,470.295,99.959,470.61,101.163z"/>
<path class="st3" d="M463.232,96.885l2.36,0.97C464.087,97.752,464.481,97.332,463.232,96.885z"/>
<polygon class="st3" points="463.86,98.102 463.629,98.45 462.424,97.725 "/>
<path class="st3" d="M390.407,136.805c-0.101-0.28-0.116-0.521,0.116-0.651L390.407,136.805z"/>
<path class="st3" d="M394.26,141.203c0.418,0.3,0.739,0.455,1.009,0.607C394.938,141.683,394.679,141.54,394.26,141.203z"/>
<path class="st3" d="M386.426,133.893l0.752,0.601C386.906,134.338,386.645,134.124,386.426,133.893z"/>
<path class="st3" d="M405.85,94.479c0.991,0.109,1.916,0.205,2.611,0.257C406.712,95.37,406.439,94.757,405.85,94.479z"/>
<path class="st3" d="M418.971,152.758l0.291-0.271C419.5,152.674,419.601,152.832,418.971,152.758z"/>
<path class="st3" d="M393.216,146.592c0.054-0.18,0.167-0.275,0.314-0.315c0.089,0.07,0.184,0.136,0.266,0.208L393.216,146.592z"
/>
<path class="st3" d="M383.232,131.658c-0.018-0.005-0.042-0.012-0.06-0.017l-0.361-0.734
C383.129,131.188,383.258,131.428,383.232,131.658z"/>
<path class="st3" d="M426.502,154.819c0.286,0.259,0.544,0.555,0.739,0.913C426.571,155.407,426.314,155.021,426.502,154.819z"/>
<path class="st3" d="M395.396,141.868c0.007,0.008-0.004,0.008,0.003,0.017c-0.035-0.02-0.096-0.055-0.13-0.074
C395.317,141.832,395.35,141.848,395.396,141.868z"/>
<path class="st3" d="M385.511,141.624c0.363,0.322,0.705,0.626,1.094,0.972C386.058,142.302,385.688,141.927,385.511,141.624z"/>
<path class="st3" d="M405.85,94.479c-0.283-0.031-0.561-0.061-0.841-0.091C405.382,94.326,405.635,94.378,405.85,94.479z"/>
<path class="st3" d="M456.372,97.619c-0.793-0.205-0.926-0.464-1.018-0.727C455.766,97.103,456.117,97.338,456.372,97.619z"/>
<path class="st3" d="M374.838,170.707l-0.112-0.318C374.793,170.516,374.824,170.619,374.838,170.707z"/>
<path class="st3" d="M394.65,196.385c0.108,0.138,0.219,0.286,0.28,0.436C394.633,196.758,394.554,196.549,394.65,196.385z"/>
<path class="st3" d="M422.796,191.815c-1.667,0.911-3.72,0.392-5.249,0.519l0.585,0.314c0,0-0.403-0.025-0.806-0.051
c-0.401-0.015-0.8-0.074-0.8-0.074l0.077,0.561c-2.617,0.04-5.896,0.513-6.747-0.528l0.222,0.927c0,0-0.168-0.06-0.422-0.148
c-0.251-0.095-0.589-0.191-0.914-0.344c-0.646-0.278-1.293-0.556-1.293-0.556l1.458,0.837c-1.547-0.128-3.468-0.569-4.969-1.222
c-0.77-0.271-1.421-0.629-1.938-0.876c-0.519-0.24-0.877-0.438-1.021-0.51l0.12,0.423c-0.523-0.045-0.798-0.411-1.225-0.719
l0.159,0.622c-1.067-0.466-1.889-0.948-2.7-1.256c-0.784-0.372-1.482-0.703-2.195-1.041c-1.379-0.763-2.872-1.61-4.583-3.709
c-1.134-0.933,0.464,0.679,0.289,0.905c-0.426-0.137-0.92-0.611-1.32-1.1c-0.372-0.521-0.644-1.059-0.698-1.284
c-0.152,0.422,0.207,1.028,0.398,1.42c0.213,0.366,0.225,0.563-0.606,0.12c-0.565-1.217,0.05,1.151-1.348-0.646l0.186-1.312
c-0.898-0.868-0.765,0.304-1.912-1.326c-1-2.042,2.568,1.481,0.537-1.462c-0.513-0.729-1.575-1.141-2.61-1.898
c-0.519-0.376-1.055-0.817-1.548-1.379c-0.497-0.559-0.875-1.283-1.179-2.146c-0.954-1.274-1.124-0.745-1.267-0.376
c-0.13,0.36-0.312,0.576-1.086-1.514c0,0,0.139,0.72,0.278,1.44c0.158,0.715,0.349,1.424,0.349,1.424
c-0.573-0.54-0.885,0.133-1.492-1.754c0.111-0.735,0.058-2.022-0.282-3.007c0.463,2.071-0.154,1.352-0.835,0.582
c-0.637-0.778-1.326-1.613-1.072,0.443l-0.499-1.408c0.029,0.187-0.044,0.267-0.152,0.2l-0.775-1.835
c0.228,1.219,1.194,4.004,0.015,3.007l-1.223-2.679c-0.247,0.927-0.852-0.007-1.216,0.304c0,0,0.132,0.537,0.331,1.343
c0.211,0.805,0.441,1.894,0.767,2.967c0.332,1.078,0.664,2.155,0.913,2.963c0.293,0.803,0.489,1.337,0.489,1.337
c0.137-0.472-0.256-1.718,0.272-1.438c1.37,1.979,0.314,2.038,1.837,3.785c0,0-0.03-0.271-0.061-0.541
c-0.035-0.268-0.046-0.542-0.046-0.542c-0.067,0.239,0.033,0.548-0.244,0.14c-0.616-0.562-0.477-1.029-0.229-1.164
c0.823,0.443,1.629,2.557,1.651,3.349c0.767,1.243,1.109,1.205,1.248,0.953c0.149-0.258,0.155-0.75,0.406-0.534
c0.019,0.871,0.701,1.883,1.475,2.862c0.837,0.945,1.701,1.894,2.133,2.717c0,0-0.085-0.313-0.144-0.64
c-0.058-0.324-0.116-0.648-0.116-0.648c1.956,1.22,2.828,3.032,3.639,4.09l-0.005-0.713c1.04,1.125,2.196,1.553,3.11,2.071
c0.898,0.55,1.67,1.054,2.091,2.499l-0.069-0.467c0.54,0.322,1.296,0.607,1.978,0.985c0.344,0.186,0.672,0.392,0.966,0.613
c0.304,0.205,0.57,0.434,0.772,0.693c0.125-0.173,0.438-0.306,0.909-0.127c0.272,0.955,1.706,1.031,3.436,1.602
c-1.064-0.605-0.355-1.317-1.398-2.005c0.718,0.066,1.185,0.216,1.527,0.423c0.35,0.188,0.575,0.428,0.78,0.697
c0.416,0.516,0.738,1.215,1.878,1.515c1.477-0.056-1.068-0.811-1.244-1.289c1.598,0.837,3.53,0.784,5.183,0.754
c1.673-0.053,3.093-0.066,4.126,0.902l-1.57,0.438c1.37,0.512,2.157,0.573,1.99,0.39c-0.459,0.02-0.602-0.162-0.746-0.343
c2.158-0.268,3.774,0.026,5.482,0.363c0.851,0.169,1.71,0.283,2.638,0.354c0.919,0.024,1.907-0.024,2.969-0.31
c-0.376-0.26-1.01-0.284-1.08-0.561c0.955-0.31,1.494-0.012,2.209,0.259c0.712,0.276,1.587,0.408,3.089-0.329l-0.722-0.222
c0.988-0.474,1.898-0.212,1.799-0.047c-0.089-0.372,0.278-0.679,0.898-0.968c0.614-0.307,1.477-0.626,2.396-0.983
c1.815-0.765,3.835-1.799,4.332-3.217c0.882,0.029,2.38-0.386,3.768-0.999c0.681-0.324,1.345-0.677,1.883-1.032
c0.526-0.373,0.939-0.732,1.148-1.028c1.021-1.888-2,0.218-1.906-0.91c1.185-0.878,2.36-0.683,3.857-2.406
c0.3,0.298-0.242,1.388-0.48,2.053c-0.233,0.663-0.052,1.028,1.791-0.262l0.154-0.755c-0.303,0.347-0.643,0.917-1.214,1.238
c-1.307,0.418,0.229-0.912,0.271-1.296c0,0,0.228-0.185,0.568-0.46c0.348-0.268,0.788-0.655,1.221-1.054
c0.891-0.768,1.703-1.634,1.703-1.635c0.457,0.165,0.171,0.751-0.24,1.348c-0.429,0.575-0.992,1.138-1.016,1.327
c1.316-1.392,2.406-3.266,3.383-5.09c0.994-1.83,1.761-3.691,2.738-5.22l-0.437,0.184c0.6-0.976,0.862-1.677,0.898-2.213
c0.056-0.53-0.035-0.866-0.123-1.166c-0.106-0.305-0.199-0.569-0.135-0.955c0.033-0.193,0.105-0.417,0.235-0.697
c0.116-0.283,0.262-0.628,0.488-1.064c-0.023-0.966-0.303-0.797-0.513-0.758c-0.219,0.04-0.416-0.043-0.467-1.404
c-0.052-0.768,0.314-0.347,0.448-0.21c-0.016-0.866-0.097-1.396-0.195-1.738c-0.134-0.336-0.265-0.493-0.378-0.644
c-0.247-0.304-0.309-0.567-0.491-2.191c0,0-0.166,0.244-0.331,0.488c-0.17,0.233-0.339,0.468-0.339,0.468
c-0.087-0.439-0.109-0.917-0.225-1.367c-0.103-0.465-0.207-0.933-0.311-1.4c-0.291-0.904-0.559-1.885-1.009-2.74
c-0.807-1.793-2.046-3.275-3.455-4.172c-0.315,0.729,1.322,1.913,1.438,2.924c-1.064-2-3.197-3.714-5.454-4.919
c-2.261-1.23-4.583-2.152-6.327-3.167c1.366-0.165-1.3-2.037,1.352-1.613c0.288,1.118,1.649,1.058,2.913,1.717
c-0.303-0.701-1.05-1.242-1.985-1.682c-0.938-0.435-2.075-0.673-3.15-0.927c-2.169-0.414-4.123-0.671-4.224-1.605l-0.768,0.562
c-0.567-0.261-1.968-1.202-0.852-1.151c0,0-1.119-0.189-2.237-0.289c-1.115-0.118-2.23-0.236-2.23-0.236
c0.71,0.438,1.796,1.143,2.839,1.665c1.04,0.558,2.038,0.953,2.642,0.695c1.001,1.072-1.876,0.048-1.035,1.196
c-2.527-1.934-1.861,0.07-4.72-0.838c0.771-0.378,0.117-0.899-0.72-1.364c-0.838-0.443-1.85-0.848-1.739-1.091
c-0.508,0.015-1.285-0.205-2.039-0.473c-0.754-0.25-1.486-0.567-1.888-0.806c-0.868-0.17-2.334-0.195-3.921-0.186
c-0.794-0.005-1.619-0.021-2.417-0.077c-0.807-0.056-1.454-0.166-2.095-0.334c0.458,0.225,1.061,0.496,1.534,0.795
c0.503,0.294,0.87,0.611,0.773,0.943c-1.34-0.526-2.668-0.703-3.054,0.055c2.229,1.01,2.688,0.597,3.064,0.112
c0.378-0.481,0.717-1.031,2.861-0.335c0.979,0.986,2.138,1.405,4.331,1.968c-1.092,0.37-0.676,0.653-1.18,1.214
c-2.434-2.355-7.089-0.899-10.46-2.438c-0.686-0.415-0.688-0.862-0.925-1.309c-0.117-0.225-0.292-0.443-0.631-0.666
c-0.334-0.242-0.832-0.49-1.602-0.743c0,0,0.707,0.033,1.414,0.067c0.349,0.026,0.704,0.011,0.968,0.007
c0.264-0.005,0.439-0.009,0.439-0.009c-1.54-0.007-1.673-0.262-1.727-0.494c-0.051-0.253-0.019-0.582-1.173-0.988l0.786,0.841
c-1.507-0.242-2.008-0.562-2.661-1.242l0.935,1.312c-0.82-0.148-2.335-0.507-2.154-1.052c-0.278,0.14-0.414,0.285-0.47,0.438
c-0.096-0.21-0.425-0.45-1.34-0.779c0.489,0.312,0.895,0.407,0.804,0.676c-1.699-0.778-1.989-0.657-2.14-0.425
c-0.15,0.233-0.142,0.559-1.197,0.015c0.249,0.357-0.484,0.326-1.313,0.06c0.36-0.66-0.462-1.591-1.428-2.5
c-0.928-0.979-2.022-1.929-2.251-2.64l-0.001,0.026c0,0-0.533-0.561-1.066-1.121c-0.512-0.579-0.995-1.171-0.995-1.172
c0.397,0.476-0.366,0.389-1.166-0.045l0.116,0.083c-0.895-0.463-0.181,2.045-2.117-0.283c0,0-0.215-0.344-0.429-0.688
c-0.194-0.356-0.387-0.714-0.387-0.714c0.154,0.237-0.193,0.208-0.377,0.183c0,0-0.206-0.358-0.412-0.717
c-0.206-0.356-0.4-0.716-0.4-0.716c-1.313-0.458-1.949-1.491-2.393-2.642c-0.255-0.558-0.44-1.161-0.691-1.743
c-0.269-0.576-0.6-1.13-1.051-1.675c0.437,0.668,1.029,1.751,0.354,1.542c-0.467-0.371-0.681-1.207-0.682-1.679l-0.083,0.202
c0,0-0.103-0.323-0.257-0.808c-0.143-0.486-0.261-1.151-0.411-1.792c-0.15-0.643-0.171-1.301-0.245-1.775
c-0.073-0.476-0.059-0.794-0.06-0.794c-0.452,0.498,0.442,3.309-0.512,2.252c-0.438-0.265-0.603-0.842-0.684-1.448
c-0.055-0.613,0.046-1.261-0.03-1.725c0.42,0.072,1.083,1.62,0.967-0.062c-0.289-0.148-0.798-1.715-1.024-0.927
c0.075-0.453,0.085-0.949,0.18-1.454c0.106-0.495,0.216-1.01,0.326-1.521c0.171-0.492,0.364-0.964,0.553-1.391
c0.17-0.432,0.496-0.783,0.742-1.08c-0.042-0.489-0.394,0.154-0.517,0.378l0.077,0.14c-0.442,0.898-1.045-0.058-0.951,1.988
c-0.687,0.034-0.636-0.727-0.443-1.723c0.276-0.98,0.793-2.121,1.12-2.976c0,0-0.124,0.147-0.309,0.367
c-0.183,0.224-0.458,0.518-0.645,0.852c-0.423,0.674-0.847,1.348-0.847,1.348c-0.031-0.671-0.016-1.393,0.094-2.121
c0.189-0.699,0.381-1.443,0.711-2.14c0.38-0.669,0.72-1.39,1.229-2.004c0.525-0.6,0.986-1.259,1.608-1.773
c2.345-2.208,5.218-3.622,7.558-4.862c-0.572,0.57-1.21,0.894-1.568,1.246c-0.361,0.348-0.497,0.633-0.139,1.003
c0.706-0.365,1.245-0.578,1.676-0.753c0.426-0.182,0.738-0.331,1.045-0.487c0.599-0.334,1.239-0.623,2.736-1.204l-0.273,0.068
c0.323-0.292,0.718-0.522,1.146-0.706c0.441-0.161,0.907-0.287,1.35-0.417c0.893-0.253,1.667-0.559,2.063-1.154
c-0.9-0.3-2.062,1.341-2.513,0.289c0,0,0.981-0.352,1.963-0.704c1.014-0.295,2.027-0.591,2.027-0.591
c-0.725-0.103-1.78,0.133-2.764,0.582c-0.995,0.433-2.006,0.909-2.769,1.146c-0.499,0.284,0.017,0.034,0.681-0.068
c0.657-0.118,1.406-0.181,1.287,0.261c-1.823,0.626-2.904,1.034-3.91,1.118c-1.008,0.082-1.782,0.087-2.907,0.088
c-1.438-0.067,1.108-1.598,1.804-1.898c2.832-0.11,6.332-0.887,9.979-2.507c0,0,0.458-0.368,0.915-0.737
c0.456-0.382,0.934-0.708,0.934-0.707c2.112,0.279,1.677,1.968,4.997,0.945l-1.141-0.353c0.687-0.429,1.164-0.617,1.534-0.669
c-1.574-0.167-3.275-0.229-4.751-0.38c0.819-0.876,2.295-1.085,3.906-1.102c1.633,0.063,3.388,0.305,4.856,0.167
c-0.175-0.138-1.199,0-1.563-0.275c0.539-0.139,1.087-0.25,1.638-0.338c0.556-0.057,1.117-0.087,1.675-0.103
c1.118-0.029,2.229,0.005,3.304,0.069c1.072,0.128,2.117,0.253,3.103,0.372c0.98,0.101,1.899,0.184,2.743,0.251
c0.708-0.291,0.008-0.382-0.792-0.507c-0.797-0.12-1.693-0.2-1.363-0.656c1.796,0.206,3.823-0.47,4.301,0.291
c-0.391-0.561,0.644-0.587,1.348-0.602c0.7,0.034,1.08,0-0.642-0.537c1.636-0.119,3.312-0.013,5.007,0.089
c1.689,0.165,3.389,0.454,5.08,0.754c1.682,0.383,3.359,0.764,5.002,1.213c1.637,0.483,3.257,0.919,4.826,1.412
c-0.246-0.397-0.193-0.674,0.122-0.841c-1.087-0.235-2.431-0.515-3.631-0.917c-1.2-0.405-2.273-0.853-2.836-1.314
c1.561-0.396,3.311,1.339,3.783,1.06c-0.692-0.405-2.162-0.656-2.098-1.219c2.005-0.29,2.916,0.783,4.224,1.124l-0.775,0.153
c3.969,1.58,1.878,2.357,6.261,3.005c1.716-0.305,0.112-0.552,0.274-1.387c0.942,0.559,4.453,0.427,5.287,1.584l-2.626-0.573
c1.774,0.667,3.494,1.115,4.683,1.712c-0.083-0.209-0.144-0.417-0.511-0.584c1.38,0.62,3.248,1.057,3.845,1.793l0.639-0.773
c-0.967,0.165-3.555-0.453-3.869-1.044c0.45-0.717,2.933,0.456,4.089,0.693c-4.966-1.569-4.692-2.951-9.142-3.425l0.663,0.442
c-1.423,0.021-2.756-0.405-4.035-0.902c-1.288-0.47-2.525-1.007-3.717-1.242c0.705-0.043,0.91-0.339,0.624-0.554
c-5.41-0.353-10.594-1.737-16.816-1.7l-1.824-0.983l-0.144,0.675c-3.038,0.17-0.625-1.019-2.602-0.965
c0.753-0.007,0.613,0.107,0.764,0.276c-3.553-0.755-1.973,0.643-3.953,0.439c0.958,0.723,3.813,0.241,2.928,1.212
c-1.737-0.38-3.977-0.479-5.848-0.509c-0.937-0.04-1.786-0.111-2.444-0.272c-0.657-0.153-1.123-0.358-1.295-0.757
c-3.255,0.675-6.9,1.168-10.417,1.789c-1.743,0.358-3.499,0.587-5.1,0.994c-1.606,0.391-3.119,0.77-4.458,1.153
c-0.633,0.521,0.526,0.059,0.32,0.375c-1.198-0.074-2.937,0.744-4.35,1.54c-1.409,0.85-2.53,1.587-2.74,1.217
c-0.877,0.738-0.97,1.523-1.113,1.861c-1.473,0.315-3.06,1.163-4.659,2.21c0,0,0.299-0.197,0.625-0.335
c0.319-0.149,0.638-0.299,0.638-0.299l-0.057,0.179c0,0-0.456,0.198-0.896,0.436c-0.434,0.255-0.868,0.511-0.868,0.511
l0.023-0.088c-0.476,0.37-0.96,0.748-1.45,1.129c-0.461,0.429-0.914,0.886-1.373,1.341l-0.687,0.689l-0.625,0.771
c-0.407,0.524-0.851,1.018-1.227,1.569c-1.558,2.188-2.679,4.631-3.652,6.903c0.591-1.298,0.826-1.035,0.942-0.652
c0.127,0.392,0.188,0.922,0.516,0.363c-0.497,0.474-0.821,1.227-1.165,2.141c-0.186,0.458-0.261,0.961-0.348,1.497
c-0.073,0.534-0.168,1.106-0.178,1.688c-0.062,2.347,0.509,4.904,1.31,7.015c0.263-0.109,0.577,0.14,0.635-0.428
c0,0,0.016,0.164,0.04,0.41c0.042,0.239,0.097,0.558,0.152,0.877c0.118,0.646,0.235,1.293,0.235,1.293l0.178-0.451
c0.232,0.524,0.503,1.022,0.751,1.537l0.718,1.56c0.523,0.999,0.958,2.069,1.511,2.989c0.27,0.471,0.533,0.932,0.788,1.377
c0.275,0.43,0.567,0.824,0.852,1.201c0.287,0.374,0.575,0.721,0.866,1.029c0.308,0.29,0.617,0.544,0.929,0.751
c-1.151-1.397-0.89-1.647-0.681-2.065c2.043,2.36,4.149,4.356,6.821,6.835c-0.109-0.18-0.157-0.329-0.1-0.414
c0.844,0.437,1.554,1.4,2.296,2.045l0.479-0.5c1.383,1.249,3.591,2.136,5.345,3.521c0.547-0.15,1.658,0.571,3.02,1.323
c0.339,0.193,0.689,0.395,1.042,0.596c0.362,0.179,0.73,0.354,1.095,0.515c0.732,0.312,1.438,0.611,2.083,0.686
c0.89,0.408-1.825-1.292,0.784-0.56c-0.007,0.758,0.858,0.993,1.695,1.231c0.851,0.19,1.677,0.387,1.644,1.187
c0,0,0.625-0.029,1.249-0.058c0.625-0.067,1.249-0.134,1.249-0.134l0.439,0.851c0.559-0.306,1.043-0.39,1.458-0.357
c0.386,0.025,0.746,0.179,1.129,0.366c0.768,0.375,1.621,0.886,2.982,0.792c-0.122-0.184-0.4-0.27-0.25-0.367
c0.846,0.262,2.793,0.649,1.218,0.835c0.699,0.114,2.239,0.366,3.336,0.546c1.088,0.177,1.762,0.175,0.769-0.423
c0.04,0.236-0.41,0.175-0.973,0.016c-0.568-0.145-1.256-0.374-1.671-0.515c0.21-0.662,2.298-0.101,2.937-0.714
c0.056,0.085,0.315,0.249,0.498,0.395l0.374-0.361c1.269,0.581,2.57,0.907,3.772,1.258c1.214,0.32,2.298,0.73,3.094,1.437
c0.158-0.172,0.655-0.224,1.506,0.065l-0.2,0.827l2.603,0.792l-0.844-1.556c1.514,0.306,2.595,1.084,3.603,1.803
c0.942,0.811,1.839,1.558,2.784,2.204c0.58-0.499,1.571,0.129,2.555,0.942c1.019,0.797,1.987,1.74,3.076,1.87
c0,0-0.259-0.346-0.518-0.692c-0.122-0.181-0.28-0.341-0.393-0.465c-0.113-0.124-0.188-0.207-0.188-0.207
c0.378,0.289,0.688,0.56,0.96,0.809c0.28,0.242,0.543,0.449,0.794,0.634c0.456,0.396,0.845,0.715,1.249,1.025
c0.35,0.336,0.69,0.677,1.047,1.105c0.269,0.462,0.66,0.979,0.841,1.718c-0.355-0.525-0.72-0.877-0.986-1.201
c-0.248-0.331-0.562-0.574-0.855-0.853c-0.283-0.282-0.668-0.552-1.196-0.869c-0.482-0.339-1.235-0.661-2.166-1.073
c1.784,1.015,2.773,2.407,3.39,3.685c0.621,1.311,0.91,2.428,1.493,3.776c0.31-0.215,0.45-1.041,0.868-0.335
c-0.163,0.18-0.222,0.442-0.223,0.733c-0.049,0.3-0.049,0.63-0.043,0.929c-0.046,0.608-0.131,1.08-0.528,0.798
c0.131,0.485,0.275,0.832,0.49,1.133c0.196,0.302,0.391,0.566,0.334,0.91c0,0-0.487,0.839-1.108,1.606
c-0.27,0.391-0.649,0.756-0.876,1.032c-0.231,0.277-0.42,0.451-0.42,0.451l0.209-0.022c-0.344,1.683-1.264,3.191-2.39,4.463
c-1.126,1.286-2.527,2.321-3.993,3.223c-2.952,1.824-6.161,3.041-9.33,4.928l0.315,0.355l-1.966,0.095
c1.499-0.142-0.368,0.774-0.356,1.16c0,0-0.303,0.043-0.758,0.107c-0.449,0.076-1.059,0.133-1.662,0.184
c-0.602,0.061-1.199,0.107-1.651,0.113c-0.448,0.017-0.746,0.028-0.746,0.028C421.208,191.464,421.69,192.272,422.796,191.815z
M428.181,154.819c0,0-0.275-0.112-0.565-0.196c-0.286-0.09-0.573-0.181-0.573-0.181c-0.245-0.02-0.488-0.071-0.729-0.229
l0.729,0.229C427.671,154.484,428.209,154.265,428.181,154.819z M409.552,89.515c0.684,0.326-0.893,0.202-1.316,0.369
c0,0,0.53-0.081,1.067-0.109c0.536-0.04,1.071-0.08,1.071-0.08C410.639,89.434,409.87,89.533,409.552,89.515z M429.644,149.529
l0.855-0.33l0.755,0.703L429.644,149.529z M446.091,157.875l-1.23-1.479l0.194,0.015c0,0,0.308,0.368,0.616,0.737
c0.152,0.184,0.304,0.366,0.418,0.504c0.117,0.133,0.18,0.239,0.18,0.239L446.091,157.875z M446.062,175.632
c0.064-0.074,0.119-0.148,0.209-0.227C446.216,175.484,446.142,175.564,446.062,175.632c-0.854,0.869-0.163,1.785-1.527,2.129
c-0.064-0.722,0.18-1.11,0.482-1.411C445.326,176.054,445.785,175.873,446.062,175.632z M434.066,155.871
c-0.464-0.335-0.721-0.463-1.126-0.556c0.163,0.411,1.015,1.28,0.208,1.097c-0.388-0.56-2.159-1.321-2.006-1.869
C432.506,155.709,434.227,154.616,434.066,155.871z M392.824,145.477l0.462,0.15c0,0-0.351-0.287-0.702-0.573
c-0.336-0.308-0.672-0.614-0.672-0.614s0.224,0.263,0.448,0.526C392.582,145.237,392.824,145.477,392.824,145.477z
M386.102,140.728c-0.361-1.147-2.367-2.578-3.502-3.883c-0.377,0.08-0.37,0.543-0.06,1.162c0.154,0.31,0.383,0.657,0.674,1.011
c0.306,0.334,0.675,0.671,1.088,0.98C385.86,141.943,385.597,139.792,386.102,140.728z M445.061,161.841
c0,0,0.032-0.161,0.065-0.323c0.022-0.159,0.045-0.317,0.045-0.317c0.008-0.007,0.308,0.247,0.301,0.252
c0,0-0.048-0.092-0.121-0.229c-0.086-0.13-0.199-0.304-0.313-0.478c-0.231-0.353-0.462-0.705-0.462-0.705
c0.499,0.268,0.908,0.595,1.208,0.961c0.273,0.386,0.466,0.79,0.609,1.177c0.274,0.784,0.252,1.537,0.444,2.014
c-0.234-0.377-0.367-1.295-0.713-1.931C445.791,161.621,445.433,161.22,445.061,161.841z M374.837,127.44
c-0.246-0.874-0.473-2.139-0.601-3.124c-0.099-1.002-0.012-1.763,0.263-1.696c-0.477,0.084-0.641,0.762-0.636,1.537
c0.058,0.749,0.282,1.58,0.439,1.951C374.521,126.523,374.653,126.826,374.837,127.44z M376.492,126.695
c0.339,1.191,0.52,1.848,0.593,2.495c0.077,0.647,0.052,1.286,0.277,2.319c-0.938-0.882-1.141-1.739-1.117-2.271
c0.039-0.548,0.369-0.845,0.665-0.853c-0.457-1.682-0.803-1.115-1.346-1.873L376.492,126.695z M375.454,130.318l0.679,0.835
c1.091,0.791,2.044,0.348,2.281,2.36c0-0.001-0.605-0.545-1.154-1.156c-0.563-0.602-1.127-1.204-1.127-1.204
C375.905,130.968,375.671,130.702,375.454,130.318z M373.236,108.277l-0.764,0.934
C372.96,108.157,373.146,108.103,373.236,108.277c0,0,0.148-0.197,0.33-0.369c0.181-0.171,0.361-0.343,0.361-0.343
c-0.249,0.561-0.339,0.942-0.419,1.151c-0.077,0.21-0.119,0.262-0.146,0.227C373.307,108.876,373.316,108.46,373.236,108.277z
M373.306,125.487c0,0,0.261,0.746,0.573,1.465c0.336,0.704,0.673,1.409,0.673,1.409
C374.865,127.985,373.753,126.404,373.306,125.487z M373.724,109.302c-0.643,1.207-1.225,4.67-1.153,4.181
C372.011,113.069,373.042,109.92,373.724,109.302z M432.163,91.247l-1.783-0.22l0.933-0.597L432.163,91.247z M411.195,91.814
l0.398-0.393l1.04-0.076L411.195,91.814z M392.473,96.435c0.035-0.171-0.078-0.328-0.283-0.417
c-0.297,0.051-0.572,0.061-0.741-0.026c0.25-0.099,0.538-0.072,0.741,0.026c0.782-0.147,1.84-0.624,2.286-0.958
c-0.203-0.113-0.586-0.064-0.984,0.004c-0.394,0.088-0.801,0.203-1.06,0.181c0.705-0.735,2.234-0.757,3.327-0.883
c1.095-0.119,1.785-0.31,0.902-1.246c0.405,0.019,1.271-0.02,1.937,0.02c0.676,0.069,1.15,0.216,0.771,0.516
c-1.007,0.177-2.395,0.69-3.715,1.192c-0.658,0.258-1.295,0.528-1.85,0.787C393.255,95.91,392.796,96.202,392.473,96.435
c-0.041,0.147-0.163,0.297-0.481,0.439C392.057,96.758,392.245,96.603,392.473,96.435z M374.811,113.796
c-0.165,0.698-0.281,1.001-0.378,1.134c-0.286,0.592-0.49,1.074-0.822,0.864c0.146-0.783,0.369-0.896,0.475-0.877
c0.124,0.022,0.217,0.184,0.348,0.013C374.593,114.562,374.733,114.176,374.811,113.796z M374.732,118.286
c0,0,0.015-0.147,0.037-0.367c0.031-0.22,0.029-0.51,0.109-0.798c0.127-0.568,0.253-1.137,0.253-1.137l-0.537,1.151
c0,0,0.261-0.86,0.522-1.72c0.359-0.799,0.719-1.598,0.719-1.598c0.043,0.494,0.011,0.98-0.076,1.449
c-0.073,0.47-0.116,0.93-0.24,1.343C375.257,117.433,375.043,118.104,374.732,118.286z M375.243,119.049
c0,0-0.126,0.136-0.253,0.272c-0.115,0.138-0.23,0.276-0.23,0.276c-0.024-0.003,0.476-0.799,0.476-0.799L375.243,119.049
l0.116-0.122c0,0,0,0.06,0,0.165c-0.002,0.105-0.002,0.255,0.025,0.433c0.041,0.359,0.095,0.837,0.149,1.316
c0.032,0.486,0.166,0.954,0.237,1.313c0.079,0.358,0.13,0.596,0.13,0.596s-0.058-0.229-0.144-0.575
c-0.077-0.346-0.229-0.796-0.274-1.268c-0.068-0.464-0.135-0.929-0.186-1.278C375.234,119.284,375.243,119.049,375.243,119.049z
M402.627,146.132c0.964-0.734,0.187-1.285-0.851-1.777c-1.02-0.57-2.34-1.07-2.523-1.652c-0.184,0.27-0.709,0.5-0.745,0.835
c-0.038,0.34,0.424,0.804,2.285,1.379c-1.703-0.21-2.104-0.683-2.36-1.001c-0.267-0.309-0.397-0.437-1.637-0.068
c0.779,0.237,1.567,0.671,2.216,1.024c0.655,0.337,1.15,0.645,1.281,0.716c0,0-0.464-0.135-0.928-0.269
c-0.232-0.067-0.464-0.135-0.639-0.186c-0.171-0.059-0.285-0.099-0.285-0.099c0.306,0.755,1.087,0.835,1.899,0.85
C401.153,145.913,402.022,145.779,402.627,146.132z M423.05,149.009l2.448,0.571l-2.295-0.654L423.05,149.009z M438.223,190.426
c0.205,0.136-0.266,0.824-0.943,1.455c-0.67,0.64-1.591,1.13-2.134,0.974C436.535,191.928,438.06,190.936,438.223,190.426z
M412.86,198.403c0,0,0.178,0.031,0.447,0.055c0.269,0.026,0.628,0.062,0.987,0.099c0.361,0.036,0.723,0.072,0.994,0.099
c0.271,0.014,0.452,0.022,0.452,0.022c-0.238,0.547-0.897,0.553-1.65,0.46c-0.755-0.075-1.598-0.308-2.278-0.246
C411.355,198.373,412.413,198.734,412.86,198.403z M395.054,193.76c0,0-0.177-0.15-0.348-0.308
c-0.171-0.156-0.343-0.312-0.343-0.312s0.074,0.344,0.147,0.688c0.074,0.351,0.164,0.688,0.164,0.688L395.054,193.76z
M395.533,195.542c-0.747,0.112,0.961,1.298,1.456,1.404c0,0-0.387-0.325-0.747-0.683
C395.888,195.902,395.533,195.542,395.533,195.542z M381.824,184.809l0.818,0.945l0.023-1.433L381.824,184.809z M383.866,185.708
c-0.328,0.636-1.075,1.115,1.186,2.984c0.573-0.387,0.05-0.938,1.342-0.727c-0.512-0.783-1.213-1.16-1.569-1.464
c0.339,0.544,1.043,0.9,0.831,1.34C384.77,187.225,384.078,186.37,383.866,185.708c0.115-0.225,0.179-0.475,0.033-0.828
C383.744,185.018,383.742,185.322,383.866,185.708z M391.714,192.14c0.344,0.151,0.649,0.263,0.832,0.254l0.038,0.239
C392.114,192.653,391.886,192.403,391.714,192.14c-0.378-0.166-0.803-0.38-1.241-0.608c-0.613,0.261,0.727,1.727,0.977,2.303
c-0.665-0.711-1.012-1.579-2.166-2.108c0.022,0.234-0.179,0.232,0.436,0.719c0,0-0.354-0.246-0.702-0.5
c-0.349-0.254-0.699-0.508-0.699-0.508c-0.97-1.874,0.625-0.825,2.154,0.095c0.123-0.067,0.312-0.091,0.67-0.011
C391.42,191.621,391.546,191.888,391.714,192.14z M383.497,181.935c0,0,0.09,0.206,0.181,0.411
c0.085,0.21,0.195,0.402,0.195,0.402c0.1,0.491-0.258,0.402-0.295,0.63C382.961,182.521,382.565,181.15,383.497,181.935z
M430.278,193.585c-0.462,0.408,1.042,0.445,2.171-0.284l-0.268,1.068c-0.139-0.247-0.809-0.067-1.479,0.181
c-0.678,0.229-1.368,0.51-1.516,0.544C428.454,194.541,429.547,194.458,430.278,193.585z M431.332,151.818
c-0.06-0.58-0.953-0.971-1.907-1.276c-0.958-0.294-1.988-0.442-2.313-0.68C428.892,150.015,432.804,151.043,431.332,151.818z
M425.629,150.658c-0.889-0.218-1.168-0.165-0.957-0.674c-0.387-0.313-1.161-0.187-1.554-0.499
C424.973,149.402,424.684,150.21,425.629,150.658c0.229,0.063,0.491,0.141,0.811,0.259
C426.074,150.856,425.833,150.762,425.629,150.658z M449.542,171.47c0,0-0.222,0.259-0.443,0.517
c-0.206,0.253-0.473,0.485-0.473,0.485s-0.066,0.423-0.133,0.845c-0.023,0.214-0.078,0.423-0.121,0.58
c-0.04,0.157-0.067,0.262-0.067,0.262s0.391-0.626,0.68-1.304c0.159-0.336,0.326-0.679,0.403-0.942
C449.479,171.646,449.542,171.47,449.542,171.47z M438.283,186.557c0.418,0.283-1.279,1.535-1.761,1.603
c0.442,0.406,1.57-0.467,2.481-1.129c0.145-0.055,0.347-0.18,0.628-0.41c-0.199,0.106-0.401,0.246-0.628,0.41
c-0.413,0.156-0.373-0.269-0.504-0.431l0.318-0.483c0,0-0.321,0.21-0.642,0.419c-0.316,0.214-0.657,0.396-0.657,0.396
s0.193-0.09,0.387-0.181S438.283,186.557,438.283,186.557z M406.266,194.172c-1.269,0.184-1.399,0.029-2.128-0.368
C404.444,193.681,405.501,193.841,406.266,194.172z M444.756,178.925c-0.886,1.817,1.299-0.31,0.792,0.949
c0,0,0.141-0.232,0.28-0.465c0.142-0.231,0.254-0.477,0.254-0.477c-0.429,1.825-1.231,0.681-1.797,1.762
c0,0,0.102-0.18,0.204-0.358c0.09-0.185,0.18-0.369,0.18-0.369c-0.055-0.427-0.309-0.228-0.599,0.055
c-0.314,0.271-0.679,0.623-0.901,0.542C443.592,179.727,445.073,178.212,444.756,178.925z M404.51,193.38
c-2.069,0.01-1.395-1.021-2.446-1.521C403.663,191.902,403.127,192.795,404.51,193.38z M434.708,186.377l0.04-0.16
c0,0-0.376,0.149-0.752,0.298c-0.373,0.15-0.751,0.289-0.751,0.289l-0.049,0.161c0,0,0.386-0.131,0.757-0.287
C434.33,186.527,434.708,186.377,434.708,186.377z"/>
<path class="st3" d="M400.206,198.283c-0.571-0.129-0.929-0.272-1.211-0.424C399.386,197.972,399.792,198.104,400.206,198.283z"/>
<path class="st3" d="M421.12,145.604c-0.077,0.143-0.288,0.187-0.556,0.192C420.611,145.714,420.754,145.645,421.12,145.604z"/>
<path class="st3" d="M416.803,144.545c-0.055-0.009-0.114-0.019-0.166-0.026c-0.036-0.02-0.087-0.048-0.128-0.071L416.803,144.545
z"/>
<path class="st3" d="M454.929,98.017c0.709,0.931-0.889-0.101-1.606-0.278C454.039,97.916,454.442,97.49,454.929,98.017z"/>
<path class="st3" d="M449.565,95.45c0.379,0.31,0.952,0.591,1.683,0.83C450.776,96.189,450.285,95.999,449.565,95.45z"/>
<path class="st3" d="M454.111,96.885c-1.138-0.13-2.101-0.343-2.863-0.605C451.979,96.43,452.662,96.314,454.111,96.885z"/>
<path class="st3" d="M434.127,92.733c0.845,0.569,2.61,0.577,2.61,0.577c-3.838-0.103,0.64,0.922,0.887,1.336
C435.32,94.128,435.385,93.596,434.127,92.733z"/>
<path class="st3" d="M429.105,91.96c0.393,0.033,0.771,0.054,1.066,0.015C429.79,92.052,429.443,92.026,429.105,91.96z"/>
<path class="st3" d="M427.655,92.28c-1.313-0.168-1.756-0.697-2.349-1.116c1.636-0.274,2.625,0.533,3.799,0.796
C428.169,91.864,427.251,91.781,427.655,92.28z"/>
<path class="st3" d="M389.136,101.473c0.282-0.07,0.903-0.363,1.04-0.116c0,0-0.465,0.22-0.93,0.439
c-0.238,0.103-0.455,0.232-0.619,0.328c-0.164,0.095-0.274,0.158-0.274,0.158C387.572,102.552,388.769,101.683,389.136,101.473z"
/>
<path class="st3" d="M382.047,104.524c-0.667,0.508-0.661,0.795-0.62,0.972c0.043,0.18,0.147,0.276-0.192,0.51l-0.619-0.743
c0,0,0.346-0.201,0.691-0.402C381.677,104.693,382.047,104.524,382.047,104.524z"/>
<path class="st3" d="M379.68,100.152l0.508-0.3c-0.174,0.131-0.348,0.262-0.535,0.403L379.68,100.152z"/>
<path class="st3" d="M378.187,111.093c0,0,0.34-0.121,0.68-0.241c0.342-0.11,0.717-0.186,0.717-0.186
C378.79,111.571,378.061,111.307,378.187,111.093z"/>
<path class="st3" d="M377.666,116.629l0.352-0.813c0,0-0.099,0.642-0.198,1.284c-0.057,0.325-0.029,0.66-0.049,0.909
c-0.009,0.251-0.015,0.418-0.015,0.418s-0.043-0.451-0.085-0.902c-0.037-0.227-0.018-0.449-0.013-0.617
C377.662,116.741,377.666,116.629,377.666,116.629z"/>
<path class="st3" d="M378.525,123.445l0.307,0.15c0,0,0.031,0.12,0.077,0.3c0.049,0.179,0.097,0.425,0.192,0.657
c0.17,0.474,0.339,0.947,0.339,0.947s-0.251-0.507-0.502-1.014C378.718,123.969,378.525,123.445,378.525,123.445z"/>
<path class="st3" d="M451.82,164.97c-0.389,0.33-0.742-0.501-1.259-1.432c-0.271-0.459-0.494-0.999-0.79-1.419
c-0.287-0.426-0.549-0.793-0.748-0.993c0.658,0.009,1.072,0.697,1.379,1.532c0.156,0.418,0.32,0.853,0.554,1.243
C451.154,164.31,451.411,164.683,451.82,164.97z"/>
<path class="st3" d="M403.481,198.848c0,0,0.87,0.241,1.741,0.483c0.435,0.13,0.875,0.229,1.208,0.293
c0.332,0.069,0.554,0.116,0.554,0.116c-1.417-0.021-1.61-0.093-1.792-0.199C405.01,199.43,404.835,199.25,403.481,198.848z"/>
</g>
</g>
</svg>
body {
background-color: #ededed;
color: #ccc;
text-align: center;
margin:0;
padding:0;
width:300px;
height:250px;
overflow:hidden;
}
h1 {
font-family: Arial, sans-serif;
}
svg {
visibility:hidden;
cursor:pointer;
}
var tl = new TimelineMax({});
TweenLite.set("svg", {visibility:"visible"});
TweenLite.set("#fivePath", {drawSVG:0});
tl.from("#bg", 0.6, {opacity:0})
.to("#fivePath", 1, {drawSVG:true, ease:Power1.easeOut} )
document.getElementById("bg").onclick = function() {
tl.restart();
}
//see how it works here: https://codepen.io/GreenSock/pen/EZooqB?editors=1010
Also see: Tab Triggers