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="hero-animation" viewBox="0 0 650 265" version="1.1" xmlns="http://www.w3.org/2000/svg" style="justify-content: center;">
<g id="Website" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-32" transform="translate(0.000000, 3.000000)">
<path
d="M126.007899,38.7650154 C126.007899,34.7383476 129.263975,31.4816286 133.298472,31.4816286 L386.871877,31.4816286 C390.898902,31.4816286 394.162451,34.7405 394.162451,38.7650154 L394.162451,212.307477 C394.162451,216.334145 390.906375,219.590864 386.871877,219.590864 L133.298472,219.590864 C129.271447,219.590864 126.007899,216.331993 126.007899,212.307477 L126.007899,38.7650154 Z"
id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_0"></path>
<path
d="M142.409667,50.7365341 C142.409667,49.0123794 143.813338,47.612711 145.535934,47.612711 L374.37407,47.612711 C376.102828,47.612711 377.500337,49.004393 377.500337,50.7365341 L377.500337,180.042016 C377.500337,181.766171 376.096666,183.165839 374.37407,183.165839 L145.535934,183.165839 C143.807176,183.165839 142.409667,181.774157 142.409667,180.042016 L142.409667,50.7365341 Z"
id="Case" stroke="#BBBEC3" stroke-width="2.08142999" fill="#fff" class="zrpfIRpo_1"></path>
<path d="M240.989547,219.590864 L279.441148,219.590864 L282.037136,253.153923 L238.39356,253.153923 L240.989547,219.590864 Z" id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2"
class="zrpfIRpo_2">
</path>
<path
d="M222.334407,253.411496 L222.334407,256.926514 C222.334407,259.006825 224.024461,260.699106 226.104395,260.699106 L294.3263,260.699106 C296.402444,260.699106 298.096288,259.006629 298.096288,256.926514 L298.096288,253.411496 C298.096288,253.265769 297.983625,253.153923 297.834738,253.153923 L222.595957,253.153923 C222.450148,253.153923 222.334407,253.269384 222.334407,253.411496 Z"
id="Keyboard" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" transform="translate(260.215348, 256.926514) scale(1, -1) translate(-260.215348, -256.926514) " class="zrpfIRpo_3"></path>
<path id="Oval-6" stroke="#F8DC88" stroke-width="2.08142999" d="M255.39895587,202.809335A4.81639213,4.81330685 0,1,1 265.03174013,202.809335A4.81639213,4.81330685 0,1,1 255.39895587,202.809335"
class="zrpfIRpo_4"></path>
<path id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" width="51.5470788" height="100.949355"
d="M 107.275074,159.749752 L 146.8221528,159.749752 A 6,6,0,0,1,152.8221528,165.749752 L 152.8221528,254.69910700000003 A 6,6,0,0,1,146.8221528,260.699107 L 107.275074,260.699107 A 6,6,0,0,1,101.275074,254.69910700000003 L 101.275074,165.749752 A 6,6,0,0,1,107.275074,159.749752"
class="zrpfIRpo_5"></path>
<path d="M101.275074,170.937438 L152.822153,170.937438 L152.822153,245.686792 L101.275074,245.686792 L101.275074,170.937438 Z" id="Case" stroke="#949599" stroke-width="2.08142999" fill="#fff"
class="zrpfIRpo_6">
</path>
<path id="Rectangle-11" fill="#BBBEC3" width="24.7328244" height="2.08142999"
d="M 115.812374,164.17279 L 138.5451984,164.17279 A 1,1,0,0,1,139.5451984,165.17279 L 139.5451984,165.25421999 A 1,1,0,0,1,138.5451984,166.25421999 L 115.812374,166.25421999 A 1,1,0,0,1,114.812374,165.25421999 L 114.812374,165.17279 A 1,1,0,0,1,115.812374,164.17279"
class="zrpfIRpo_7"></path>
<path id="Rectangle-11" fill="#BBBEC3" width="5.93587786" height="5.93207547"
d="M 126.184813,250.031778 L 128.12069086,250.031778 A 2,2,0,0,1,130.12069086,252.031778 L 130.12069086,253.96385347 A 2,2,0,0,1,128.12069086,255.96385347 L 126.184813,255.96385347 A 2,2,0,0,1,124.184813,253.96385347 L 124.184813,252.031778 A 2,2,0,0,1,126.184813,250.031778"
class="zrpfIRpo_8"></path>
<path id="Oval-6" stroke="#BBBEC3" stroke-width="2.08142999" fill="#F7F2F2" d="M111.9485742,208.142999A3.9051828,3.90268123 0,1,1 119.75893980000001,208.142999A3.9051828,3.90268123 0,1,1 111.9485742,208.142999"
class="zrpfIRpo_9"></path>
<path id="Rectangle-11" fill="#BBBEC3" width="18.2241864" height="2.08142999"
d="M 125.96585,201.378352 L 142.1900364,201.378352 A 1,1,0,0,1,143.1900364,202.378352 L 143.1900364,202.45978199 A 1,1,0,0,1,142.1900364,203.45978199 L 125.96585,203.45978199 A 1,1,0,0,1,124.96585,202.45978199 L 124.96585,202.378352 A 1,1,0,0,1,125.96585,201.378352"
class="zrpfIRpo_10"></path>
<path id="Rectangle-11" fill="#BBBEC3" width="13.017276" height="2.08142999"
d="M 125.96585,207.102284 L 136.983126,207.102284 A 1,1,0,0,1,137.983126,208.102284 L 137.983126,208.18371399 A 1,1,0,0,1,136.983126,209.18371399 L 125.96585,209.18371399 A 1,1,0,0,1,124.96585,208.18371399 L 124.96585,208.102284 A 1,1,0,0,1,125.96585,207.102284"
class="zrpfIRpo_11"></path>
<path id="Rectangle-11" fill="#BBBEC3" width="7.81036561" height="2.08142999"
d="M 125.96585,212.826216 L 131.77621561,212.826216 A 1,1,0,0,1,132.77621561,213.826216 L 132.77621561,213.90764599 A 1,1,0,0,1,131.77621561,214.90764599 L 125.96585,214.90764599 A 1,1,0,0,1,124.96585,213.90764599 L 124.96585,213.826216 A 1,1,0,0,1,125.96585,212.826216"
class="zrpfIRpo_12"></path>
<path id="Oval-7" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" d="M34.8856326,168.725919A39.9637045,39.9374379 0,1,1 114.81304159999999,168.725919A39.9637045,39.9374379 0,1,1 34.8856326,168.725919"
class="zrpfIRpo_13"></path>
<path id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" width="192.654351" height="129.308838"
d="M 325.704966,120.462761 L 506.35931700000003,120.462761 A 6,6,0,0,1,512.359317,126.462761 L 512.359317,243.771599 A 6,6,0,0,1,506.35931700000003,249.771599 L 325.704966,249.771599 A 6,6,0,0,1,319.704966,243.771599 L 319.704966,126.462761 A 6,6,0,0,1,325.704966,120.462761"
class="zrpfIRpo_14"></path>
<path
d="M306.42601,250.02579 L306.42601,255.235353 C306.42601,258.248347 308.874337,260.699106 311.88835,260.699106 L520.175933,260.699106 C523.187441,260.699106 525.638273,258.249893 525.638273,255.235353 L525.638273,250.02579 C525.638273,249.884133 525.525092,249.771599 525.379413,249.771599 L306.68487,249.771599 C306.538643,249.771599 306.42601,249.8841 306.42601,250.02579 Z"
id="Keyboard" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_15"></path>
<path
d="M430.428848,249.888735 L401.270407,249.88823 C402.433781,252.961493 405.402425,255.091813 408.808279,255.091813 L422.891133,255.091813 C426.2974,255.091813 429.265465,252.961765 430.428848,249.888735 Z"
id="Notch" stroke="#BBBEC3" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_16"></path>
<path id="Screen" stroke="" stroke-width="2.08142999" fill="#fff" width="175.319716" height="105.073079"
d="M 330.295034,132.691162 L 501.61474999999996,132.691162 A 2,2,0,0,1,503.61474999999996,134.691162 L 503.61474999999996,235.764241 A 2,2,0,0,1,501.61474999999996,237.764241 L 330.295034,237.764241 A 2,2,0,0,1,328.295034,235.764241 L 328.295034,134.691162 A 2,2,0,0,1,330.295034,132.691162"
class="zrpfIRpo_17"></path>
<path id="Oval-3" fill="#293347" d="M253.0558454,49.9543198A1.3017276,1.30089374 0,1,1 255.6593006,49.9543198A1.3017276,1.30089374 0,1,1 253.0558454,49.9543198" class="zrpfIRpo_18"></path>
<path
d="M179.899422,11.9682224 L300.177718,11.9682224 L300.177718,127.227794 C300.177718,131.24909 296.908511,134.512413 292.886465,134.512413 L187.190674,134.512413 C183.165634,134.512413 179.899422,131.247907 179.899422,127.227794 L179.899422,11.9682224 Z"
id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_19"></path>
<path
d="M179.899422,6.23775036 C179.899422,2.21962044 183.168858,-1.040715 187.190674,-1.040715 L292.886465,-1.040715 C296.913475,-1.040715 300.177718,2.21613142 300.177718,6.23775036 L300.177718,14.0496524 L179.899422,14.0496524 L179.899422,6.23775036 Z"
id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_20"></path>
<path id="Oval-5" fill="#f71010" d="M188.75050232,6.50446872A2.34310968,2.34160874 0,1,1 193.43672168,6.50446872A2.34310968,2.34160874 0,1,1 188.75050232,6.50446872" class="zrpfIRpo_21"></path>
<path id="Oval-5" fill="#dee3e2" d="M196.56086832,6.50446872A2.34310968,2.34160874 0,1,1 201.24708768,6.50446872A2.34310968,2.34160874 0,1,1 196.56086832,6.50446872" class="zrpfIRpo_22"></path>
<path id="Oval-5" fill="#33f710" d="M204.37123332000002,6.50446872A2.34310968,2.34160874 0,1,1 209.05745268,6.50446872A2.34310968,2.34160874 0,1,1 204.37123332000002,6.50446872" class="zrpfIRpo_23"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,87.9404171 L 198.16432337,87.9404171 A 1,1,0,0,1,199.16432337,88.9404171 L 199.16432337,89.02184709000001 A 1,1,0,0,1,198.16432337,90.02184709000001 L 195.478104,90.02184709000001 A 1,1,0,0,1,194.478104,89.02184709000001 L 194.478104,88.9404171 A 1,1,0,0,1,195.478104,87.9404171"
class="zrpfIRpo_24"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,35.9046673 L 198.16432337,35.9046673 A 1,1,0,0,1,199.16432337,36.9046673 L 199.16432337,36.986097290000004 A 1,1,0,0,1,198.16432337,37.986097290000004 L 195.478104,37.986097290000004 A 1,1,0,0,1,194.478104,36.986097290000004 L 194.478104,36.9046673 A 1,1,0,0,1,195.478104,35.9046673"
class="zrpfIRpo_25"></path>
<path
d="M203.329184,35.9046673 L210.359847,35.9046673 C210.934619,35.9046673 211.400562,36.3706113 211.400562,36.9453823 C211.400562,37.5201533 210.934619,37.9860973 210.359847,37.9860973 L203.329184,37.9860973 C202.754413,37.9860973 202.288469,37.5201533 202.288469,36.9453823 C202.288469,36.3706113 202.754413,35.9046673 203.329184,35.9046673 Z"
id="Rectangle-11" fill="#d1cebd" class="zrpfIRpo_26"></path>
<path
d="M215.044733,35.9046673 L222.075396,35.9046673 C222.650167,35.9046673 223.116111,36.3706113 223.116111,36.9453823 C223.116111,37.5201533 222.650167,37.9860973 222.075396,37.9860973 L215.044733,37.9860973 C214.469962,37.9860973 214.004018,37.5201533 214.004018,36.9453823 C214.004018,36.3706113 214.469962,35.9046673 215.044733,35.9046673 Z"
id="Rectangle-11" fill="#d1cebd" class="zrpfIRpo_27"></path>
<path
d="M226.760281,35.9046673 L239.778891,35.9046673 C240.353662,35.9046673 240.819606,36.3706113 240.819606,36.9453823 C240.819606,37.5201533 240.353662,37.9860973 239.778891,37.9860973 L226.760281,37.9860973 C226.18551,37.9860973 225.719566,37.5201533 225.719566,36.9453823 C225.719566,36.3706113 226.18551,35.9046673 226.760281,35.9046673 Z"
id="Rectangle-11" fill="#d1cebd" class="zrpfIRpo_28"></path>
<path
d="M244.463776,35.9046673 L263.730679,35.9046673 C264.30545,35.9046673 264.771394,36.3706113 264.771394,36.9453823 C264.771394,37.5201533 264.30545,37.9860973 263.730679,37.9860973 L244.463776,37.9860973 C243.889005,37.9860973 243.423061,37.5201533 243.423061,36.9453823 C243.423061,36.3706113 243.889005,35.9046673 244.463776,35.9046673 Z"
id="Rectangle-11" fill="#d1cebd" class="zrpfIRpo_29"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,46.3118173 L 198.16432337,46.3118173 A 1,1,0,0,1,199.16432337,47.3118173 L 199.16432337,47.393247290000005 A 1,1,0,0,1,198.16432337,48.393247290000005 L 195.478104,48.393247290000005 A 1,1,0,0,1,194.478104,47.393247290000005 L 194.478104,47.3118173 A 1,1,0,0,1,195.478104,46.3118173"
class="zrpfIRpo_30"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,56.7189672 L 198.16432337,56.7189672 A 1,1,0,0,1,199.16432337,57.7189672 L 199.16432337,57.80039719 A 1,1,0,0,1,198.16432337,58.80039719 L 195.478104,58.80039719 A 1,1,0,0,1,194.478104,57.80039719 L 194.478104,57.7189672 A 1,1,0,0,1,195.478104,56.7189672"
class="zrpfIRpo_31"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,67.1261172 L 198.16432337,67.1261172 A 1,1,0,0,1,199.16432337,68.1261172 L 199.16432337,68.20754719 A 1,1,0,0,1,198.16432337,69.20754719 L 195.478104,69.20754719 A 1,1,0,0,1,194.478104,68.20754719 L 194.478104,68.1261172 A 1,1,0,0,1,195.478104,67.1261172"
class="zrpfIRpo_32"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,77.5332671 L 198.16432337,77.5332671 A 1,1,0,0,1,199.16432337,78.5332671 L 199.16432337,78.61469709 A 1,1,0,0,1,198.16432337,79.61469709 L 195.478104,79.61469709 A 1,1,0,0,1,194.478104,78.61469709 L 194.478104,78.5332671 A 1,1,0,0,1,195.478104,77.5332671"
class="zrpfIRpo_33"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,98.347567 L 198.16432337,98.347567 A 1,1,0,0,1,199.16432337,99.347567 L 199.16432337,99.42899699 A 1,1,0,0,1,198.16432337,100.42899699 L 195.478104,100.42899699 A 1,1,0,0,1,194.478104,99.42899699 L 194.478104,99.347567 A 1,1,0,0,1,195.478104,98.347567"
class="zrpfIRpo_34"></path>
<path id="Rectangle-11" fill="#d1cebd" width="4.68621937" height="2.08142999"
d="M 195.478104,108.754717 L 198.16432337,108.754717 A 1,1,0,0,1,199.16432337,109.754717 L 199.16432337,109.83614699 A 1,1,0,0,1,198.16432337,110.83614699 L 195.478104,110.83614699 A 1,1,0,0,1,194.478104,109.83614699 L 194.478104,109.754717 A 1,1,0,0,1,195.478104,108.754717"
class="zrpfIRpo_35"></path>
<path id="Rectangle-11" fill="#d1cebd" width="18.2241864" height="2.08142999"
d="M 203.288469,46.3118173 L 219.5126554,46.3118173 A 1,1,0,0,1,220.5126554,47.3118173 L 220.5126554,47.393247290000005 A 1,1,0,0,1,219.5126554,48.393247290000005 L 203.288469,48.393247290000005 A 1,1,0,0,1,202.288469,47.393247290000005 L 202.288469,47.3118173 A 1,1,0,0,1,203.288469,46.3118173"
class="zrpfIRpo_36"></path>
<path id="Rectangle-11" fill="#d1cebd" width="31.2414624" height="2.08142999"
d="M 224.116111,46.3118173 L 253.35757339999998,46.3118173 A 1,1,0,0,1,254.35757339999998,47.3118173 L 254.35757339999998,47.393247290000005 A 1,1,0,0,1,253.35757339999998,48.393247290000005 L 224.116111,48.393247290000005 A 1,1,0,0,1,223.116111,47.393247290000005 L 223.116111,47.3118173 A 1,1,0,0,1,224.116111,46.3118173"
class="zrpfIRpo_37"></path>
<path id="Rectangle-11" fill="#d1cebd" width="13.017276" height="2.08142999"
d="M 257.961029,46.3118173 L 268.978305,46.3118173 A 1,1,0,0,1,269.978305,47.3118173 L 269.978305,47.393247290000005 A 1,1,0,0,1,268.978305,48.393247290000005 L 257.961029,48.393247290000005 A 1,1,0,0,1,256.961029,47.393247290000005 L 256.961029,47.3118173 A 1,1,0,0,1,257.961029,46.3118173"
class="zrpfIRpo_38"></path>
<path id="Rectangle-11" fill="#d1cebd" width="13.017276" height="2.08142999"
d="M 203.288469,56.7189672 L 214.305745,56.7189672 A 1,1,0,0,1,215.305745,57.7189672 L 215.305745,57.80039719 A 1,1,0,0,1,214.305745,58.80039719 L 203.288469,58.80039719 A 1,1,0,0,1,202.288469,57.80039719 L 202.288469,57.7189672 A 1,1,0,0,1,203.288469,56.7189672"
class="zrpfIRpo_39"></path>
<path id="Rectangle-11" fill="#d1cebd" width="13.017276" height="2.08142999"
d="M 218.9092,56.7189672 L 229.926476,56.7189672 A 1,1,0,0,1,230.926476,57.7189672 L 230.926476,57.80039719 A 1,1,0,0,1,229.926476,58.80039719 L 218.9092,58.80039719 A 1,1,0,0,1,217.9092,57.80039719 L 217.9092,57.7189672 A 1,1,0,0,1,218.9092,56.7189672"
class="zrpfIRpo_40"></path>
<path id="Rectangle-11" fill="#d1cebd" width="7.81036561" height="2.08142999"
d="M 234.529932,56.7189672 L 240.34029761,56.7189672 A 1,1,0,0,1,241.34029761,57.7189672 L 241.34029761,57.80039719 A 1,1,0,0,1,240.34029761,58.80039719 L 234.529932,58.80039719 A 1,1,0,0,1,233.529932,57.80039719 L 233.529932,57.7189672 A 1,1,0,0,1,234.529932,56.7189672"
class="zrpfIRpo_41"></path>
<path id="Rectangle-11" fill="#d1cebd" width="26.034552" height="2.08142999"
d="M 203.288469,67.1261172 L 227.32302099999998,67.1261172 A 1,1,0,0,1,228.32302099999998,68.1261172 L 228.32302099999998,68.20754719 A 1,1,0,0,1,227.32302099999998,69.20754719 L 203.288469,69.20754719 A 1,1,0,0,1,202.288469,68.20754719 L 202.288469,68.1261172 A 1,1,0,0,1,203.288469,67.1261172"
class="zrpfIRpo_42"></path>
<path id="Rectangle-11" fill="#d1cebd" width="18.2241864" height="2.08142999"
d="M 231.926476,67.1261172 L 248.15066240000002,67.1261172 A 1,1,0,0,1,249.15066240000002,68.1261172 L 249.15066240000002,68.20754719 A 1,1,0,0,1,248.15066240000002,69.20754719 L 231.926476,69.20754719 A 1,1,0,0,1,230.926476,68.20754719 L 230.926476,68.1261172 A 1,1,0,0,1,231.926476,67.1261172"
class="zrpfIRpo_43"></path>
<path id="Rectangle-11" fill="#d1cebd" width="26.034552" height="2.08142999"
d="M 203.288469,77.5332671 L 227.32302099999998,77.5332671 A 1,1,0,0,1,228.32302099999998,78.5332671 L 228.32302099999998,78.61469709 A 1,1,0,0,1,227.32302099999998,79.61469709 L 203.288469,79.61469709 A 1,1,0,0,1,202.288469,78.61469709 L 202.288469,78.5332671 A 1,1,0,0,1,203.288469,77.5332671"
class="zrpfIRpo_44"></path>
<path id="Rectangle-11" fill="#d1cebd" width="33.8449176" height="2.08142999"
d="M 231.926476,77.5332671 L 263.7713936,77.5332671 A 1,1,0,0,1,264.7713936,78.5332671 L 264.7713936,78.61469709 A 1,1,0,0,1,263.7713936,79.61469709 L 231.926476,79.61469709 A 1,1,0,0,1,230.926476,78.61469709 L 230.926476,78.5332671 A 1,1,0,0,1,231.926476,77.5332671"
class="zrpfIRpo_45"></path>
<path id="Rectangle-11" fill="#d1cebd" width="18.2241864" height="2.08142999"
d="M 203.288469,87.9404171 L 219.5126554,87.9404171 A 1,1,0,0,1,220.5126554,88.9404171 L 220.5126554,89.02184709000001 A 1,1,0,0,1,219.5126554,90.02184709000001 L 203.288469,90.02184709000001 A 1,1,0,0,1,202.288469,89.02184709000001 L 202.288469,88.9404171 A 1,1,0,0,1,203.288469,87.9404171"
class="zrpfIRpo_46"></path>
<path id="Rectangle-11" fill="#d1cebd" width="18.2241864" height="2.08142999"
d="M 224.116111,87.9404171 L 240.3402974,87.9404171 A 1,1,0,0,1,241.3402974,88.9404171 L 241.3402974,89.02184709000001 A 1,1,0,0,1,240.3402974,90.02184709000001 L 224.116111,90.02184709000001 A 1,1,0,0,1,223.116111,89.02184709000001 L 223.116111,88.9404171 A 1,1,0,0,1,224.116111,87.9404171"
class="zrpfIRpo_47"></path>
<path id="Rectangle-11" fill="#d1cebd" width="10.4138208" height="2.08142999"
d="M 244.943753,87.9404171 L 253.35757379999998,87.9404171 A 1,1,0,0,1,254.35757379999998,88.9404171 L 254.35757379999998,89.02184709000001 A 1,1,0,0,1,253.35757379999998,90.02184709000001 L 244.943753,90.02184709000001 A 1,1,0,0,1,243.943753,89.02184709000001 L 243.943753,88.9404171 A 1,1,0,0,1,244.943753,87.9404171"
class="zrpfIRpo_48"></path>
<path id="Rectangle-11" fill="#d1cebd" width="33.8449176" height="2.08142999"
d="M 203.288469,98.347567 L 235.1333866,98.347567 A 1,1,0,0,1,236.1333866,99.347567 L 236.1333866,99.42899699 A 1,1,0,0,1,235.1333866,100.42899699 L 203.288469,100.42899699 A 1,1,0,0,1,202.288469,99.42899699 L 202.288469,99.347567 A 1,1,0,0,1,203.288469,98.347567"
class="zrpfIRpo_49"></path>
<path id="Rectangle-11" fill="#d1cebd" width="15.6207312" height="2.08142999"
d="M 203.288469,108.754717 L 216.9092002,108.754717 A 1,1,0,0,1,217.9092002,109.754717 L 217.9092002,109.83614699 A 1,1,0,0,1,216.9092002,110.83614699 L 203.288469,110.83614699 A 1,1,0,0,1,202.288469,109.83614699 L 202.288469,109.754717 A 1,1,0,0,1,203.288469,108.754717"
class="zrpfIRpo_50"></path>
<path
d="M414.991426,93.6643496 L557.659437,93.6643496 L557.659437,195.142937 C557.659437,199.162932 554.399545,202.419067 550.373649,202.419067 L422.277215,202.419067 C418.255898,202.419067 414.991426,199.157214 414.991426,195.142937 L414.991426,93.6643496 Z"
id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_51"></path>
<path
d="M414.991426,87.9338775 C414.991426,83.9126798 418.251232,80.6554121 422.277215,80.6554121 L550.373649,80.6554121 C554.397843,80.6554121 557.659437,83.9124627 557.659437,87.9338775 L557.659437,95.7457795 L414.991426,95.7457795 L414.991426,87.9338775 Z"
id="Case" stroke="#949599" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_52"></path>
<path id="Oval-5" fill="#f71010" d="M423.84250732,88.2005958A2.34310968,2.34160874 0,1,1 428.52872668,88.2005958A2.34310968,2.34160874 0,1,1 423.84250732,88.2005958" class="zrpfIRpo_53"></path>
<path id="Oval-5" fill="#dee3e2" d="M431.65287232000003,88.2005958A2.34310968,2.34160874 0,1,1 436.33909168,88.2005958A2.34310968,2.34160874 0,1,1 431.65287232000003,88.2005958" class="zrpfIRpo_54"></path>
<path id="Oval-5" fill="#33f710" d="M439.46323832,88.2005958A2.34310968,2.34160874 0,1,1 444.14945768,88.2005958A2.34310968,2.34160874 0,1,1 439.46323832,88.2005958" class="zrpfIRpo_55"></path>
<path id="Oval-6" stroke="#d1cebd" stroke-width="2.34160874" fill="#F7F2F2"
d="M477.21333899999996,148.041708A26.034552,26.0178749 0,1,1 529.282443,148.041708A26.034552,26.0178749 0,1,1 477.21333899999996,148.041708" class="zrpfIRpo_56"></path>
<path d="M500.383423,118.901688 L500.383423,125.145978 L506.63305,125.145978 L506.63305,118.901688 L500.383423,118.901688 Z" id="Rectangle-12" stroke="#ffb0cd" stroke-width="2.08142999" fill="#F7F2F2"
class="zrpfIRpo_57"></path>
<path d="M500.123077,170.937438 L500.123077,177.181728 L506.372704,177.181728 L506.372704,170.937438 L500.123077,170.937438 Z" id="Rectangle-12" stroke="#ffb0cd" stroke-width="2.08142999" fill="#F7F2F2"
class="zrpfIRpo_58"></path>
<path d="M474.088525,145.179742 L474.088525,151.424032 L480.338152,151.424032 L480.338152,145.179742 L474.088525,145.179742 Z" id="Rectangle-12" stroke="#084177" stroke-width="2.08142999" fill="#F7F2F2"
class="zrpfIRpo_59"></path>
<path d="M525.897284,145.179742 L525.897284,151.424032 L532.146911,151.424032 L532.146911,145.179742 L525.897284,145.179742 Z" id="Rectangle-12" stroke="#084177" stroke-width="2.08142999" fill="#F7F2F2"
class="zrpfIRpo_60"></path>
<path id="Line" stroke="#084177" stroke-width="2.08142999" stroke-linecap="square" d="M529.282443,124.625621L529.282443,144.139027" class="zrpfIRpo_61"></path>
<path id="Line" stroke="#084177" stroke-width="2.08142999" stroke-linecap="square" d="M529.282443,151.944389L529.282443,171.457795" class="zrpfIRpo_62"></path>
<path id="Oval-5" fill="#ff1e56" d="M526.15829676,123.845084A3.12414624,3.12214499 0,1,1 532.4065892399999,123.845084A3.12414624,3.12214499 0,1,1 526.15829676,123.845084" class="zrpfIRpo_63"></path>
<path id="Oval-5" fill="#ff1e56" d="M526.15829676,173.279047A3.12414624,3.12214499 0,1,1 532.4065892399999,173.279047A3.12414624,3.12214499 0,1,1 526.15829676,173.279047" class="zrpfIRpo_64"></path>
<g id="Group-60" transform="translate(439.463238, 115.519364)" fill="#F7F2F2" stroke-width="2.08142999">
<path id="Rectangle-15" width="16.1427564" stroke="#dee3e2" height="16.1310824"
d="M 4.0407150000000005,1.040715 L 14.183471399999998,1.040715 A 3,3,0,0,1,17.1834714,4.0407150000000005 L 17.1834714,14.171797399999999 A 3,3,0,0,1,14.183471399999998,17.1717974 L 4.0407150000000005,17.1717974 A 3,3,0,0,1,1.040715,14.171797399999999 L 1.040715,4.0407150000000005 A 3,3,0,0,1,4.0407150000000005,1.040715"
class="zrpfIRpo_65"></path>
<path id="Rectangle-15" width="16.1427564" stroke="#33f710" height="16.1310824"
d="M 4.0407150000000005,24.4568024 L 14.183471399999998,24.4568024 A 3,3,0,0,1,17.1834714,27.4568024 L 17.1834714,37.5878848 A 3,3,0,0,1,14.183471399999998,40.5878848 L 4.0407150000000005,40.5878848 A 3,3,0,0,1,1.040715,37.5878848 L 1.040715,27.4568024 A 3,3,0,0,1,4.0407150000000005,24.4568024"
class="zrpfIRpo_66"></path>
<path id="Rectangle-15" width="16.1427564" stroke="#f71010" height="16.1310824"
d="M 4.0407150000000005,47.8728898 L 14.183471399999998,47.8728898 A 3,3,0,0,1,17.1834714,50.8728898 L 17.1834714,61.00397220000001 A 3,3,0,0,1,14.183471399999998,64.0039722 L 4.0407150000000005,64.0039722 A 3,3,0,0,1,1.040715,61.00397220000001 L 1.040715,50.8728898 A 3,3,0,0,1,4.0407150000000005,47.8728898"
class="zrpfIRpo_67"></path>
</g>
<path id="Oval-8" stroke="#ff7272" stroke-width="2.08142999" fill="#F7F2F2" d="M616.7585378,235.982125A15.6207312,15.6107249 0,1,1 648.0000002,235.982125A15.6207312,15.6107249 0,1,1 616.7585378,235.982125"
class="zrpfIRpo_68"></path>
<path id="Oval-8" stroke="#ff7272" stroke-width="2.08142999" fill="#F7F2F2" d="M623.26717579,235.982125A9.11209321,9.10625621 0,1,1 641.49136221,235.982125A9.11209321,9.10625621 0,1,1 623.26717579,235.982125"
class="zrpfIRpo_69"></path>
<path id="Oval-8" stroke="#d1cebd" stroke-width="2.08142999" fill="#F7F2F2"
d="M606.3447165900001,212.305859A5.20691041,5.20357498 0,1,1 616.75853741,212.305859A5.20691041,5.20357498 0,1,1 606.3447165900001,212.305859" class="zrpfIRpo_70"></path>
<path
d="M588.639887,211.004965 C588.065116,211.004965 587.599172,211.470909 587.599172,212.04568 L587.599172,255.75571 C587.599172,258.629565 589.928892,260.959285 592.802747,260.959285 L628.720118,260.959285 C631.593973,260.959285 633.923693,258.629565 633.923693,255.75571 L633.923693,212.04568 C633.923693,211.470909 633.457749,211.004965 632.882978,211.004965 L588.639887,211.004965 Z"
id="Rectangle-16" stroke="#ff7272" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_71"></path>
<path id="Rectangle-16" stroke="#d1cebd" stroke-width="2.08142999" fill="#F7F2F2" width="13.5393012" height="16.6514399"
d="M 612.728541,225.054618 L 620.2678421999999,225.054618 A 3,3,0,0,1,623.2678421999999,228.054618 L 623.2678421999999,238.70605790000002 A 3,3,0,0,1,620.2678421999999,241.70605790000002 L 612.728541,241.70605790000002 A 3,3,0,0,1,609.728541,238.70605790000002 L 609.728541,228.054618 A 3,3,0,0,1,612.728541,225.054618"
class="zrpfIRpo_72"></path>
<path id="Line-2" stroke="#d1cebd" stroke-width="2.08142999" stroke-linecap="square" d="M616.368019,211.395233L616.368019,223.233366" class="zrpfIRpo_73"></path>
<path
d="M16.391389,229.997886 C7.91344584,229.997886 1.040715,236.870617 1.040715,245.34856 C1.040715,253.826503 7.91344584,260.699234 16.391389,260.699234 L79.4070531,260.699234 C80.2692097,260.699234 80.9681256,260.000318 80.9681256,259.138161 L80.9681256,256.722169 C80.9681256,255.629844 80.123732,254.723351 79.0341503,254.645969 C71.8803755,254.137863 68.0805122,250.995245 68.0805122,245.34856 C68.0805122,239.701873 71.8803788,236.559254 79.0341596,236.05115 C80.1237345,235.973762 80.9681256,235.06727 80.9681256,233.974951 L80.9681256,231.558958 C80.9681256,230.696802 80.2692097,229.997886 79.4070531,229.997886 L16.391389,229.997886 Z"
id="Rectangle-17" stroke="#f8dc88" stroke-width="2.08142999" fill="#F7F2F2" class="zrpfIRpo_76"></path>
<path
d="M80.1864202,255.299762 C80.1864202,255.551575 79.9821545,255.75571 79.73018,255.75571 L79.73018,255.75571 L72.353427,255.75571 L16.1414223,255.75571 C10.3900278,255.75571 5.72760145,251.09627 5.72760145,245.34856 C5.72760145,239.60085 10.3900278,234.94141 16.1414223,234.94141 L72.353427,234.94141 L79.73018,234.94141 L79.73018,234.94141 C79.9821545,234.94141 80.1864202,235.145545 80.1864202,235.397358"
id="Rectangle-19" stroke="#f8dc88" stroke-width="2.08142999" class="zrpfIRpo_77"></path>
<path id="Rectangle-18" fill="#f8dc88" width="54.6725593" height="2.08142999"
d="M 15.0586581,240.925521 L 67.7312174,240.925521 A 1,1,0,0,1,68.7312174,241.925521 L 68.7312174,242.00695099 A 1,1,0,0,1,67.7312174,243.00695099 L 15.0586581,243.00695099 A 1,1,0,0,1,14.0586581,242.00695099 L 14.0586581,241.925521 A 1,1,0,0,1,15.0586581,240.925521"
class="zrpfIRpo_78"></path>
<path id="Rectangle-18" fill="#f8dc88" width="54.6725593" height="2.08142999"
d="M 15.0586581,247.42999 L 67.7312174,247.42999 A 1,1,0,0,1,68.7312174,248.42999 L 68.7312174,248.51141999 A 1,1,0,0,1,67.7312174,249.51141999 L 15.0586581,249.51141999 A 1,1,0,0,1,14.0586581,248.51141999 L 14.0586581,248.42999 A 1,1,0,0,1,15.0586581,247.42999"
class="zrpfIRpo_79"></path>
<path
d="M65.1265421,178.055093 C63.848875,176.91993 62.5712079,175.784766 61.2935408,174.649603 C59.2574411,172.842608 57.2271756,171.029822 55.1910759,169.222827 C54.7243482,168.81162 54.2576205,168.394621 53.7967269,167.983414 C53.7967269,168.527829 53.7967269,169.078035 53.7967269,169.622451 C55.074394,168.487287 56.3520611,167.352124 57.6297282,166.21696 C59.6658279,164.409965 61.6960934,162.597179 63.7321931,160.790184 C64.1989208,160.378977 64.6656485,159.961978 65.1265421,159.550771 C65.5816017,159.145355 65.5757676,158.317149 65.1265421,157.911734 C64.6423121,157.465777 63.965557,157.47736 63.4754929,157.911734 C62.1978257,159.046897 60.9201586,160.182061 59.6424915,161.317224 C57.6063919,163.124219 55.5761263,164.937006 53.5400267,166.744 C53.0732989,167.155208 52.6065712,167.572206 52.1456776,167.983414 C51.6964522,168.383037 51.6964522,169.222827 52.1456776,169.622451 C53.4233447,170.757614 54.7010118,171.892778 55.978679,173.027941 C58.0147786,174.834936 60.0450442,176.647722 62.0811438,178.454717 C62.5478715,178.865924 63.0145992,179.282923 63.4754929,179.69413 C63.9305524,180.099546 64.6831508,180.174837 65.1265421,179.69413 C65.5349289,179.253965 65.6107721,178.489467 65.1265421,178.055093 L65.1265421,178.055093 Z"
id="Shape" fill="#d1cebd" fill-rule="nonzero" class="zrpfIRpo_80"></path>
<path
d="M84.5825817,159.553526 C85.8602488,160.688689 87.1379159,161.823853 88.415583,162.959016 C90.4516827,164.766011 92.4819482,166.578798 94.5180479,168.385793 C94.9847756,168.797 95.4515033,169.213999 95.9123969,169.625206 C95.9123969,169.080791 95.9123969,168.530584 95.9123969,167.986169 C94.6347298,169.121332 93.3570627,170.256496 92.0793956,171.391659 C90.0432959,173.198654 88.0130304,175.011441 85.9769307,176.818435 C85.510203,177.229643 85.0434753,177.646641 84.5825817,178.057849 C84.1275221,178.463264 84.1333562,179.29147 84.5825817,179.696886 C85.0668117,180.142843 85.7435668,180.131259 86.2336309,179.696886 C87.5112981,178.561722 88.7889652,177.426559 90.0666323,176.291395 C92.1027319,174.4844 94.1329975,172.671614 96.1690971,170.864619 C96.6358249,170.453412 97.1025526,170.036413 97.5634462,169.625206 C98.0126716,169.225582 98.0126716,168.385793 97.5634462,167.986169 C96.2857791,166.851005 95.008112,165.715842 93.7304448,164.580678 C91.6943452,162.773684 89.6640796,160.960897 87.62798,159.153902 C87.1612523,158.742695 86.6945246,158.325696 86.2336309,157.914489 C85.7785714,157.509074 85.025973,157.433782 84.5825817,157.914489 C84.1741949,158.354654 84.0983517,159.119152 84.5825817,159.553526 L84.5825817,159.553526 Z"
id="Shape" fill="#d1cebd" fill-rule="nonzero" class="zrpfIRpo_81"></path>
<path
d="M70.6937286,184.875712 C71.0437744,183.833215 71.3879861,182.790718 71.7380319,181.74243 C72.5723077,179.234645 73.4065835,176.732652 74.2408593,174.224868 C75.2443239,171.201626 76.2477884,168.184177 77.2570871,165.160935 C78.1263675,162.548901 78.9956479,159.936867 79.8649282,157.324832 C80.2791491,156.056461 80.7458768,154.793881 81.1309271,153.508135 C81.1367612,153.49076 81.1425953,153.473385 81.1484294,153.45601 C81.3409546,152.882637 80.9267338,152.164472 80.3316559,152.031264 C79.6899053,151.886473 79.1006616,152.222388 78.8964682,152.842095 C78.5464224,153.884592 78.2022107,154.927089 77.852165,155.975378 C77.0178892,158.483162 76.1836134,160.985155 75.3493376,163.49294 C74.345873,166.516181 73.3424084,169.533631 72.3331097,172.556872 C71.4638294,175.168907 70.594549,177.780941 69.7252686,180.392975 C69.3110478,181.655555 68.8443201,182.918135 68.4592697,184.203881 C68.4534356,184.221256 68.4476015,184.238631 68.4417674,184.256006 C68.2492422,184.829379 68.6634631,185.547544 69.2585409,185.680752 C69.9002915,185.825543 70.4895353,185.489627 70.6937286,184.875712 L70.6937286,184.875712 Z"
id="Shape" fill="#d1cebd" fill-rule="nonzero" class="zrpfIRpo_82"></path>
</g>
</g>
</svg>
/* Hero Section SVG Styling */
.zrpfIRpo_0 {
stroke-dasharray: 901 903;
stroke-dashoffset: 902;
animation: zrpfIRpo_draw 3000ms ease-out 0ms forwards;
}
.zrpfIRpo_1 {
stroke-dasharray: 736 738;
stroke-dashoffset: 737;
animation: zrpfIRpo_draw 3000ms ease-out 12ms forwards;
}
.zrpfIRpo_2 {
stroke-dasharray: 150 152;
stroke-dashoffset: 151;
animation: zrpfIRpo_draw 3000ms ease-out 24ms forwards;
}
.zrpfIRpo_3 {
stroke-dasharray: 164 166;
stroke-dashoffset: 165;
animation: zrpfIRpo_draw 3000ms ease-out 36ms forwards;
}
.zrpfIRpo_4 {
stroke-dasharray: 31 20;
stroke-dashoffset: 32;
animation: zrpfIRpo_draw 3000ms ease-out 48ms infinite;
}
.zrpfIRpo_5 {
stroke-dasharray: 295 297;
stroke-dashoffset: 296;
animation: zrpfIRpo_draw 3000ms ease-out 60ms forwards;
}
.zrpfIRpo_6 {
stroke-dasharray: 253 255;
stroke-dashoffset: 254;
animation: zrpfIRpo_draw 3000ms ease-out 73ms forwards;
}
.zrpfIRpo_7 {
stroke-dasharray: 52 54;
stroke-dashoffset: 53;
animation: zrpfIRpo_draw 3000ms ease-out 85ms forwards;
}
.zrpfIRpo_8 {
stroke-dasharray: 21 23;
stroke-dashoffset: 22;
animation: zrpfIRpo_draw 3000ms ease-out 97ms forwards;
}
.zrpfIRpo_9 {
stroke-dasharray: 25 27;
stroke-dashoffset: 26;
animation: zrpfIRpo_draw 3000ms ease-out 109ms forwards;
}
.zrpfIRpo_10 {
stroke-dasharray: 39 41;
stroke-dashoffset: 40;
animation: zrpfIRpo_draw 3000ms ease-out 121ms forwards;
}
.zrpfIRpo_11 {
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
animation: zrpfIRpo_draw 3000ms ease-out 134ms forwards;
}
.zrpfIRpo_12 {
stroke-dasharray: 19 21;
stroke-dashoffset: 20;
animation: zrpfIRpo_draw 3000ms ease-out 146ms forwards;
}
.zrpfIRpo_13 {
stroke-dasharray: 252 254;
stroke-dashoffset: 253;
animation: zrpfIRpo_draw 3000ms ease-out 158ms forwards;
}
.zrpfIRpo_14 {
stroke-dasharray: 634 636;
stroke-dashoffset: 635;
animation: zrpfIRpo_draw 3000ms ease-out 170ms forwards;
}
.zrpfIRpo_15 {
stroke-dasharray: 456 458;
stroke-dashoffset: 457;
animation: zrpfIRpo_draw 3000ms ease-out 182ms forwards;
}
.zrpfIRpo_16 {
stroke-dasharray: 63 65;
stroke-dashoffset: 64;
animation: zrpfIRpo_draw 3000ms ease-out 195ms forwards;
}
.zrpfIRpo_17 {
stroke-dasharray: 558 560;
stroke-dashoffset: 559;
animation: zrpfIRpo_draw 3000ms ease-out 207ms forwards;
}
.zrpfIRpo_18 {
stroke-dasharray: 9 11;
stroke-dashoffset: 10;
animation: zrpfIRpo_draw 3000ms ease-out 219ms forwards;
}
.zrpfIRpo_19 {
stroke-dasharray: 480 482;
stroke-dashoffset: 481;
animation: zrpfIRpo_draw 3000ms ease-out 231ms forwards;
}
.zrpfIRpo_20 {
stroke-dasharray: 265 267;
stroke-dashoffset: 266;
animation: zrpfIRpo_draw 3000ms ease-out 243ms forwards;
}
.zrpfIRpo_21 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 256ms forwards;
}
.zrpfIRpo_22 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 268ms forwards;
}
.zrpfIRpo_23 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 280ms forwards;
}
.zrpfIRpo_24 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 292ms forwards;
}
.zrpfIRpo_25 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 304ms forwards;
}
.zrpfIRpo_26 {
stroke-dasharray: 21 23;
stroke-dashoffset: 22;
animation: zrpfIRpo_draw 3000ms ease-out 317ms forwards;
}
.zrpfIRpo_27 {
stroke-dasharray: 21 23;
stroke-dashoffset: 22;
animation: zrpfIRpo_draw 3000ms ease-out 329ms forwards;
}
.zrpfIRpo_28 {
stroke-dasharray: 33 35;
stroke-dashoffset: 34;
animation: zrpfIRpo_draw 3000ms ease-out 341ms forwards;
}
.zrpfIRpo_29 {
stroke-dasharray: 46 48;
stroke-dashoffset: 47;
animation: zrpfIRpo_draw 3000ms ease-out 353ms forwards;
}
.zrpfIRpo_30 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 365ms forwards;
}
.zrpfIRpo_31 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 378ms forwards;
}
.zrpfIRpo_32 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 390ms forwards;
}
.zrpfIRpo_33 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 402ms forwards;
}
.zrpfIRpo_34 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 414ms forwards;
}
.zrpfIRpo_35 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 3000ms ease-out 426ms forwards;
}
.zrpfIRpo_36 {
stroke-dasharray: 39 41;
stroke-dashoffset: 40;
animation: zrpfIRpo_draw 3000ms ease-out 439ms forwards;
}
.zrpfIRpo_37 {
stroke-dasharray: 65 67;
stroke-dashoffset: 66;
animation: zrpfIRpo_draw 3000ms ease-out 451ms forwards;
}
.zrpfIRpo_38 {
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
animation: zrpfIRpo_draw 3000ms ease-out 463ms forwards;
}
.zrpfIRpo_39 {
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
animation: zrpfIRpo_draw 3000ms ease-out 475ms forwards;
}
.zrpfIRpo_40 {
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
animation: zrpfIRpo_draw 3000ms ease-out 487ms forwards;
}
.zrpfIRpo_41 {
stroke-dasharray: 19 21;
stroke-dashoffset: 20;
animation: zrpfIRpo_draw 3000ms ease-out 500ms forwards;
}
.zrpfIRpo_42 {
stroke-dasharray: 55 57;
stroke-dashoffset: 56;
animation: zrpfIRpo_draw 3000ms ease-out 512ms forwards;
}
.zrpfIRpo_43 {
stroke-dasharray: 39 41;
stroke-dashoffset: 40;
animation: zrpfIRpo_draw 3000ms ease-out 524ms forwards;
}
.zrpfIRpo_44 {
stroke-dasharray: 55 57;
stroke-dashoffset: 56;
animation: zrpfIRpo_draw 3000ms ease-out 536ms forwards;
}
.zrpfIRpo_45 {
stroke-dasharray: 71 73;
stroke-dashoffset: 72;
animation: zrpfIRpo_draw 3000ms ease-out 548ms forwards;
}
.zrpfIRpo_46 {
stroke-dasharray: 39 41;
stroke-dashoffset: 40;
animation: zrpfIRpo_draw 3000ms ease-out 560ms forwards;
}
.zrpfIRpo_47 {
stroke-dasharray: 39 41;
stroke-dashoffset: 40;
animation: zrpfIRpo_draw 3000ms ease-out 573ms forwards;
}
.zrpfIRpo_48 {
stroke-dasharray: 24 26;
stroke-dashoffset: 25;
animation: zrpfIRpo_draw 3000ms ease-out 585ms forwards;
}
.zrpfIRpo_49 {
stroke-dasharray: 71 73;
stroke-dashoffset: 72;
animation: zrpfIRpo_draw 3000ms ease-out 597ms forwards;
}
.zrpfIRpo_50 {
stroke-dasharray: 34 36;
stroke-dashoffset: 35;
animation: zrpfIRpo_draw 3000ms ease-out 609ms forwards;
}
.zrpfIRpo_51 {
stroke-dasharray: 497 499;
stroke-dashoffset: 498;
animation: zrpfIRpo_draw 3000ms ease-out 621ms forwards;
}
.zrpfIRpo_52 {
stroke-dasharray: 310 312;
stroke-dashoffset: 311;
animation: zrpfIRpo_draw 3000ms ease-out 634ms forwards;
}
.zrpfIRpo_53 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 646ms forwards;
}
.zrpfIRpo_54 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 658ms forwards;
}
.zrpfIRpo_55 {
stroke-dasharray: 15 17;
stroke-dashoffset: 16;
animation: zrpfIRpo_draw 3000ms ease-out 670ms forwards;
}
.zrpfIRpo_56 {
stroke-dasharray: 164 166;
stroke-dashoffset: 165;
animation: zrpfIRpo_draw 3000ms ease-out 682ms forwards;
}
.zrpfIRpo_57 {
stroke-dasharray: 25 27;
stroke-dashoffset: 26;
animation: zrpfIRpo_draw 3000ms ease-out 695ms forwards;
}
.zrpfIRpo_58 {
stroke-dasharray: 25 27;
stroke-dashoffset: 26;
animation: zrpfIRpo_draw 3000ms ease-out 707ms forwards;
}
.zrpfIRpo_59 {
stroke-dasharray: 25 27;
stroke-dashoffset: 26;
animation: zrpfIRpo_draw 3000ms ease-out 719ms forwards;
}
.zrpfIRpo_60 {
stroke-dasharray: 25 27;
stroke-dashoffset: 26;
animation: zrpfIRpo_draw 3000ms ease-out 731ms forwards;
}
.zrpfIRpo_61 {
stroke-dasharray: 20 22;
stroke-dashoffset: 21;
animation: zrpfIRpo_draw 3000ms ease-out 743ms forwards;
}
.zrpfIRpo_62 {
stroke-dasharray: 20 22;
stroke-dashoffset: 21;
animation: zrpfIRpo_draw 3000ms ease-out 756ms forwards;
}
.zrpfIRpo_63 {
stroke-dasharray: 20 22;
stroke-dashoffset: 21;
animation: zrpfIRpo_draw 3000ms ease-out 768ms forwards;
}
.zrpfIRpo_64 {
stroke-dasharray: 20 22;
stroke-dashoffset: 21;
animation: zrpfIRpo_draw 3000ms ease-out 780ms forwards;
}
.zrpfIRpo_65 {
stroke-dasharray: 61 50;
stroke-dashoffset: 61;
animation: zrpfIRpo_draw 3000ms ease-out 792ms infinite;
}
.zrpfIRpo_66 {
stroke-dasharray: 60 40;
stroke-dashoffset: 61;
animation: zrpfIRpo_draw 3000ms ease-out 804ms infinite;
}
.zrpfIRpo_67 {
stroke-dasharray: 60 20;
stroke-dashoffset: 61;
animation: zrpfIRpo_draw 3000ms ease-out 817ms infinite;
}
.zrpfIRpo_68 {
stroke-dasharray: 99 101;
stroke-dashoffset: 100;
animation: zrpfIRpo_draw 3000ms ease-out 829ms forwards;
}
.zrpfIRpo_69 {
stroke-dasharray: 58 60;
stroke-dashoffset: 59;
animation: zrpfIRpo_draw 3000ms ease-out 841ms forwards;
}
.zrpfIRpo_70 {
stroke-dasharray: 33 35;
stroke-dashoffset: 34;
animation: zrpfIRpo_draw 2000ms ease-out 853ms forwards;
}
.zrpfIRpo_71 {
stroke-dasharray: 188 190;
stroke-dashoffset: 189;
animation: zrpfIRpo_draw 3000ms ease-out 865ms forwards;
}
.zrpfIRpo_72 {
stroke-dasharray: 56 58;
stroke-dashoffset: 57;
animation: zrpfIRpo_draw 2000ms ease-out 878ms forwards;
}
.zrpfIRpo_73 {
stroke-dasharray: 12 14;
stroke-dashoffset: 13;
animation: zrpfIRpo_draw 2000ms ease-out 890ms forwards;
}
.zrpfIRpo_76 {
stroke-dasharray: 223 225;
stroke-dashoffset: 224;
animation: zrpfIRpo_draw 2000ms ease-out 926ms forwards;
}
.zrpfIRpo_77 {
stroke-dasharray: 162 164;
stroke-dashoffset: 163;
animation: zrpfIRpo_draw 2000ms ease-out 939ms forwards;
}
.zrpfIRpo_78 {
stroke-dasharray: 112 114;
stroke-dashoffset: 113;
animation: zrpfIRpo_draw 3000ms ease-out 951ms forwards;
}
.zrpfIRpo_79 {
stroke-dasharray: 112 114;
stroke-dashoffset: 113;
animation: zrpfIRpo_draw 3000ms ease-out 963ms forwards;
}
.zrpfIRpo_80 {
stroke-dasharray: 72 74;
stroke-dashoffset: 73;
animation: zrpfIRpo_draw 3000ms ease-out 975ms forwards;
}
.zrpfIRpo_81 {
stroke-dasharray: 72 74;
stroke-dashoffset: 73;
animation: zrpfIRpo_draw 3000ms ease-out 987ms forwards;
}
.zrpfIRpo_82 {
stroke-dasharray: 74 76;
stroke-dashoffset: 75;
animation: zrpfIRpo_draw 3000ms ease-out 1000ms forwards;
}
@keyframes zrpfIRpo_draw {
100% {
stroke-dashoffset: 0;
}
}
/* Hero Section SVG Animation */
@keyframes zrpfIRpo_fade {
0% {
stroke-opacity: 1;
}
94.44444444444444% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}
Also see: Tab Triggers