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 id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 800">
<title>Need For Speed</title>
<rect id="road" x="800" y="718" width="0" height="82" opacity="0.75"/>
<path id="underline" d="M282,234s931.5.5,1221.5.5c101-1,97.78,149.92-45.72,149.92" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
<g id="endPaths">
<path id="f_feel" d="M103.8,625.19a53.76,53.76,0,0,1-8.86-1.79c3.6-15.46,12-30.26,12.25-46.34.29-18.51-12.54-32.28-19.16-48.91.12-.35.18-.52.31-.87h35.47c.35,2.45.87,6.23,1.27,8.86,1.19,7.75.27,11-3.91,11.11l-8.93.21-5,.1a120,120,0,0,1,5.9,11.38,27.68,27.68,0,0,1,2.16,8.65l1.06,0c4.14-.07,6.24-.14,10.42-.24a56.21,56.21,0,0,1,.65,9.35,68.68,68.68,0,0,1-.94,9.28l-10.59.06h-1.08c-1.32,13.24-3.46,26.14-3.84,39.45A29,29,0,0,1,103.8,625.19Z" fill="#fff"/>
<path id="e_feel1" d="M160.9,621c-.15,9.63-2.13,13-5.3,12.61-5.8-.72-8.78-.34-14.47-1-3-.34-5.39-6.34-5.58-16.93-.52-29.32-1.68-58.13-3.16-87.39l.6-1h26c.27,3.44.33,6.46.33,9.05a82.15,82.15,0,0,1-.77,10.2H143.61c0,3.88.08,6.61.08,10.35,0,4,0,6,0,10,1.34-.14,2.91-.14,3.68-.14h8.35a89.17,89.17,0,0,1,0,18.67h-12c0,4.37-.06,6.26,0,11.12.07,4.15.12,7.65.29,12.71v.19a36,36,0,0,1,4-.31c5.06.08,7.59.23,12.66.53C160.78,612.26,160.94,617.09,160.9,621Z" fill="#fff"/>
<path id="e_feel2" d="M192.58,622.86c-.18,10.43-2.36,14-5.64,14a103,103,0,0,1-14.58-.85c-3.11-.4-5-6-5.4-17.59-.89-30-.62-60.08-.62-90.13l.38-1c9.41,0,11.51.13,25.63-.11a47.13,47.13,0,0,1,.36,9,60.84,60.84,0,0,1-1.65,10.17c-5.85.18-7.93.17-12.39.17h-3.76c0,3.88.05,6.61.05,10.34v10.06c1.42-.14,2.95-.14,3.71-.14,3.34,0,4.89,0,8.56-.09a86.86,86.86,0,0,1,.43,9.37c0,2.6-.23,6.51-.57,9.4-3.5,0-5.08,0-8.42,0H175c0,4.37,0,6.11,0,11.27.06,4.41.12,8.3.29,13.95v.21a27.07,27.07,0,0,1,4-.31c5.07.09,7.59,0,13.08.08C192.48,613.43,192.64,618.68,192.58,622.86Z" fill="#fff"/>
<path id="l_feel" d="M236,637.5c1,2-25.19.06-30.7-.13-3.48-.12-5.68-5.52-6-17.77-.89-31.66,2.25-61.31,5.17-92.66.27-.41.4-.62.66-1l5.7-.12c5.94-.13,9.42,4.13,6.2,14.15-8.62,22.28-8.8,47.42-8.25,70.92a18.09,18.09,0,0,1,5.62-.81c4.11,0,15.64-1.55,15.64-.55C230,615.82,233,631.5,236,637.5Z" fill="#fff"/>
<path d="M147.62,524.27c-8.62-11.77-20.92-9.68-28.08-12.48-1.87.89-5.94,2.91-7.72,3.76-4.88,2.34-7.22,3.47-11.44,5.52-2.7-.23-4.74-.63-5.56-1.2s-1.06-1.7,1.38-3.91c19.72-11,39.31-22.25,59.32-32.72a18.84,18.84,0,0,1,2.5,3.86c2,3.89.38,6.57-6.61,9.8l-3.53,1.63c-1.85.86-6,2.73-7.95,3.63l-.13.06c1.63,1.62,3.2,2.28,5.2,4.28,7,5,14.73,9.7,18.62,17.59Z" fill="#fff"/>
<path d="M213.06,494.63c-1.24-2.54-1.37-3.15-2.11-4.78-1.29.62-3.28,1.67-4.56,2.29l-10.63,5.2c-1.28.63-3.23,1.5-4.61,2.17.75,1.69,1.26,2.46,2.17,4.68,2.77,6.75,6.1,14.2,8.69,20.58a54,54,0,0,1-8.84,1,74.92,74.92,0,0,1-8.67-.08c-6.3-15.87-13.1-31.25-20.82-46.47a82.37,82.37,0,0,1,14.66-6.84c2.2,4.65,4.52,8.81,7.13,14.07.95,1.92,1.32,3,2.06,4.65,1.37-.64,3.27-1.61,4.55-2.21l10.63-5c1.28-.61,3.33-1.49,4.61-2.09-.74-1.62-1.29-2.59-2.25-4.52-2.6-5.25-4.92-9.41-7.12-14.06a70.28,70.28,0,0,1,7.16-3.78,73.54,73.54,0,0,1,7.5-3.06c9.88,19.37,19.33,38.65,29.94,57.66a30.45,30.45,0,0,1-7.22,4.06,38.72,38.72,0,0,1-8.89,2.45C222.1,511.88,217.44,503.33,213.06,494.63Z" fill="#fff"/>
<path d="M286.6,472.11c.36,4.48-2.21,7.5-6.85,10.69-8.51,5.85-11.91,9.69-19.2,16.71-3.9,3.76-7.43,3.67-11.49-4-7.72-14.87-14.59-30.05-23.17-44.47.13-.27.19-.41.31-.68,13.78-5.76,28.23-8.53,42.81-11.45a11.2,11.2,0,0,1,2.54,2.55,3,3,0,0,1-.14,2.62c-9.26,3.05-13.17,4.48-20.64,7.43-2.52,1-3.75,1.5-6.17,2.52,1.31,1.58,2.32,2.67,3.57,4.28a16.46,16.46,0,0,1,2.33,4.2c2.36-1.17,4.92-2.37,6.2-3l14-6.54a11,11,0,0,1,2.61,3.45,10.81,10.81,0,0,1,1,4.21l-14,6.54L254,470.1c.84,1.79,1.1,2.3,2.12,4.66.87,2,1.69,4.15,3,7.22l.05.12c1.86-1.31,3.73-2.6,6.08-4a166.18,166.18,0,0,1,20.33-10.91A35.25,35.25,0,0,1,286.6,472.11Z" fill="#fff"/>
<path d="M331.05,427.23c.1,13.39-.23,26.58-1.28,39.93-2.64.89-7.18,2.32-8.78,2.86s-4.43,1.6-6.76,2.35c-2.28-9.7-3.42-16.48-6.31-24.21a64.5,64.5,0,0,0-3.18-7.73l-.2.09c.74,4.14-.38,11.83-.89,18.14-.49,6-2.51,13.26-2.95,21.68a34.27,34.27,0,0,1-5.43,4,25.62,25.62,0,0,1-6.5,2.82c3-17.21,8.72-36.21,6-53.83,1.62-.37,4.91-.81,6.24-1s3.79-.46,6.15-.6c4.28,8.06,6.88,8.18,10.36,16.12,1.39,3.29,2.89,6.36,3.27,8.84l.31-.2c.9-6.53.42-14.65.41-18.67,0-2.85-.08-3.31-.17-5-.13-2.51,1.8-5,5.86-5.54,1.38-.2,2.07-.28,3.44-.39Z" fill="#fff"/>
<path d="M370.81,460.25c-.51,2.69-2.84,4.47-6.51,4.55-6.74.14-10,.28-16.7.77-3.58.26-5.83-1.8-6.15-5.31-.48-11-.56-21.89-.56-32.9l.46-.43c9.34-.5,18.66-1.4,28-1.76a15.2,15.2,0,0,1,.39,3.43,7.62,7.62,0,0,1-.91,3.26c-5.3.05-7.95.13-13.26.28l-4.48.12c0,1.05.06,1.85.06,3.32V440c1.69-.06,3.51-.06,4.42-.06h9.95a15.68,15.68,0,0,1,0,8.45H351.16c0,2,0,3,0,4.86,0,1.57,0,2.67.13,4.22v.05c1.47-.09,2.95-.17,4.74-.2,5.95-.09,8.92-.11,14.94-.11A17.9,17.9,0,0,1,370.81,460.25Z" fill="#fff"/>
<path d="M410.46,468.09c.8,3.79-1.8,4.83-6,3.57-7.81-2.3-12-3.85-19.64-5.54-4.12-.91-6.44-3.37-6.55-6.45-.11-11.4-.06-22.78-.09-34.17l.46-.44c9.34-.14,18.68-.5,28-.81a16.85,16.85,0,0,1,.39,3.62,9.69,9.69,0,0,1-.91,3.68l-13.26.16-4.49.05c0,1.3.07,2.25.07,3.79s0,2.65,0,4.67c1.68,0,3.49,0,4.4,0,4,.12,5.93.18,9.89.26a27.61,27.61,0,0,1,.27,5.8,30.47,30.47,0,0,1-.89,5.73c-3.87-.5-5.79-.84-9.64-1.49l-4.28-.7c-.05,2.2-.11,3.17,0,5a32.61,32.61,0,0,0,.45,4.34v.06c1.53.28,3.06.58,4.94,1a143.85,143.85,0,0,0,15.5,3.29A38.81,38.81,0,0,1,410.46,468.09Z" fill="#fff"/>
<path d="M447.26,488.59c-1.74,3.62-6,0-9.67-2.69-5.76-4.23-11.74-8.2-17.65-10.35l-.51-.62c-5.19-17.3-3.95-32.84-3.77-50.59l.49-.45c5.89-.28,10.8-.33,16.09-.29,3.35,0,8.24.81,11.24,4.07,6.11,6.7,7.66,16.64,8.48,25.6C453,464.61,450.46,477.71,447.26,488.59ZM432.21,433l-6.28-1.14c-.22,12.85-.87,24.26,1.83,36.91,2.51.83,4.55,1.66,6.88,2.63,7.87,3.3,6.85-10.9,6.47-19.28S439.47,434.26,432.21,433Z" fill="#fff"/>
<path d="M473,474.05a39.38,39.38,0,0,1-5.73,2.88c-.82-18-5.31-32.15-14-47.81,0-.21,0-.32,0-.52,5.58-4,12.57-4.89,25.11-8.67a35.47,35.47,0,0,1,2.76,2.9c2.13,2.51,1.25,4.38-2.36,6-3.1,1.38-4.6,2-7.5,3.27-1.67.73-2.49,1.09-4.1,1.85,1.4,1.68,2.85,3.31,4,4.67a7.24,7.24,0,0,1,1.63,3.6l1.19-.59c4.56-2.31,6.72-3.3,11.36-5.77a20.29,20.29,0,0,1,2.7,3.81,20.05,20.05,0,0,1,1.64,4.27c-5.41,2.6-8.11,3.78-13.49,6.35l-1.38.67c2,6.93,4.28,10.68,4.16,19.14A58.07,58.07,0,0,1,473,474.05Z" fill="#fff"/>
<path d="M491.49,417.89c1.91-2.8,5.29-5.73,11.66-9a45.39,45.39,0,0,1,15.21-5c7.61-1.07,11.93,2.09,16.43,8.29s7.24,14.73,3.8,22.14c-2,4-5.32,7.07-12.08,10.15s-11.36,3.71-15.37,3.47c-7.51-.49-12.06-5.48-16.32-12.07S488,423.13,491.49,417.89Zm31.35,19.68c8.18-4.37,5.24-12.37.68-18.88s-8.78-10.21-16.82-5.83-5.26,9.33-.69,16.21S514.73,441.9,522.84,437.57Z" fill="#fff"/>
<path d="M567.9,398c2.87-.43,5.11.68,7.9,2.7,2.22,1.59,3.69,2.61,6.55,4.59a17.56,17.56,0,0,0,7.69,3.24c.06,2.54-2.28,5.26-5.16,6.76-4,2.06-6.31,1.07-11.06-2.52-3.28-2.48-5.08-3.88-7.77-6-2.19-1.69-4-2.45-7.4-.62l-2.56,1.39c3.4,5.61,7.07,10.4,10.47,16.07a45.68,45.68,0,0,1-5.33,3.09,51.15,51.15,0,0,1-5.6,2.51c-7.27-12-14.4-24.62-23.45-35.47l.28-.58c5.79-3.35,11.17-6.25,16.46-9,9.68-5,17.16-9.52,21.34-2.54C572.94,386.11,570.82,394.53,567.9,398Zm-16.43,2.06c2-1.21,3.92-2.38,4.77-2.87,5-2.81,4.51-6.88,3.09-9.24s-3.39-2.34-8.57.51c-1.37.75-3.14,1.73-5.07,2.76C547.41,393.18,548.48,395.21,551.47,400.05Z" fill="#fff"/>
<path d="M507.07,589.6c6.87,5.53,18.27,13.89,26,12,8.33-2.07,8.19-18.48,7.32-26.56-.7-6.49-1.9-10.48-10.11-12-7-1.24-10.72-2-17.54-3.27-14-3.23-22.19-14.83-29.52-25.51-6.7-9.77-20.19-28.49-19.63-41.33.53-12.09,13.61-17.41,23.23-22.54,15.36-8.19,34.44-22,52.9-21.33-2.92,15-5,30.2-8.82,45-10.42-4.81-23.55-4.47-33.1,1.44-9.17,5.68-7.08,17.52-3.8,24.21s6.47,9.28,13.63,8.6a60.05,60.05,0,0,1,20.67,1.33c16,3,30.4,23.36,31.74,38.74,2.27,25.9,12.59,73.23-24.84,76.56-11.86,1-24.74-.75-33.41-9.82C502.15,620.05,503,604.16,507.07,589.6Z" fill="#fff"/>
<path d="M600.46,569.74c-4.11-.37-6.16-.59-10.3-1.09,3.62,25,11,49.28,15,74.21a34.84,34.84,0,0,1-9.68.88,38.87,38.87,0,0,1-10.72-1.37c-5.28-35.37-11.9-70.89-18.2-106.12-5.43-30.42-19.47-74.21-1.43-102.59a16.83,16.83,0,0,1,1.9-1c11.08-.42,22.09.28,32.84.17,32.06-.33,29.09,57.42,30.66,77.48C632.16,531.11,630.23,571.49,600.46,569.74Zm-13.24-32.31c3.71-.15,7.51,0,8.84-.08,10.94-.35,11.09-22.91,10.06-31.5-1.4-11.76-3.13-38.62-15.37-42.24-2.66-.79-5.77-.94-9.66-1.8C579.93,487.63,584.06,511.93,587.22,537.43Z" fill="#fff"/>
<path d="M710.56,623.06c-.66,9.6.2,22.92-12.66,23.35-11.9-.2-23.79-.25-35.69-.28C649.42,645,650.12,623.88,649,614.9a1304.84,1304.84,0,0,1-2.68-179.48c.43-.59.65-.87,1.08-1.39,19.18.18,38.36.32,57.53.6a181.49,181.49,0,0,1,.79,20.47,271.59,271.59,0,0,1-1.84,30.82c-10.76.06-16.13.09-27,.13l-9.21,0c0,11.55.14,18.91.14,24.45,0,6,0,6.44-.14,13.29,3.48-.27,7.21-.28,9.08-.28,8.15,0,12.2,0,20.32,0a146.25,146.25,0,0,1,1.07,18.85,141.35,141.35,0,0,1-1.35,18.85c-8.29-.71-12.43-1-20.68-1.45-3.67-.17-5.5-.24-9.15-.3-.14,7.48-.3,7.65-.06,14.57.21,5.92.49,13.15,1.13,24.21l0,.41a57.84,57.84,0,0,1,9.92-.54c10.51.43,21,1.21,31.52,2.1C709.87,605.34,710.49,615.3,710.56,623.06Z" fill="#fff"/>
<path d="M788.05,624.77c-.62,9.45.08,22.18-12.53,22.53-11.95-.13-23.9,0-35.85-.19-13.42-.61-13.09-20.07-14.12-29.53-3.8-60.28-2.78-120.71-2.78-181.09.37-.67.55-1,.92-1.57,19.31.25,38.62.21,57.93.69.68,5.09.78,13.29.72,20.79a275.25,275.25,0,0,1-2.11,31.29c-11-1.42-16.53-2-27.46-2l-9.21,0c0,11.25.14,18.43.14,23.88,0,5.87,0,6.54.13,14.34,3.46-.29,7.2-.31,9.07-.32a127.49,127.49,0,0,1,20.5,1.43A171.16,171.16,0,0,1,775,545.29a160.48,160.48,0,0,1-.84,20.17c-8.2-.16-12.28,0-20.51-.1-3.65-.05-5.48-.11-9.15-.27.13,8.53,0,9,.23,15.53.21,5.58.48,12.23,1.13,22.4l0,.37c3.07-.27,6.15-.56,9.9-.54q15.6,0,31.18.09C787.28,607.81,788,617.34,788.05,624.77Z" fill="#fff"/>
<path d="M863.6,635.69c-3.38,8.82-14.87,13.41-23.54,13-11.1-.52-22.81-.63-34.23-1.16-.4-.53-.6-.81-1-1.41-4-69.91-5.21-138.64-4.42-208.7.39-.66.58-1,1-1.55,11.55-.07,23.13.05,34.65.15,10.67.09,20.49,5.07,24.16,15.79,10.58,30.5,13.1,67.41,14,99.45C874.86,578,873.59,610.57,863.6,635.69ZM834.76,487.6c-3.84-.79-8.5-.61-13.36-1.63-.82,40.76-.71,81.48,2.31,122.15,4.82-.36,9.1,0,13.29-.33,15.65-1.23,15.46-44.46,15.17-56.52C851.8,535.71,849.92,490.73,834.76,487.6Z" fill="#fff"/>
<path d="M906.8,434.43c29.34.92,27.5,57.31,27.29,75.53-.21,17.22-4.34,34.15-16.91,47.51-3.14,3.26-4.71,4.87-7.86,7.84-.39,7.06-.68,8.39-1.17,14a18.56,18.56,0,0,1-7.6,1.6,21.62,21.62,0,0,1-8.06-1.58c-.65-10.81-1.23-21.63-1.83-32.44.6-1.54.91-2.31,1.52-3.82,2.94-2.51,4.41-3.73,7.36-6,7.12-6,12.61-5.84,12.7-20.79.06-8.27-1.11-27.52-10.35-28.77-4.65-.63-10.66,8.33-15.29,17.08-5.92-16.55-6.71-36.08-6.73-53.51C886.84,441.91,894.66,434,906.8,434.43Z" fill="#fff"/>
<path d="M911,606.42c1.67,3.77,2,15.57,2.22,22.1.17,6.19,0,14.47-1.17,16.32-1.37,2.13-5.81,2.95-9.2,3.12s-6.88-.15-9.44-2.22c-.82-2.56-1.63-10.15-1.93-16.44-.32-6.63-.35-17.56.19-22.5,2.42-3.84,6-6.06,9.55-6.11S909.49,603.07,911,606.42Z" fill="#fff"/>
<path d="M953,499.48l-2.8,20.74a8.8,8.8,0,0,1-4.35.86,9,9,0,0,1-5.07-1.57l-.33-1.15q6.66-44.67,14.3-89.09a27.51,27.51,0,0,1,6.05-1.72,17.66,17.66,0,0,1,6,0c5.31,30.28,9.6,60.68,14,91.1a8.41,8.41,0,0,1-6,2.72c-3.32,0-4.94-2.58-6.24-12.45l-1.24-9.44a16.52,16.52,0,0,1-2.53.14h-9.23A16.57,16.57,0,0,1,953,499.48Zm2.4-17.88c.85,0,1.89-.15,2.6-.15h4.75c.65,0,1.56.15,2.34.15-.44-3.55-.66-5.33-1.11-8.87-1.17-9.26-2.15-18.56-3.57-27.78h-.39c-.65,6.07-2.15,17.75-3.12,25.62Z" fill="#fff"/>
<path d="M1021.68,421.71v97.94a18.16,18.16,0,0,1-6.31,1.29,21.65,21.65,0,0,1-6-.86q-5.1-25.61-10.21-51.22c-1.49-7.29-2.79-14.83-3.7-20l-.2.14q.76,21.28.78,42.6v28.47a12.34,12.34,0,0,1-4.74.86,13.26,13.26,0,0,1-4.94-.86v-95a15.9,15.9,0,0,1,6.17-1.61,24,24,0,0,1,6,.73c3.42,16.39,6.84,32.76,10.08,49.19,1.62,8.44,3.12,16.45,4,21.75l.26-.29c-.55-14-.75-28.12-.78-42.18V435.63c0-9.92,1.82-13.84,5.78-14.39l3.38-.47C1021.41,421.14,1021.5,421.33,1021.68,421.71Z" fill="#fff"/>
<path d="M1031.69,420.4a14.54,14.54,0,0,1,5.2-1.4,12.59,12.59,0,0,1,5.26.51V520.08a16.33,16.33,0,0,1-10.46,0Z" fill="#fff"/>
<path d="M1054.24,419.27a24.46,24.46,0,0,1,7-1.77,18.81,18.81,0,0,1,6.57.35c1.37,13.23,2.38,26.49,3.83,39.71.33,3.43,1.89,18.74,2.41,25.9h.45c.59-7.16,2.08-22.47,2.41-25.9,1.54-13.8,2.53-27.66,3.9-41.48a18.17,18.17,0,0,1,6.56-2,17.78,17.78,0,0,1,7,.61q1.54,52.54,3.45,105.06a11.42,11.42,0,0,1-5.33,1.15,12.15,12.15,0,0,1-4.49-.72l-1-39.77q-.35-17-.52-34h-.39c-2,19.73-4.25,39.43-6.43,59.14a18.46,18.46,0,0,1-5.4.86,18.69,18.69,0,0,1-5.33-.86c-2.14-19.56-4.31-39.11-6.37-58.68h-.45c0,11.16-.22,22.33-.52,33.49q-.49,19.89-1,39.77a12.43,12.43,0,0,1-4.55.72,11.11,11.11,0,0,1-5.26-1.15Q1052.57,469.54,1054.24,419.27Z" fill="#fff"/>
<path d="M1114.54,500.33c-1.12,8.56-1.72,12.54-2.79,21.26a8.49,8.49,0,0,1-4.38.09,11.55,11.55,0,0,1-5.09-2.14c-.13-.47-.2-.7-.33-1.16,5.21-34.92,10.1-69.86,14.94-104.84a26.2,26.2,0,0,1,6.5-1.49,18.48,18.48,0,0,1,6.47.37c3.2,36.29,7.48,72,12.21,108.15-1.36,2.63-3.84,4.82-5.74,5.18-3.23.62-4.95-3.18-6.2-14-.48-4.15-.71-6.15-1.19-10.33a13.76,13.76,0,0,1-2.54.05c-3.69-.2-5.54-.38-9.25-.71A15.71,15.71,0,0,1,1114.54,500.33Zm2.36-18.73c.85,0,1.89-.15,2.6-.15h4.75c.65,0,1.56.15,2.34.15-.44-3.55-.67-5.33-1.11-8.87-1.36-10.7-2.51-21.26-3.29-32h-.4c-1,10-2.11,19.93-3.39,29.87Z" fill="#fff"/>
<path d="M1151.57,437c-1,0-3.23.26-4.22.27-2.71.05-4.08.09-6.82.17,0-5.08.33-10.31.57-14s.6-8.6,1-12.29c11.18-.64,22.32-.84,33.5-1.48a61.2,61.2,0,0,1,.1,10.08c-.6,9.33-2.86,13.74-7,15l-2.07.59c-1.07.29-3.37.64-4.41.84h-.06c-.49,5.84-.72,9.69-.89,14.26-.1,19.25-.34,37.57-2.88,56.63-1.76,2.3-3.33,4.19-4.33,5.39s-2.65,3.32-4.27,4.22C1150.4,490.1,1149.91,463.46,1151.57,437Z" fill="#fff"/>
<path d="M1215.83,465.56c.65,3-1.68,6.9-6.28,8.24-8.44,2.44-13.73,5.31-23.54,11.63-5.26,3.38-7.92,1.75-7.58-1.4,3.23-24,1.61-49.63,2.85-73.8.2-.44.31-.66.51-1.09,9.86-.91,19.86-1.75,29.77-1.8a68.64,68.64,0,0,1,.39,7.28,29.51,29.51,0,0,1-.94,6.79c-5.43.44-8.34,1.28-14.25,3.23-2,.66-3,1-5,1.76-.17,3.64-.19,6.17-.23,9.72,0,3.83,0,5.86,0,8.94,2-1.2,4-2.28,5.08-2.8a42.29,42.29,0,0,1,11-4.17,26.4,26.4,0,0,1,.62,5.26,30.4,30.4,0,0,1-.62,5.49c-4.23,1.37-6.45,2.66-11,5.63-2,1.32-3,2-5.08,3.53,0,3.3,0,6.06-.09,9.11a35.07,35.07,0,0,0,.14,5.29v.06c1.88-1.34,3.74-2.62,6-3.95,7.42-4.39,11-6.12,17.06-6.08A17.53,17.53,0,0,1,1215.83,465.56Z" fill="#fff"/>
<path d="M936.8,533.67c1.8-1.48,4.21-3,6.32-3,4.29,0,5.87,3.3,6.7,14.5q1.57,21.25,3.16,42.51c.87,11.58,2,23.17,1.08,34.79-.2,2.7,0,2.72.44,2.72,4.2-30.07,5.37-60.61,7.51-90.89a21,21,0,0,1,7.68-1.16,20.63,20.63,0,0,1,7.75,1.16c2,29.44,4.06,58.88,5.72,88.34.15,2.74.38,2.77.83,2.77.41-12.65,1.24-25.28,2.26-37.89q2.1-27.69,4.21-55.36a13,13,0,0,1,5.42-1,10.54,10.54,0,0,1,5.73,1.81l.52,1.48q-5.32,59.1-9.93,118.22a55,55,0,0,1-10.24,1c-3.61,0-7-.39-7.65-13.74-.62-14-1.22-27.93-2.29-41.88q-1.32-19.1-2.18-38.22h-.53c-.66,12.75-1.52,25.49-2.48,38.22-1.12,18.11-3.5,36.07-5.42,54.1a69.2,69.2,0,0,1-12.13.84c-4.67-.13-8.46-.62-7.69-13.69C944.46,603.86,939.93,569,936.8,533.67Z" fill="#fff"/>
<path d="M1009.51,532.19a19,19,0,0,1,12.11,0v121.5a15.81,15.81,0,0,1-6.09.91,16.43,16.43,0,0,1-6-1.17Z" fill="#fff"/>
<path d="M1040.53,554.78c-1.11-.09-3.62-.12-4.73-.2-3-.22-4.57-.31-7.65-.41-.36-4-.43-8-.43-10.95s.08-7.11.45-11c12.42,0,24.84.05,37.25,0a78.13,78.13,0,0,1,.39,10.9c-.28,9.87-2.39,13.61-6.69,13.37l-2.15-.14c-1.11-.07-3.55-.44-4.65-.53h-.08c-.12,5.09-.12,8.52-.16,13.13.19,28.26.71,56.5.71,84.77a16.52,16.52,0,0,1-6,1,15.9,15.9,0,0,1-6-1C1040.74,620.73,1040.25,587.75,1040.53,554.78Z" fill="#fff"/>
<path d="M1108.84,609.89c-.29-4.5-.25-10.63-.3-15.46-1.37.27-3.57.9-5,1.2-4.71,1-7.18,1.52-12,2.54-1.45.31-3.61.59-5.13.9.13,4.76.37,9.39.42,13.94.21,13.59,1.2,27.18,1.94,40.75a23,23,0,0,1-9,1.19,27.49,27.49,0,0,1-7.9-1.32c-.3-40.57-1.1-81,.22-121.52a36.87,36.87,0,0,1,9.24-1.2,66,66,0,0,1,11,.48c-2.16,11.4-3.59,22.87-5,34.38-.62,5.7-1,9-1.12,12.92,1.59-.13,3.85-.46,5.37-.59l12.55-1c1.48-.12,3.76-.18,5.19-.29A107.59,107.59,0,0,1,1112,563.6c3.2-11.52,6.31-23.06,12.33-33.5a72.45,72.45,0,0,1,10.57-1c2.25-.06,7.63-.07,9.07.39-23,41-18,79-6,124,.72,2.69-12.83,3.16-15,3.11a20.21,20.21,0,0,1-8.82-2.39C1112.59,639.45,1110,624.7,1108.84,609.89Z" fill="#fff"/>
<path d="M1261.7,432.12c5.56-.09,7.37,3.59,7.37,8.55,0,8.09,1,16,1,24.09a2.43,2.43,0,0,1-2.7,2.39,106.38,106.38,0,0,0-20.65.37c-20.25,2-17.12-19-17.08-30.95s4.31-34.74,21.57-33.89c8.57.42,15.32,2.49,18.43,5.94-.34,3.61-2.78,11.39-5.17,13.1a19.51,19.51,0,0,0-12.15-4.33c-8.07,0-11.34,5.57-11.34,19.26,0,13.35,1.85,19.82,10,19.56a33.84,33.84,0,0,0,6.73-.89,55.12,55.12,0,0,0,.81-5.85c.12-1.52.11-3.19.18-4.91l-1.22-1.12c-5.14.58-7.48-.52-7.48-5.59a24.76,24.76,0,0,1,.76-5.65Z" fill="#fff"/>
<path d="M1278.09,450c4,2.93,9.22,6.47,14.06,7.12,3.9.52,5.42-3.45,5.45-6.89,0-2.19-.44-4.5-4.27-6.55l-8.2-4.28c-5.7-3.17-9.94-7.84-9.94-15.78,0-10.35,7.51-20.7,16.91-20.54a37.39,37.39,0,0,1,16.33,4.52c-.21,3.68-1.6,11.26-3.76,13.49-3.54-1.87-8.82-3.79-12.51-3.82-4,0-5.57,2.51-5.57,4.6s1,3.67,4.1,5.21l8.35,4.36c6.67,3.6,10.74,8.15,10.48,17.19-.29,9.82-2.88,27.19-18,21.3-4.75-1.84-12.17-4.95-18-9.41A20.54,20.54,0,0,1,1278.09,450Z" fill="#fff"/>
<path d="M1378.86,645.77c12.14-42.27,17.55-76.19,4-119.3-7.6-24.11-13.31-45.54-13.63-71.32.3-.62.46-.92.78-1.53,12.5-1.64,22.61-2.81,35.1-1.89,21.87,1.6,42.78,36.76,43.12,57,.36,21.89-2.73,44.86-25.77,53.24-4.07,1-5.81,3-9.42,2.14,3.09,30.14,1,44.34-8.25,82.31C1403.2,652.75,1377.07,652,1378.86,645.77ZM1406.77,534c2.89.94,8.1-.28,10-.27,13,.06,15.67-13.53,15.53-23.94-.19-13.48-9.21-27-23.12-28.27-4.14-.39-7.61-.58-11-.78C1403,498.54,1403.7,515.89,1406.77,534Z" fill="#fff"/>
<path d="M1351,499.5c-7-7,3-11.19,2-15.24a8.25,8.25,0,0,1-2.92-1.17c-4.18-2.54-6-5.51-10.54-7.5-1-.42-2.11-.61-3.41-1.11-1,4.77-1.78,5-4.28,10.51-3.21-1.35-7.64-3.81-12.06-6.09-4.6-2.37-9.92-5-11.77-6-.18-.39-.26-.57-.41-.92,17.85-12.41,22.46-48.41,27.39-67.65a40.07,40.07,0,0,1,8-.85,34.83,34.83,0,0,1,8.33,1c7.72,36,22.32,96.11,18.67,118C1369,528.5,1356.27,504.77,1351,499.5Zm-12.58-39.14a13.63,13.63,0,0,1,3,1.09c2.11,1.15,3.06,2,5.15,3.21a16.18,16.18,0,0,0,2.66,1.4c-.54-3.62-.83-5.44-1.46-9q-2.74-14.13-5.14-28.32l-.54-.06c-.88,6.83-2.7,17.21-3,23.23C1338.83,455.27,1338.8,456.83,1338.42,460.36Z" fill="#fff"/>
<path d="M1474,449.5c3.51,18.15,6.4,34.5,7.51,52.81,1.64,26.88-1.45,53.64-4,80.36a.91.91,0,0,1-.61.78c-3.56,1.15-6.92-.28-9.18-.32-2.08,0-6.06-.18-8.91-1.44a.9.9,0,0,1-.52-.88c2.52-52.64,3.73-115.22-45.69-145.25a.89.89,0,0,1-.28-1.28c6.38-9.11,34.22-30.51,47.86-37.92a3.1,3.1,0,0,1,4.53,2.19C1466.07,406.65,1469.47,426.08,1474,449.5Z" fill="#fff"/>
<path d="M1464.17,611.83a.93.93,0,0,1-.08.49c-1.82,3.86-8.33,10.43-12.47,14.36a132,132,0,0,0-11.13,12.44.61.61,0,0,1-.16.16c-4.08,3.2-9.23,6.77-14.09,7.2h-.15c-8.37.66-13.64-8.93-8.82-15.81.25-.36.52-.73.82-1.11a200.75,200.75,0,0,1,19.11-20.68,1.09,1.09,0,0,1,.17-.13c6.79-4.08,14.29-7.22,18.71-7.28S1463.76,607.52,1464.17,611.83Z" fill="#fff"/>
</g>
<g id="startPaths">
<path d="M304.55,87.47a41,41,0,0,1-6.88-.51V30.15l.59-.51h35.92a26.3,26.3,0,0,1,.5,5.12c0,4.45-2.27,6.3-7.13,6.3H311c0,2.18.09,4.45.09,6.54v5.29h18a25.62,25.62,0,0,1,.67,5.54,24.76,24.76,0,0,1-.67,5.45h-18V87A37.23,37.23,0,0,1,304.55,87.47Z" fill="#fff"/>
<path d="M381.09,80.75c-.67,4.2-3.7,6.47-8.56,6.47H350.2c-4.78,0-7.72-3-7.72-7.81V30.23l.59-.59h36.17a25.34,25.34,0,0,1,.5,5.29,19.23,19.23,0,0,1-1.17,6H355.66c0,2.27.08,3.86.08,6v5.88c2.18-.09,4.53-.09,5.71-.09h12.84a20.21,20.21,0,0,1,0,10.91H355.74V70c0,2.18-.08,3.78-.08,6v.09c1.93-.09,3.86-.17,6.21-.17h19.47A34.56,34.56,0,0,1,381.09,80.75Z" fill="#fff"/>
<path d="M429.17,80.75c-.67,4.2-3.69,6.47-8.56,6.47H398.29c-4.79,0-7.72-3-7.72-7.81V30.23l.58-.59h36.18a25.34,25.34,0,0,1,.5,5.29,19,19,0,0,1-1.18,6H403.74c0,2.27.09,3.86.09,6v5.88c2.18-.09,4.53-.09,5.7-.09h12.84a20,20,0,0,1,0,10.91H403.83V70c0,2.18-.09,3.78-.09,6v.09c1.93-.09,3.86-.17,6.21-.17h19.47A34.56,34.56,0,0,1,429.17,80.75Z" fill="#fff"/>
<path d="M474.49,75.63a34.58,34.58,0,0,1-.25,5c-.76,4.2-3.95,6.55-8.82,6.55h-19c-4.79,0-7.81-3-7.81-7.81V29.64l.59-.58h4.95c5.12,0,7.89,2.51,7.89,8.56V76c2.77-.25,5.46-.34,7.89-.34Z" fill="#fff"/>
<path d="M509.39,40.72c-1.25,0-4.11.09-5.37.09h-8.64a27.61,27.61,0,0,1-.5-5.54,28.45,28.45,0,0,1,.5-5.63h41.54a19.41,19.41,0,0,1,.67,5.12c0,4.45-2.18,6.05-7.05,6.05h-2.43c-1.26,0-4-.09-5.29-.09h-.08c0,2.35.08,4,.08,6.21V87a39.64,39.64,0,0,1-6.71.51,39.09,39.09,0,0,1-6.72-.51Z" fill="#fff"/>
<path d="M575.19,69.17c0-2.35.08-3.94.08-6.21-1.17,0-3,.09-4.19.09h-9.74c-1.17,0-2.94-.09-4.2-.09,0,2.27.09,3.86.09,6.21V87a38.45,38.45,0,0,1-6.72.51A40.23,40.23,0,0,1,543.8,87V29.64a40.12,40.12,0,0,1,6.71-.5,38.39,38.39,0,0,1,6.72.5v16c0,2.35-.09,3.95-.09,6.21,1.26,0,3-.08,4.2-.08h9.74c1.17,0,3,.08,4.19.08,0-2.26-.08-3.86-.08-6.21v-16a45.34,45.34,0,0,1,13.43,0V87a37.23,37.23,0,0,1-6.55.51,40.81,40.81,0,0,1-6.88-.51Z" fill="#fff"/>
<path d="M639.89,80.75c-.67,4.2-3.69,6.47-8.56,6.47H609c-4.78,0-7.72-3-7.72-7.81V30.23l.59-.59H638a25.42,25.42,0,0,1,.51,5.29,19,19,0,0,1-1.18,6H614.46c0,2.27.08,3.86.08,6v5.88c2.19-.09,4.54-.09,5.71-.09h12.84a20,20,0,0,1,0,10.91H614.54V70c0,2.18-.08,3.78-.08,6v.09c1.93-.09,3.86-.17,6.21-.17h19.47A34.56,34.56,0,0,1,639.89,80.75Z" fill="#fff"/>
<path d="M378.71,109v95.88A83,83,0,0,1,365,206.14a99.17,99.17,0,0,1-13.11-.85l-22.14-50.47c-3.24-7.2-6.06-14.53-8-19.88l-.43.14c1,12,1.7,30.45,1.7,42.15v28.06a55.71,55.71,0,0,1-10.3.85,59.88,59.88,0,0,1-10.71-.85V109.42a77.3,77.3,0,0,1,13.39-1.27,98.73,98.73,0,0,1,13,.84l21.86,50.34c3.52,8.32,6.76,16.21,8.74,21.43l.56-.28c-1.13-13.12-1.69-31.87-1.69-41.6v-17.2c0-10,4-13.67,12.55-13.67h7.33Z" fill="#fff"/>
<path d="M464.85,194.86c-1.13,7-6.21,10.85-14.38,10.85H413c-8,0-13-5.07-13-13.11V110l1-1h60.77a43,43,0,0,1,.84,8.89,32.12,32.12,0,0,1-2,10H422.13c0,3.8.14,6.48.14,10.15v9.87c3.66-.14,7.61-.14,9.58-.14h21.58a33.67,33.67,0,0,1,0,18.32H422.27v10.72c0,3.67-.14,6.34-.14,10.15v.14c3.24-.14,6.48-.28,10.43-.28h32.71A58.3,58.3,0,0,1,464.85,194.86Z" fill="#fff"/>
<path d="M545.63,194.86c-1.13,7-6.2,10.85-14.38,10.85h-37.5c-8,0-13-5.07-13-13.11V110l1-1h60.77a43,43,0,0,1,.84,8.89,32.12,32.12,0,0,1-2,10H502.91c0,3.8.14,6.48.14,10.15v9.87c3.67-.14,7.61-.14,9.59-.14h21.57a33.67,33.67,0,0,1,0,18.32H503.05v10.72c0,3.67-.14,6.34-.14,10.15v.14c3.24-.14,6.49-.28,10.43-.28h32.71A58.3,58.3,0,0,1,545.63,194.86Z" fill="#fff"/>
<path d="M624,199.09c-6.49,5.07-18,7-25.8,7-12.27,0-23.27-.29-35.53-.57l-1-1V109.7l1-1c12.12-.42,23.26-.56,35.53-.56,7.75,0,19.31,2,25.8,7,13.25,10.43,15.79,25.52,15.79,41.87C639.81,173.57,637.41,188.65,624,199.09Zm-25.95-73.32c-4.79,0-8.88,0-14-.14v63c5.07-.14,9.16-.14,14-.14,16.22,0,18.62-17.06,18.62-31.44S614.29,125.77,598.07,125.77Z" fill="#fff"/>
<path d="M676.6,79.72a36.59,36.59,0,0,1-6.19-.46V28.13l.53-.45h32.32a22.57,22.57,0,0,1,.46,4.6c0,4-2,5.67-6.42,5.67H682.42c0,2,.07,4,.07,5.89V48.6h16.17a22.8,22.8,0,0,1,.6,5,22.18,22.18,0,0,1-.6,4.91H682.49V79.26A33.29,33.29,0,0,1,676.6,79.72Z" fill="#fff"/>
<path d="M670.48,95.5c3.4-2.8,7.63-4.76,14.36-4.76s10.95,2,14.42,4.76c6.27,5.29,8.08,14.2,8.08,22.13s-1.81,16.92-8.08,22.21c-3.47,2.79-7.55,4.75-14.42,4.75s-11-2-14.36-4.75c-6.34-5.29-8.08-14.28-8.08-22.21S664.14,100.79,670.48,95.5Zm14.36,39.8c8.76,0,9.89-9.74,9.89-17.67S693.6,100,684.84,100,675,109.7,675,117.63,676.15,135.3,684.84,135.3Z" fill="#fff"/>
<path d="M695.18,185.83c2.87,1.06,4.69,3.7,5.82,6.95l2.27,6.42a11.87,11.87,0,0,0,3.77,5.59c-1.51,2-4.83,3.55-8,3.55-4.39,0-5.82-2.34-7.41-7l-2.72-7.93c-.9-2.57-2.34-4.68-6.42-4.68H679.4v18.88a40.29,40.29,0,0,1-12,0V156.45l.53-.53c6.49-.15,12.38-.3,18.12-.3,10.5,0,18.36,5,18.36,16.39A14.81,14.81,0,0,1,695.18,185.83Zm-15.78-6.34c2.34-.08,4.6-.16,5.59-.16,5.74,0,7.1-3.47,7.1-7.32s-1.36-7.25-7.1-7.25c-1.51,0-3.48,0-5.59-.08Z" fill="#fff"/>
<path d="M737.82,158.91c11,8.78,25.83,16.78,40,16.78,11.44,0,16-8.52,16-17,0-5.42-1.58-12.91-12.43-19.1l-23.27-12.91c-16.17-9.55-28.2-23-28.2-47.76,0-32.27,21.3-53.95,47.92-53.95,18.74,0,36.09,8,46.35,14.71-.6,11.88-4.54,23.75-10.65,31C803.49,64.43,788.5,58,778.05,58c-11.44,0-15.78,8.52-15.78,15.23s3,11.62,11.64,16.27l23.66,13.16c18.93,10.85,29.78,28.66,29.78,51.12C827.35,185,810,209,775.49,209c-16,0-35.3-7-49.9-19.1C726.38,178.27,731.71,165.88,737.82,158.91Z" fill="#fff"/>
<path d="M894.6,149.87H879v55.25a69.55,69.55,0,0,1-15.78,1.55c-3.74,0-10.65-.26-15.77-1.55v-175l1.38-1.8c17-.52,30.76-1,45.75-1,28,0,48.31,19.62,48.31,61.44C942.91,129.22,922.6,149.87,894.6,149.87ZM879,118.9c5.52-.26,10.85-.52,13-.52,15.57,0,18.73-17.3,18.73-29.69C910.77,76.56,907.61,59,892,59c-4.15,0-7.7,0-13-.26Z" fill="#fff"/>
<path d="M1054.14,186c-1.58,12.91-8.68,19.88-20.12,19.88H981.57c-11.24,0-18.15-9.29-18.15-24V30.61l1.38-1.81h85A101,101,0,0,1,1051,45.07a74.71,74.71,0,0,1-2.76,18.32H994.38c0,7,.2,11.88.2,18.59v18.07c5.13-.26,10.65-.26,13.41-.26h30.18a80.42,80.42,0,0,1,0,33.56H994.58V153c0,6.71-.2,11.62-.2,18.59v.26c4.54-.26,9.08-.52,14.6-.52h45.75A138.53,138.53,0,0,1,1054.14,186Z" fill="#fff"/>
<path d="M1167.14,186c-1.58,12.91-8.68,19.88-20.12,19.88h-52.45c-11.24,0-18.15-9.29-18.15-24V30.61l1.39-1.81h85A101,101,0,0,1,1164,45.07a74.71,74.71,0,0,1-2.76,18.32h-53.83c0,7,.19,11.88.19,18.59v18.07c5.13-.26,10.65-.26,13.41-.26h30.18a80.42,80.42,0,0,1,0,33.56h-43.59V153c0,6.71-.19,11.62-.19,18.59v.26c4.53-.26,9.07-.52,14.59-.52h45.75A138.53,138.53,0,0,1,1167.14,186Z" fill="#fff"/>
<path d="M1276.79,193.76c-9.08,9.29-25.25,12.91-36.09,12.91-17.16,0-32.54-.52-49.7-1l-1.38-1.8V30.09l1.38-1.8c17-.78,32.54-1,49.7-1,10.84,0,27,3.62,36.09,12.91,18.53,19.1,22.08,46.73,22.08,76.67C1298.87,147,1295.52,174.66,1276.79,193.76ZM1240.5,59.52c-6.7,0-12.42,0-19.52-.26v115.4c7.1-.26,12.82-.26,19.52-.26,22.68,0,26-31.24,26-57.57C1266.53,90.76,1263.18,59.52,1240.5,59.52Z" fill="#fff"/>
<path d="M1347,24.67c26.82,0,40.82,19.88,40.82,47.24,0,25.82-11,41.05-25.83,51.12l-11.83,8.26-2,19.62a28.21,28.21,0,0,1-11.24,2.06,32.5,32.5,0,0,1-11.84-2.06l-1.77-38.47,2.37-3.87,11-6.45c10.65-6.72,18.93-14.2,18.93-25.82,0-10.07-5.32-17-15.58-17-8.08,0-15.78,4.13-22.48,9.3-5.92-5.68-10.85-18.59-11.24-28.92C1317.41,31.13,1331.41,24.67,1347,24.67Z" fill="#fff"/>
<path d="M1351.33,174.14c1.58,3.36,2.37,10.58,2.37,15.49,0,4.65-.79,11.62-2.37,15-3.55,2.84-9.07,4.13-14.39,4.13s-10.85-1.29-14.79-4.13c-1.19-3.35-2-10.32-2-15,0-4.91.79-12.13,2-15.49a28,28,0,0,1,14.79-4.13C1342.26,170,1347.78,171.56,1351.33,174.14Z" fill="#fff"/>
<path d="M305,307.8,300.17,322a36.09,36.09,0,0,1-7.5.58,33.75,33.75,0,0,1-8.73-1.08l-.56-.78L308,254.87a91.68,91.68,0,0,1,10.41-.59,71.67,71.67,0,0,1,10.3.69l24.17,66c-2.46,1.17-6.94,1.86-10.3,1.86-5.7,0-8.5-1.77-10.74-8.54l-2.13-6.48c-1.45.1-3.24.1-4.36.1H309.46C308.12,307.9,306.44,307.9,305,307.8Zm4.14-12.28c1.46,0,3.25-.09,4.48-.09h8.17c1.12,0,2.68.09,4,.09l-1.9-6.08c-1.8-5.6-4.26-13.75-6.16-20.23h-.67c-1.12,5.5-3.69,13.35-5.37,18.75Z" fill="#fff"/>
<path d="M423.15,254.87v66.77a74,74,0,0,1-10.85.89,90.63,90.63,0,0,1-10.41-.59l-17.57-35.16c-2.57-5-4.81-10.11-6.38-13.84l-.33.1c.78,8.34,1.34,21.21,1.34,29.36v19.54a50.65,50.65,0,0,1-8.17.59,54.49,54.49,0,0,1-8.5-.59V255.17a70,70,0,0,1,10.63-.89,88.67,88.67,0,0,1,10.29.59l17.35,35.06c2.8,5.79,5.37,11.29,6.94,14.92l.44-.19c-.89-9.14-1.34-22.2-1.34-29v-12c0-7,3.14-9.52,10-9.52h5.82Z" fill="#fff"/>
<path d="M440.39,254.87a69,69,0,0,1,18,0v67.07a69,69,0,0,1-18,0Z" fill="#fff"/>
<path d="M479.21,255a86.37,86.37,0,0,1,12.09-.78,77.64,77.64,0,0,1,11.3.78L509.21,279c.56,2.35,3.24,12.86,4.14,17.77h.78c1-4.91,3.58-15.42,4.14-17.77L525,255a75.64,75.64,0,0,1,11.3-.78,88.36,88.36,0,0,1,12.08.78l5.94,66.77a46,46,0,0,1-9.18.79,50.34,50.34,0,0,1-7.72-.49l-1.79-27.3c-.34-7-.79-16.2-.9-22.68h-.67L523,312a77,77,0,0,1-9.29.59,77.93,77.93,0,0,1-9.17-.59l-11-40h-.78c0,6.48-.45,15.71-.9,22.68L490.18,322a51.87,51.87,0,0,1-7.83.49,44.92,44.92,0,0,1-9.07-.79Z" fill="#fff"/>
<path d="M583,307.8,578.14,322a36.09,36.09,0,0,1-7.5.58,33.69,33.69,0,0,1-8.73-1.08l-.56-.78L586,254.87a91.68,91.68,0,0,1,10.41-.59,71.67,71.67,0,0,1,10.3.69l24.17,66c-2.46,1.17-6.94,1.86-10.3,1.86-5.71,0-8.5-1.77-10.74-8.54l-2.13-6.48c-1.45.1-3.24.1-4.36.1H587.43C586.08,307.9,584.41,307.9,583,307.8Zm4.14-12.28c1.46,0,3.25-.09,4.48-.09h8.17c1.12,0,2.68.09,4,.09l-1.91-6.08c-1.79-5.6-4.25-13.75-6.15-20.23H595c-1.12,5.5-3.7,13.35-5.37,18.75Z" fill="#fff"/>
<path d="M644.94,267.83c-1.67,0-5.48.1-7.16.1H626.26a28.45,28.45,0,0,1-.68-6.48,29.32,29.32,0,0,1,.68-6.58h55.39a20.08,20.08,0,0,1,.9,6c0,5.21-2.91,7.07-9.4,7.07H669.9c-1.68,0-5.37-.1-7-.1h-.11c0,2.75.11,4.62.11,7.27v46.84a60.16,60.16,0,0,1-9,.59,59.46,59.46,0,0,1-9-.59Z" fill="#fff"/>
<path d="M742.19,314.67c-.89,4.91-4.92,7.56-11.41,7.56H701c-6.38,0-10.3-3.53-10.3-9.13V255.56l.79-.69h48.23a26.13,26.13,0,0,1,.67,6.19,19.91,19.91,0,0,1-1.57,7H708.28c0,2.65.11,4.52.11,7.07V282c2.91-.09,6.05-.09,7.61-.09h17.13a20.85,20.85,0,0,1,0,12.76H708.39v7.46c0,2.56-.11,4.42-.11,7.07v.1c2.58-.1,5.15-.2,8.28-.2h26A34.94,34.94,0,0,1,742.19,314.67Z" fill="#fff"/>
<path d="M772.74,255.76a31.94,31.94,0,0,1,9.4-1.77c6.38,0,8.73,2,10,8.64L796.8,288c1.23,6.48,2.57,14.83,3.13,19.54.11,1.28.34,1.28,1,1.28l9.29-52.63a74.9,74.9,0,0,1,11.41-.69,74,74,0,0,1,11.53.69l8.5,51.35c.23,1.28.56,1.28,1.23,1.28.56-5.3,2-14.34,3.36-20.92l6.27-33a46.06,46.06,0,0,1,8.06-.59,34.29,34.29,0,0,1,8.5,1.08l.78.89L855.1,321.84c-4.14.39-10.52.69-15.22.69-5.37,0-9.84-.79-11-7.07l-3.81-21.31c-1.34-7.66-2.57-16.59-3.24-22.78h-.79c-.78,6.19-2.24,15-3.69,22.78l-5,27.69c-4.36.39-10.18.69-15,.69-5.82,0-10-.79-11.42-7.07Z" fill="#fff"/>
<path d="M880.84,254.87a69.09,69.09,0,0,1,18,0v67.07a69.09,69.09,0,0,1-18,0Z" fill="#fff"/>
<path d="M927.28,267.83c-1.68,0-5.49.1-7.16.1H908.59a28.38,28.38,0,0,1-.67-6.48,29.26,29.26,0,0,1,.67-6.58H964a20.08,20.08,0,0,1,.9,6c0,5.21-2.91,7.07-9.4,7.07h-3.25c-1.68,0-5.37-.1-7.05-.1h-.11c0,2.75.11,4.62.11,7.27v46.84a60.16,60.16,0,0,1-8.95.59,59.26,59.26,0,0,1-9-.59Z" fill="#fff"/>
<path d="M1015,301.12c0-2.75.11-4.61.11-7.27-1.56,0-4,.1-5.59.1h-13c-1.57,0-3.92-.1-5.6-.1,0,2.66.11,4.52.11,7.27v20.82a58.37,58.37,0,0,1-8.95.59,61.08,61.08,0,0,1-9-.59V254.87a61.08,61.08,0,0,1,9-.59,58.37,58.37,0,0,1,8.95.59v18.76c0,2.75-.11,4.61-.11,7.26,1.68,0,4-.09,5.6-.09h13c1.56,0,4,.09,5.59.09,0-2.65-.11-4.51-.11-7.26V254.87a68.25,68.25,0,0,1,17.91,0v67.07a56.59,56.59,0,0,1-8.73.59,62.2,62.2,0,0,1-9.18-.59Z" fill="#fff"/>
<path d="M1121.65,283.74c9-.1,11.87,4.12,11.87,9.82v25.82a111.69,111.69,0,0,1-29.66,4c-22.83,0-33.8-13.35-33.8-34.56,0-23.86,17.57-35.45,35.14-35.45a58,58,0,0,1,28.09,7.07c-.33,4.42-4.36,9.13-7.94,11.19a40,40,0,0,0-18.8-5.3c-11.31,0-18.24,6.87-18.24,22.59,0,15.31,6.71,22.09,18.68,22.09a58.54,58.54,0,0,0,9.74-.79v-6.58c0-2.06,0-4.42.22-6.77h-5.59c-5.82,0-8.51-1.67-8.51-6.58a21,21,0,0,1,1.23-6.48Z" fill="#fff"/>
<path d="M1147.84,304.36c6.26,3.34,14.66,6.38,22.71,6.38,6.5,0,9.07-3.24,9.07-6.48,0-2.06-.9-4.91-7-7.26l-13.21-4.91c-9.17-3.64-16-8.74-16-18.17,0-12.27,12.09-20.52,27.19-20.52a68.45,68.45,0,0,1,26.3,5.6,16.91,16.91,0,0,1-6,11.78c-5.71-2.36-14.21-4.81-20.14-4.81-6.49,0-9,3.24-9,5.79s1.68,4.42,6.61,6.19l13.43,5c10.74,4.12,16.89,10.89,16.89,19.44,0,11.88-9.84,21-29.43,21a61.86,61.86,0,0,1-28.31-7.27C1141.35,311.73,1144.37,307,1147.84,304.36Z" fill="#fff"/>
<path d="M1224.16,307.8,1219.34,322a36,36,0,0,1-7.49.58,33.69,33.69,0,0,1-8.73-1.08l-.56-.78,24.62-65.89a91.54,91.54,0,0,1,10.41-.59,71.53,71.53,0,0,1,10.29.69l24.17,66c-2.46,1.17-6.93,1.86-10.29,1.86-5.71,0-8.51-1.77-10.75-8.54l-2.12-6.48c-1.46.1-3.25.1-4.37.1h-15.89C1227.29,307.9,1225.61,307.9,1224.16,307.8Zm4.14-12.28c1.45,0,3.24-.09,4.47-.09h8.17c1.12,0,2.69.09,4,.09l-1.9-6.08c-1.79-5.6-4.25-13.75-6.15-20.23h-.68c-1.12,5.5-3.69,13.35-5.37,18.75Z" fill="#fff"/>
<path d="M1308.2,300.92h-8.84v21a58.42,58.42,0,0,1-9,.59,61.16,61.16,0,0,1-9-.59V255.36l.78-.68c9.63-.2,17.46-.4,26-.4,15.89,0,27.41,7.47,27.41,23.37C1335.61,293.07,1324.09,300.92,1308.2,300.92Zm-8.84-11.78c3.13-.1,6.15-.19,7.38-.19,8.84,0,10.63-6.58,10.63-11.3s-1.79-11.29-10.63-11.29c-2.35,0-4.36,0-7.38-.1Z" fill="#fff"/>
<path d="M1346.58,258.21c3.92-2.45,10.74-4.22,18.58-4.22l1,1.18-3.91,46.25a27.08,27.08,0,0,1-6.38.68,30.65,30.65,0,0,1-6.83-.68Z" fill="#fff"/>
<path d="M1363.81,310c.9,1.18,1.35,3.93,1.35,5.79s-.45,4.52-1.35,5.7a18.54,18.54,0,0,1-8.17,1.67,20.32,20.32,0,0,1-8.39-1.67,15.29,15.29,0,0,1,0-11.49,20.32,20.32,0,0,1,8.39-1.67A18.54,18.54,0,0,1,1363.81,310Z" fill="#fff"/>
</g>
<path id="carBody" d="M1457.78,384.42c-225.77,6.32-237-37.82-411.83-49.54a9.3,9.3,0,0,1-8.18-6.28c-7-20.4-3.72-32.35-24.77-35.1-55-7.18-52-3-56,14,0,0-2,10-2,10-21.86,12.91-25.3,51.6-56.38,75.53a9.93,9.93,0,0,1-1.3.84c-53.21,29-114,17.87-192.68,16.42a11.75,11.75,0,0,1-9.7-18.09c7.24-11.32,15.79-24.1,22.74-32.89a32,32,0,0,1,18.39-11.43c8.09-1.72,12.24-3.34,14.93-6.38.68-.77,1-3,1-4s-.73-1.51-1-2c-1-1.83-2.63-4.24-2.45-8,.35-7.46.55-17.56-.55-22-.81-3.3-5-9.46-8-11-4-2-13.68-1.25-18,0-27.76,8-103.67,45.89-137,62.8a14.34,14.34,0,0,0-4.51,22l29.3,35a18,18,0,0,0,13.26,6.46l22.92.74h31c33.89,0,139.3,5,200.07,2.17a11.82,11.82,0,0,1,1.18-.13c66.75,3,251.48-43.45,516.75-23,21.75,1.67,20.67,7.12,63.63-11.95C1470,383.5,1460.17,384.35,1457.78,384.42Z" fill="transparent" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
<g id="wheels" opacity="0.75">
<g id="backTire">
<circle class="outerTire" cx="1258" cy="594.5" r="107.5" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="35"/>
<circle class="innerTire" cx="1258" cy="594.5" r="79" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="13"/>
<rect x="1254.5" y="519" width="7" height="58"/>
<rect x="1220" y="532.5" width="7" height="58" transform="translate(-50.84 995.42) rotate(-43.46)"/>
<rect x="1204" y="549.5" width="7" height="58" transform="translate(312.8 1574.61) rotate(-73.67)"/>
<rect x="1210" y="584.5" width="7" height="58" transform="translate(1288.94 1971.17) rotate(-120)"/>
<rect x="1226" y="604.5" width="7" height="58" transform="translate(1747.83 1915.81) rotate(-139.27)"/>
<rect x="1260" y="613.5" width="7" height="58" transform="translate(2579.53 1169.09) rotate(174.85)"/>
<rect x="1281" y="605.5" width="7" height="58" transform="translate(2689.65 355.04) rotate(142.46)"/>
<rect x="1304" y="572.5" width="7" height="58" transform="translate(2080.41 -612.57) rotate(97.78)"/>
<rect x="1303" y="551.5" width="7" height="58" transform="translate(1434.33 -843.43) rotate(71.17)"/>
<rect x="1279" y="519.5" width="7" height="58" transform="translate(534.16 -628.63) rotate(34.4)"/>
<circle class="hub" cx="1258" cy="594.5" r="27"/>
</g>
<g id="frontTire">
<circle class="outerTire" cx="362" cy="594.5" r="107.5" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="35"/>
<circle class="innerTire" cx="362" cy="594.5" r="79" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="13"/>
<rect x="358.5" y="519" width="7" height="58"/>
<rect x="324" y="532.5" width="7" height="58" transform="translate(-296.43 379.16) rotate(-43.46)"/>
<rect x="308" y="549.5" width="7" height="58" transform="translate(-331.25 714.76) rotate(-73.67)"/>
<rect x="314" y="584.5" width="7" height="58" transform="matrix(-0.5, -0.87, 0.87, -0.5, -55.06, 1195.21)"/>
<rect x="330" y="604.5" width="7" height="58" transform="translate(172.86 1331.17) rotate(-139.27)"/>
<rect x="364" y="613.5" width="7" height="58" transform="translate(791.14 1249.45) rotate(174.85)"/>
<rect x="385" y="605.5" width="7" height="58" transform="translate(1083.15 900.94) rotate(142.46)"/>
<rect x="408" y="572.5" width="7" height="58" transform="translate(1063.16 275.19) rotate(97.78)"/>
<rect x="407" y="551.5" width="7" height="58" transform="translate(827.47 4.63) rotate(71.17)"/>
<rect x="383" y="519.5" width="7" height="58" transform="translate(377.47 -122.43) rotate(34.4)"/>
<circle class="hub" cx="362" cy="594.5" r="27"/>
</g>
</g>
<circle id="backCircle" class="buttonCircle" cx="800" cy="420" r="40" opacity="0.7"/>
<circle id="frontCircle" class="buttonCircle" cx="800" cy="420" r="40" opacity="0.7"/>
<g id="start">
<rect id="button" x="600" y="380" width="400" height="80" rx="40" ry="40" opacity="0.9"/>
<g class="buttonText">
<text transform="translate(800 410)" text-anchor="middle" font-size="22" fill="#fff">FASTEN YOUR SEATBELT AND</text>
<text transform="translate(800 448)" text-anchor="middle" font-size="36" fill="#fff">CLICK HERE</text>
</g>
</g>
<g id="speedLines" opacity="0.25" stroke-width="3">
<line x1="400" y1="100" x2="1500" y2="100" fill="none" stroke="#fff" stroke-miterlimit="10"/>
<line x1="0" y1="183" x2="1000" y2="183" fill="none" stroke="#fff" stroke-miterlimit="10"/>
<line x1="200" y1="243" x2="1400" y2="243" fill="none" stroke="#fff" stroke-miterlimit="10"/>
<line x1="500" y1="725" x2="1600" y2="725" fill="none" stroke="#ddd" stroke-miterlimit="10"/>
<line x1="0" y1="750" x2="1100" y2="750" fill="none" stroke="#ddd" stroke-miterlimit="10"/>
<line x1="200" y1="790" x2="1400" y2="790" fill="none" stroke="#ddd" stroke-miterlimit="10"/>
</g>
</svg>
body {
padding: 0;
margin: 0;
overflow: hidden;
background: #42a6e0;
}
#demo {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
opacity: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
font-family: "Roboto", sans-serif;
font-weight: 700;
}
#start {
cursor: pointer;
}
console.clear();
gsap.set("#demo", {autoAlpha:1, xPercent:-50, yPercent:-50});
gsap.set("#endPaths, .buttonCircle", {autoAlpha:0});
gsap.set("#speedLines line, #carBody", {drawSVG:0});
gsap.set("#underline", {drawSVG:"0% 74%"});
const master = gsap.timeline({paused:true, onComplete:letsMotor});
const morph = gsap.timeline();
const drive = gsap.timeline({defaults:{duration: 1, ease:"none"}, repeat:-1, paused:true});
const speed = gsap.timeline({paused:true});
const startPaths = gsap.utils.toArray("#startPaths path");
const endPaths = gsap.utils.toArray("#endPaths path");
const speedLines = gsap.utils.toArray("#speedLines line");
const delayArray = [0.1, 0.4, 0.2, 0, 0.3, 0.2];
const action = document.querySelector("#start");
startPaths.forEach((path, i) => {
let tween = gsap.to(startPaths[i], {duration: 0.4, morphSVG:endPaths[i], ease:"back.inOut(1)"});
morph.add(tween, i*0.07);
});
speedLines.forEach((line, i) => {
let tl = gsap.timeline({defaults:{ease:"none"},repeat:-1, delay:delayArray[i]});
tl.to(line, {duration: 0.2, drawSVG:"0% 10%"});
tl.to(line, {duration: 0.6, drawSVG:"90% 100%"});
tl.to(line, {duration: 0.2, drawSVG:"100% 100%"});
speed.add(tl, 0);
});
// infinite rotating wheels timeline
drive.to("#frontTire", {rotation:-360, svgOrigin:"362 594.5"});
drive.to("#backTire", {rotation:-360, svgOrigin:"1258 594.5"}, 0);
// morph the button and move the pieces to the wheel positions
function removeButton() {
let tl = gsap.timeline();
tl.set(".buttonText", {autoAlpha:0, immediateRender:false});
tl.to("#button", {duration: 0.4, attr:{width:600, x:500, height:60, y:390}, autoAlpha:1, ease:"power3"});
tl.to("#button", {duration: 0.25, attr:{width:80, x:760, height:80, y:380}, ease:"power2.inOut"});
tl.set("#button", {autoAlpha:0});
tl.set(".buttonCircle", {autoAlpha:1});
tl.to(".buttonCircle", {duration: 0.4, attr:{cy:594.5}, opacity:0.75, ease:"power2.in"});
tl.add("moveCircles");
tl.to("#backCircle", {duration: 0.6, attr:{cx:1258}, ease:"power3"}, "moveCircles");
tl.to("#frontCircle", {duration: 0.6, attr:{cx:362}, ease:"power3"}, "moveCircles");
tl.to(".buttonCircle", {duration: 0.6, attr:{r:0}, ease:"back.in(5)"});
return tl;
}
// animate the tires into view
function drawTires() {
let tl = gsap.timeline();
tl.from(".innerTire", {duration: 0.4, attr:{r:0}, ease:"back.out(2)"});
tl.from(".outerTire", {duration: 0.5, attr:{r:0}, ease:"back.out(4)"},"-=0.15");
tl.from(".hub", {duration: 0.4, attr:{r:0}, ease:"back.out(5)"}, "-=0.15" );
tl.from("#wheels rect", {duration: 0.35, attr:{height:0}, ease:"power4.inOut"}, "-=0.25");
return tl;
}
// line between initial text blocks draws the car top outline
function drawCar() {
let tl = gsap.timeline();
tl.to("#underline", {duration: 0.75, drawSVG:"74% 100%", ease:"power4.in"});
tl.add("lineMeetup");
tl.to("#underline", {duration: 0.32, drawSVG:"100% 100%", ease:"none"}, "lineMeetup");
tl.to("#carBody", {duration: 1.5, drawSVG:true, ease:"power2"}, "lineMeetup");
tl.to("#carBody", {duration: 0.4, attr:{fill:"white"}, ease:"none"});
tl.to("#road", {duration: 0.4, attr:{x:0, width:1600, ease:"power3"}}, "-=0.25" );
return tl;
}
// fire up the rotating tires and speed lines timelines
// timeScale is animated from 0 to 4 to simulate acceleration
function letsMotor() {
speed.play().timeScale(0);
drive.play().timeScale(0);
gsap.from("#speedLines", 5, {opacity:0, ease:"none"});
gsap.to([speed, drive], 5, {timeScale:4, ease:"none"});
}
//create master timeline
master.add( removeButton() );
master.add( drawTires() );
master.add( morph );
master.add( drawCar(), "-=0.2" );
// click to make it go vroom vroom
function makeItHappen() {
master.play();
}
action.addEventListener("click", makeItHappen);
Also see: Tab Triggers