Skip to content

Instantly share code, notes, and snippets.

@manutheblacker

manutheblacker/404-page.markdown

Created May 22, 2020 07:23
Show Gist options
  • Save manutheblacker/d5d0af9d004172d73068391ae45abf4b to your computer and use it in GitHub Desktop.
Save manutheblacker/d5d0af9d004172d73068391ae45abf4b to your computer and use it in GitHub Desktop.
Download ZIP
404 Page
Raw
404-page.markdown
Raw
index.html
<div class="container">
<p class="textA">Page Not Found</p>
<p class="textB">404</p>
<a class="textC" href="#">Go Back</a>
<svg class="page-not-found" viewBox="0 0 1280 1024">
<title>Page Not Found</title>
<g class="hide tri-dots">
<circle cx="406.1" cy="890.7" r="3.5" transform="translate(-361.3 283) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="426.2" cy="878.8" r="3.7" transform="translate(-353.7 290.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="424.4" cy="861.8" r="3.7" transform="translate(-346.1 288.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="445.8" cy="867.7" r="3.7" transform="translate(-346.5 298.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="438.3" cy="851.8" r="3.7" transform="translate(-340.1 293.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="453.8" cy="845.8" r="3.7" transform="translate(-335.6 299.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="465.2" cy="859" r="3.7" transform="translate(-340.4 306.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="483" cy="849.2" r="3.7" transform="translate(-333.9 313.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="500.6" cy="840.2" r="3.7" transform="translate(-327.9 320.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="517.7" cy="831.5" r="3.7" transform="translate(-322 327.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="502.8" cy="821" r="3.7" transform="translate(-318.9 319.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="486" cy="829.6" r="3.7" transform="translate(-324.7 312.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="469.6" cy="837.8" r="3.7" transform="translate(-330.2 306.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="455.3" cy="825.5" r="3.7" transform="translate(-326.2 298.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="471.5" cy="817.7" r="3.7" transform="translate(-320.9 304.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="487.9" cy="810.2" r="3.7" transform="translate(-315.6 311.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="489.8" cy="791.1" r="3.7" transform="translate(-306.7 310.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="473.1" cy="798.2" r="3.7" transform="translate(-311.8 303.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="456.9" cy="805.7" r="3.7" transform="translate(-317 296.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="440.5" cy="813.7" r="3.7" transform="translate(-322.5 290.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="442.4" cy="793.8" r="3.7" transform="translate(-313.2 288.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="458.6" cy="786" r="3.7" transform="translate(-307.8 295.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="475" cy="779.1" r="3.7" transform="translate(-302.9 302.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="491.8" cy="772.4" r="3.7" transform="translate(-298 309) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="506.6" cy="784" r="3.7" transform="translate(-301.7 317.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="504.6" cy="802.3" r="3.7" transform="translate(-310.2 318.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="519.7" cy="812.9" r="3.7" transform="translate(-313.4 326.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="534.7" cy="822.9" r="3.7" transform="translate(-316.3 334.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="536.8" cy="805.3" r="3.7" transform="translate(-308 333.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="539.2" cy="787.7" r="3.7" transform="translate(-299.8 332.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="541.8" cy="770.3" r="3.7" transform="translate(-291.5 331.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="559.9" cy="763.5" r="3.7" transform="translate(-286.4 339.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="556.9" cy="780.7" r="3.7" transform="translate(-294.6 339.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="554.5" cy="797.9" r="3.7" transform="translate(-302.7 340.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="552" cy="815.2" r="3.7" transform="translate(-310.9 341.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="570.5" cy="807.2" r="3.7" transform="translate(-305.2 348.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="572.5" cy="790.5" r="3.7" transform="translate(-297.3 347.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="589.7" cy="797.2" r="3.7" transform="translate(-298.5 356.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="590" cy="782.3" r="3.7" transform="translate(-291.7 354.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="608.2" cy="784.4" r="3.7" transform="translate(-290.7 363.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="612.4" cy="765.8" r="3.7" transform="translate(-281.7 363.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="627.4" cy="776" r="3.7" transform="translate(-284.7 371.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="630.6" cy="758.5" r="3.7" transform="translate(-276.4 370.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="647" cy="766.1" r="3.7" transform="translate(-278 379) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="664.8" cy="756.4" r="3.7" transform="translate(-271.7 386.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="682.7" cy="749.2" r="3.6" transform="translate(-266.4 393.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="662.5" cy="737.6" r="3.7" transform="translate(-263.4 383) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="648" cy="747.5" r="3.7" transform="translate(-269.4 377.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="643.5" cy="727.1" r="3.7" transform="translate(-260.6 373.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="632.9" cy="740.8" r="3.7" transform="translate(-268.1 369.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="620.9" cy="729.6" r="3.7" transform="translate(-264.3 363.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="626.6" cy="714" r="3.7" transform="translate(-256.6 364.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="609.2" cy="701.3" r="3.6" transform="translate(-252.7 354.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="606.7" cy="718.2" r="3.7" transform="translate(-260.6 355.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="615.7" cy="747.7" r="3.7" transform="translate(-273.1 362.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="602.2" cy="735.1" r="3.7" transform="translate(-268.8 355.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="583.1" cy="740.9" r="3.7" transform="translate(-273.6 347.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="597.9" cy="751.8" r="3.7" transform="translate(-276.9 355.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="594.7" cy="767.9" r="3.7" transform="translate(-284.6 355.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="574.7" cy="773.4" r="3.7" transform="translate(-289.3 346.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="579.2" cy="757.5" r="3.7" transform="translate(-281.6 347.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="564" cy="747.1" r="3.7" transform="translate(-278.5 339.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="568" cy="730.7" r="3.7" transform="translate(-270.6 339.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="571.9" cy="714.5" r="3.7" transform="translate(-262.8 339.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="587.4" cy="724.6" r="3.7" transform="translate(-265.7 347.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="590.7" cy="708.2" r="3.7" transform="translate(-257.8 347) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="591.4" cy="691.3" r="3.7" transform="translate(-250.1 345.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="574.1" cy="698.1" r="3.7" transform="translate(-255.1 338.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="574.8" cy="681.2" r="3.7" transform="translate(-247.3 336.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="559.1" cy="669.7" r="3.7" transform="translate(-243.8 328.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="558.2" cy="686.9" r="3.7" transform="translate(-251.7 329.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="542.7" cy="675.8" r="3.7" transform="translate(-248.3 321.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="542.5" cy="658.8" r="3.7" transform="translate(-240.6 319.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="526.3" cy="682.4" r="3.7" transform="translate(-253.2 314.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="522.2" cy="697.3" r="3.7" transform="translate(-260.4 314.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="518.7" cy="713.5" r="3.7" transform="translate(-268.2 314.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="533.7" cy="725.5" r="3.7" transform="translate(-272 323) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="537.5" cy="709.2" r="3.7" transform="translate(-264.1 322.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="541.1" cy="692.9" r="3.7" transform="translate(-256.4 322.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="556.3" cy="703.9" r="3.7" transform="translate(-259.7 330.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="552.7" cy="720.2" r="3.7" transform="translate(-267.5 331.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="548.8" cy="736.6" r="3.7" transform="translate(-275.4 331.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="544.9" cy="753.1" r="3.7" transform="translate(-283.3 331.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="530" cy="742.2" r="3.7" transform="translate(-280 323.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="526.7" cy="759.5" r="3.7" transform="translate(-288.3 323.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="524" cy="777" r="3.7" transform="translate(-296.5 324.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="521.6" cy="794.8" r="3.7" transform="translate(-304.9 325.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="509" cy="765.9" r="3.7" transform="translate(-293.1 316.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="512" cy="748.1" r="3.7" transform="translate(-284.7 315.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="515.2" cy="730.5" r="3.7" transform="translate(-276.3 315.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="501" cy="717.2" r="3.7" transform="translate(-271.8 307.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="487.1" cy="704.7" r="3.7" transform="translate(-267.6 299.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="473" cy="692.5" r="3.7" transform="translate(-263.6 291.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="491" cy="685.7" r="3.7" transform="translate(-258.6 299.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="504.9" cy="698.3" r="3.7" transform="translate(-262.8 306.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="508.9" cy="678.8" r="3.7" transform="translate(-253.5 306.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="509.4" cy="658.3" r="3.7" transform="translate(-244 304.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="525.2" cy="666.5" r="3.7" transform="translate(-246 312.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="525.8" cy="649.3" r="3.7" transform="translate(-238.1 311) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="510.2" cy="638.9" r="3.7" transform="translate(-235.1 302.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="494.3" cy="646.3" r="3.7" transform="translate(-240.2 296.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="478.7" cy="654.5" r="3.7" transform="translate(-245.7 290.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="477.7" cy="634.1" r="3.7" transform="translate(-236.5 287.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="493.3" cy="627.1" r="3.7" transform="translate(-231.6 293.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="473.7" cy="616.2" r="3.7" transform="translate(-228.8 283.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="456.1" cy="605.3" r="3.7" transform="translate(-225.7 274.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="455.7" cy="625.5" r="3.7" transform="translate(-235 276.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="435.9" cy="631.7" r="3.7" transform="translate(-240 268.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="438.4" cy="612.9" r="3.7" transform="translate(-231.2 267.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="438.5" cy="592.7" r="3.7" transform="translate(-221.9 265) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="420" cy="579.2" r="3.2" transform="translate(-217.8 255.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="421.9" cy="600.1" r="3.7" transform="translate(-227.1 258.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="419.3" cy="619.8" r="3.6" transform="translate(-236.4 259.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="418.1" cy="640.2" r="3.6" transform="translate(-245.8 260.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="431.9" cy="652.7" r="3.7" transform="translate(-250 268.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="448" cy="645.9" r="3.7" transform="translate(-245.1 275.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="464.1" cy="642.8" r="3.7" transform="translate(-241.9 282.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="461.6" cy="661.1" r="3.7" transform="translate(-250.6 283) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="493.7" cy="666.7" r="3.7" transform="translate(-249.6 298.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="476.4" cy="673.6" r="3.7" transform="translate(-254.7 291.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="458.8" cy="680.1" r="3.7" transform="translate(-259.5 283.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="444.8" cy="666.4" r="3.7" transform="translate(-254.8 276) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="428.4" cy="674" r="3.7" transform="translate(-260.1 269.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="416.4" cy="661.3" r="3.5" transform="translate(-255.6 262.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="412.6" cy="683.2" r="2.9" transform="translate(-266 263.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="424.1" cy="694" r="3.7" transform="translate(-269.7 269.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="441.6" cy="686.6" r="3.7" transform="translate(-264.4 276.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="436.5" cy="706" r="3.7" transform="translate(-273.8 276.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="415.6" cy="709.6" r="3.7" transform="translate(-277.7 267.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="412.9" cy="730.2" r="3.4" transform="translate(-287.4 268.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="412.3" cy="751.3" r="3.6" transform="translate(-297.1 270.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="428.8" cy="742.4" r="3.7" transform="translate(-291.2 277) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="430.7" cy="723.3" r="3.7" transform="translate(-282.3 275.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="450.4" cy="717.8" r="3.7" transform="translate(-277.7 284.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="455" cy="699.3" r="3.7" transform="translate(-268.7 284.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="469" cy="711.4" r="3.7" transform="translate(-272.7 291.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="483.2" cy="723.4" r="3.7" transform="translate(-276.6 299.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="479.7" cy="741.7" r="3.7" transform="translate(-285.3 300.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="497.5" cy="735.7" r="3.7" transform="translate(-280.6 307.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="494.4" cy="753.9" r="3.7" transform="translate(-289.3 308.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="477" cy="760.1" r="3.7" transform="translate(-294 300.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="460" cy="766.8" r="3.7" transform="translate(-298.9 293.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="462" cy="748" r="3.7" transform="translate(-290.1 292.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="465.1" cy="729.7" r="3.7" transform="translate(-281.5 292.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="446.6" cy="735.7" r="3.7" transform="translate(-286.2 284.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="444.7" cy="754.5" r="3.7" transform="translate(-295 285.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="443.6" cy="774" r="3.7" transform="translate(-304 287.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="427.5" cy="782.4" r="3.7" transform="translate(-309.6 280.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="428.1" cy="762.4" r="3.7" transform="translate(-300.4 278.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="412" cy="771.5" r="3.6" transform="translate(-306.3 272.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="411" cy="791.3" r="3.7" transform="translate(-315.5 274.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="426" cy="802.5" r="3.7" transform="translate(-318.9 282.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="410" cy="811.3" r="3.7" transform="translate(-324.7 276) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="423.8" cy="822.7" r="3.7" transform="translate(-328.4 283.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="439.3" cy="833.1" r="3.7" transform="translate(-331.4 291.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="422.6" cy="842" r="3.7" transform="translate(-337.3 285.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="407.1" cy="831.9" r="3.5" transform="translate(-334.4 277) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="407.1" cy="852.7" r="3.5" transform="translate(-343.9 279.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="408" cy="872.1" r="3.7" transform="translate(-352.6 281.8) rotate(-27.1)" style="fill: #ffe029"/>
</g>
<g class="hide spin-circles">
<path d="M776.3,403.3A151,151,0,0,1,989.8,189.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M989.8,189.8A151,151,0,0,1,776.3,403.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<path d="M786.9,392.7c-53-53-52.8-138.9.3-192.1s139.1-53.2,192.1-.3" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M979.2,200.4c53,53,52.8,138.9-.3,192.1s-139.1,53.2-192.1.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<path d="M797.5,382.1c-46.9-46.9-46.7-123.3.6-170.6s123.6-47.5,170.6-.6" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M968.6,211c46.9,46.9,46.7,123.3-.6,170.6s-123.6,47.5-170.6.6" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<path d="M808.1,371.5c-40.9-40.9-40.6-107.7.8-149.1s108.1-41.8,149.1-.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M958,221.6c40.9,40.9,40.6,107.7-.8,149.1s-108.1,41.8-149.1.8" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<path d="M818.7,360.9c-34.9-34.9-34.4-92,1.1-127.6s92.7-36,127.6-1.1" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M947.4,232.2c34.9,34.9,34.4,92-1.1,127.6s-92.7,36-127.6,1.1" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<path d="M829.3,350.3c-28.9-28.9-28.3-76.4,1.4-106.1s77.2-30.3,106.1-1.4" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
<path d="M936.8,242.8c28.9,28.9,28.3,76.4-1.4,106.1s-77.2,30.3-106.1,1.4" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
</g>
<g class="hide big-white-circle">
<circle cx="644" cy="482" r="277" style="fill: #fff"/>
</g>
<g class="hide grow-circles">
<circle cx="940" cy="523" r="27" style="fill: #ffe029"/>
<circle cx="708.5" cy="217.6" r="14.5" transform="translate(-21.2 87.8) rotate(-7)" style="fill: #00b3ac"/>
<circle cx="725.5" cy="755.6" r="14.5" transform="translate(-86.5 93.8) rotate(-7)" style="fill: #f62c72"/>
<circle cx="446.9" cy="181.6" r="16.5" transform="translate(-18.8 55.7) rotate(-7)" style="fill: #00b3ac"/>
<circle cx="314.9" cy="348.6" r="16.5" transform="translate(-40.1 40.9) rotate(-7)" style="fill: #f62c72"/>
<circle cx="682.6" cy="187.5" r="7.5" transform="translate(-17.7 84.4) rotate(-7)" style="fill: #f62c72"/>
<circle cx="328.5" cy="500.6" r="7.5" transform="translate(-58.4 43.7) rotate(-7)" style="fill: #fff"/>
<circle cx="364" cy="439" r="27" style="fill: #ffe029"/>
</g>
<g class="box">
<polygon class="main-container" points="364.4 328.1 888.1 292.8 889.1 635 453.7 698.2 364.4 328.1" style="fill: #fff;stroke: #032c3f;stroke-miterlimit: 10;stroke-width: 24px"/>
<polygon points="395 285.6 762 258.9 732.7 336.1 431.6 350.2 395 285.6" style="fill: #ffe029"/>
<polygon points="709.7 622 933.7 622.3 960.9 662.9 931.9 700.1 708.7 699.4 709.7 622" style="fill: #ffe029"/>
</g>
<g class="hide bottom-triangles">
<path d="M646.6,741.1,476.8,822.7a8.6,8.6,0,0,1-12.3-8.4l14.3-187.9c.5-6.2,8.4-10,13.5-6.5L647.8,726.2a8.6,8.6,0,0,1-1.1,14.9ZM482.8,800.6,625.7,732,494.8,642.5Z" style="fill: #f62c72"/>
<path class="hide end-tri" fill="#00b3ac" d="M548.3 732.9l-27.9-104.5L687 671l-138.7 61.9z"/>
<path class="start-tri" style="transform: translate(5px, -2px)" fill="#00b3ac" d="M477 803l10.7-159L620 734l-144 69z"/>
</g>
<g class="hide squiggles">
<g class="squiggle-bottom">
<path class="sq-bottom" d="M798,749.1c2.9.1,5.5,2.1,7.1,4.6a33.5,33.5,0,0,1,3.5,8,116.3,116.3,0,0,0,8.3,18.8,7.5,7.5,0,0,0,3,3.4,5.8,5.8,0,0,0,5.1-.5c9.5-5.2,15.4-15.3,24.5-21.2,2.2-1.5,4.9-2.7,7.5-2a9.3,9.3,0,0,1,4.6,3.7c5.8,7.7,7.9,17.5,11.4,26.4,1.1,2.8,2.7,5.8,5.6,6.4s5-1.1,7-2.7c7.9-6.5,14.4-14.7,23-20.3,1.6-1.1,3.5-2.1,5.4-1.7s3.4,2.2,4.6,3.9a67.9,67.9,0,0,1,8.5,18.2c.9,3.2,1.7,6.6,3.5,9.4s5.1,5,8.4,4.5" style="fill: none;stroke: #00b3ac;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/>
<g class="dots-bottom">
<circle cx="802.6" cy="727.5" r="1.6" style="fill: #fff"/>
<circle cx="799.1" cy="734.8" r="1.5" style="fill: #fff"/>
<circle cx="809.6" cy="734.3" r="1.6" style="fill: #fff"/>
<circle cx="807.1" cy="742.3" r="1.6" style="fill: #fff"/>
<circle cx="814.7" cy="743.8" r="1.6" style="fill: #fff"/>
<circle cx="810.3" cy="752.5" r="1.4" style="fill: #fff"/>
<circle cx="818.4" cy="753" r="1.6" style="fill: #fff"/>
<circle cx="816.3" cy="761.8" r="1.6" style="fill: #fff"/>
<circle cx="825.5" cy="760.1" r="1.6" style="fill: #fff"/>
<circle cx="834.1" cy="755.3" r="1.6" style="fill: #fff"/>
<circle cx="842" cy="756.3" r="1.6" style="fill: #fff"/>
<circle cx="833.9" cy="764.1" r="1.6" style="fill: #fff"/>
<circle cx="824.3" cy="768" r="1.6" style="fill: #fff"/>
<circle cx="873.7" cy="776" r="1.5" style="fill: #fff"/>
<circle cx="868.8" cy="768.1" r="1.6" style="fill: #fff"/>
<circle cx="864.2" cy="758.5" r="1.6" style="fill: #fff"/>
<circle cx="859.9" cy="748.6" r="1.6" style="fill: #fff"/>
<circle cx="849.6" cy="748.4" r="1.6" style="fill: #fff"/>
<circle cx="840.7" cy="747.8" r="1.6" style="fill: #fff"/>
<circle cx="848" cy="741" r="1.6" style="fill: #fff"/>
<circle cx="856.2" cy="739.4" r="1.6" style="fill: #fff"/>
<circle cx="864.7" cy="741.4" r="1.6" style="fill: #fff"/>
<circle cx="868.3" cy="751.1" r="1.6" style="fill: #fff"/>
<circle cx="872.5" cy="760.6" r="1.6" style="fill: #fff"/>
<circle cx="879.2" cy="769.2" r="1.6" style="fill: #fff"/>
<circle cx="882.6" cy="777.5" r="1.5" style="fill: #fff"/>
<circle cx="889.7" cy="772.1" r="1.6" style="fill: #fff"/>
<circle cx="888.9" cy="764.3" r="1.6" style="fill: #fff"/>
<circle cx="897.4" cy="765.2" r="1.6" style="fill: #fff"/>
<circle cx="896" cy="757.3" r="1.6" style="fill: #fff"/>
<circle cx="904.7" cy="757.5" r="1.6" style="fill: #fff"/>
<circle cx="902" cy="749.8" r="1.6" style="fill: #fff"/>
<circle cx="910.7" cy="749.1" r="1.6" style="fill: #fff"/>
<circle cx="914.7" cy="759" r="1.6" style="fill: #fff"/>
<circle cx="918.9" cy="768.5" r="1.6" style="fill: #fff"/>
<circle cx="923" cy="778.1" r="1.6" style="fill: #fff"/>
<circle cx="928.3" cy="786.7" r="1.5" style="fill: #fff"/>
<circle cx="937.4" cy="786.1" r="1.5" style="fill: #fff"/>
<circle cx="932" cy="778.9" r="1.6" style="fill: #fff"/>
<circle cx="927.1" cy="770.2" r="1.6" style="fill: #fff"/>
<circle cx="923.2" cy="761" r="1.6" style="fill: #fff"/>
<circle cx="918.7" cy="752.1" r="1.6" style="fill: #fff"/>
</g>
</g>
<g class="squiggle-top">
<path class="sq-top" d="M403.3,245.7c-3.3.5-6.6-1.7-8.4-4.5s-2.6-6.2-3.5-9.4a67.9,67.9,0,0,0-8.5-18.2c-1.1-1.7-2.6-3.5-4.6-3.9s-3.8.6-5.4,1.7c-8.5,5.6-15,13.9-23,20.3-2,1.6-4.5,3.3-7,2.7s-4.5-3.6-5.6-6.4c-3.5-9-5.6-18.7-11.4-26.4a9.3,9.3,0,0,0-4.6-3.7c-2.6-.7-5.3.5-7.5,2-9.1,5.9-15,16-24.5,21.2a5.8,5.8,0,0,1-5.1.5,7.5,7.5,0,0,1-3-3.4,116.3,116.3,0,0,1-8.3-18.8,33.5,33.5,0,0,0-3.5-8c-1.6-2.4-4.2-4.4-7.1-4.6" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/>
<g class="dots-top">
<circle cx="389" cy="270.1" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 106.66, 650.38)" style="fill: #fff"/>
<circle cx="392.7" cy="263.2" r="1.5" transform="translate(117.1 647.4) rotate(-88.2)" style="fill: #fff"/>
<circle cx="382.4" cy="263.4" r="1.5" transform="translate(107.1 637.2) rotate(-88.2)" style="fill: #fff"/>
<circle cx="385.1" cy="255.6" r="1.5" transform="translate(117.4 632.4) rotate(-88.2)" style="fill: #fff"/>
<circle cx="377.8" cy="254" r="1.5" transform="translate(112 623.5) rotate(-88.2)" style="fill: #fff"/>
<circle cx="382.3" cy="245.6" r="1.4" transform="translate(124.6 619.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="374.4" cy="244.9" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 117.75, 611.44)" style="fill: #fff"/>
<circle cx="376.7" cy="236.4" r="1.5" transform="translate(128.5 605.5) rotate(-88.2)" style="fill: #fff"/>
<circle cx="367.8" cy="237.8" r="1.5" transform="translate(118.4 597.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="359.3" cy="242.3" r="1.5" transform="translate(105.7 593.7) rotate(-88.2)" style="fill: #fff"/>
<circle cx="351.6" cy="241" r="1.5" transform="translate(99.6 584.7) rotate(-88.2)" style="fill: #fff"/>
<circle cx="359.8" cy="233.6" r="1.5" transform="translate(114.8 585.8) rotate(-88.2)" style="fill: #fff"/>
<circle cx="369.2" cy="230.2" r="1.5" transform="translate(127.4 591.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="321.4" cy="220.9" r="1.5" transform="translate(90.4 535.2) rotate(-88.2)" style="fill: #fff"/>
<circle cx="326" cy="228.7" r="1.5" transform="translate(87 547.3) rotate(-88.2)" style="fill: #fff"/>
<circle cx="330.1" cy="238.2" r="1.5" transform="translate(81.5 560.5) rotate(-88.2)" style="fill: #fff"/>
<circle cx="334" cy="248" r="1.5" transform="translate(75.6 573.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="344" cy="248.5" r="1.5" transform="translate(84.8 584.4) rotate(-88.2)" style="fill: #fff"/>
<circle cx="352.6" cy="249.3" r="1.5" transform="translate(92.2 593.8) rotate(-88.2)" style="fill: #fff"/>
<circle cx="345.4" cy="255.7" r="1.5" transform="translate(78.8 592.8) rotate(-88.2)" style="fill: #fff"/>
<circle cx="337.3" cy="257" r="1.5" transform="translate(69.7 585.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="329.1" cy="254.8" r="1.5" transform="translate(64 575.6) rotate(-88.2)" style="fill: #fff"/>
<circle cx="325.9" cy="245.2" r="1.5" transform="translate(70.4 563.2) rotate(-88.2)" style="fill: #fff"/>
<circle cx="322.1" cy="235.9" r="1.5" transform="translate(76.1 550.4) rotate(-88.2)" style="fill: #fff"/>
<circle cx="315.9" cy="227.3" r="1.5" transform="translate(78.7 535.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="312.8" cy="219.2" r="1.5" transform="translate(83.8 524.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="305.8" cy="224.2" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 71.97, 522.7)" style="fill: #fff"/>
<circle cx="306.3" cy="231.9" r="1.5" transform="translate(64.9 530.7) rotate(-88.2)" style="fill: #fff"/>
<circle cx="298.1" cy="230.7" r="1.5" transform="translate(58 521.3) rotate(-88.2)" style="fill: #fff"/>
<circle cx="299.2" cy="238.4" r="1.5" transform="translate(51.4 529.9) rotate(-88.2)" style="fill: #fff"/>
<circle cx="290.7" cy="238" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 43.62, 520.99)" style="fill: #fff"/>
<circle cx="293.1" cy="245.5" r="1.5" transform="translate(38.4 530.7) rotate(-88.2)" style="fill: #fff"/>
<circle cx="284.6" cy="245.9" r="1.5" transform="translate(29.8 522.6) rotate(-88.2)" style="fill: #fff"/>
<circle cx="281.1" cy="236.2" r="1.5" transform="translate(36.1 509.7) rotate(-88.2)" style="fill: #fff"/>
<circle cx="277.3" cy="226.8" r="1.5" transform="translate(41.8 496.8) rotate(-88.2)" style="fill: #fff"/>
<circle cx="273.6" cy="217.4" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 47.66, 483.94)" style="fill: #fff"/>
<circle cx="268.7" cy="208.9" r="1.4" transform="translate(51.4 470.8) rotate(-88.2)" style="fill: #fff"/>
<circle cx="259.8" cy="209.2" r="1.5" transform="translate(42.5 462.2) rotate(-88.2)" style="fill: #fff"/>
<circle cx="264.8" cy="216.4" r="1.5" transform="translate(40.1 474.2) rotate(-88.2)" style="fill: #fff"/>
<circle cx="269.4" cy="224.9" r="1.5" transform="translate(36 487) rotate(-88.2)" style="fill: #fff"/>
<circle cx="272.8" cy="234" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 30.27, 499.33)" style="fill: #fff"/>
<circle cx="277" cy="242.8" r="1.5" transform="translate(25.5 512) rotate(-88.2)" style="fill: #fff"/>
</g>
</g>
</g>
<g class="hide grow-crosshairs">
<path d="M983.1,582.2h-9v-9a5.9,5.9,0,0,0-11.9,0v9h-9a5.9,5.9,0,1,0,0,11.9h9v9a5.9,5.9,0,0,0,11.9,0v-9h9a5.9,5.9,0,0,0,0-11.9Z" style="fill: #f62c72"/>
<path d="M997,452.5h-6.2v-6.2a4.1,4.1,0,0,0-8.2,0v6.2h-6.2a4.1,4.1,0,0,0,0,8.2h6.2v6.2a4.1,4.1,0,1,0,8.2,0v-6.2H997a4.1,4.1,0,1,0,0-8.2Z" style="fill: #fff"/>
<path d="M382.4,704.4h-5.6v-5.6a3.7,3.7,0,0,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,0,0,0-7.3Z" style="fill: #fff"/>
<path d="M363.3,137.4h-5.6v-5.6a3.7,3.7,0,1,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,1,0,0-7.3Z" style="fill: #fff"/>
</g>
<g class="hide left-lines">
<line x1="381.1" y1="507.1" x2="272.1" y2="598" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="384.1" y1="521.1" x2="275.1" y2="611.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="387.2" y1="535.1" x2="278.2" y2="625.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="390.2" y1="549.1" x2="281.2" y2="639.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="393.2" y1="563.1" x2="284.2" y2="653.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="396.3" y1="577.1" x2="287.3" y2="667.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="399.3" y1="591" x2="290.3" y2="681.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="402.3" y1="605" x2="293.3" y2="695.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
<line x1="405.4" y1="619" x2="296.4" y2="709.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
</g>
<g class="hide top-triangles">
<polygon points="593 168.6 659.5 244.5 497.1 255.2 593 168.6" style="fill: #f62c72"/>
<polyline points="659.5 234.5 657.3 213.9 590.7 138 494.8 224.6 497.1 245.2 497.1 245.2 593 158.6 659.5 234.5" style="fill: #ffe029"/>
</g>
<g class="hide words">
<text transform="translate(471.5 329.1) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">P</text>
<text transform="translate(486.4 328.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">A</text>
<text transform="translate(502.6 327.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">G</text>
<text transform="matrix(1, -0.05, 0.05, 1, 521.22, 326.59)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">E</text>
<text transform="matrix(1, -0.05, 0.05, 1, 535.73, 325.85)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text>
<text transform="matrix(1, -0.05, 0.05, 1, 544, 325.43)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text>
<text transform="translate(562.7 324.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text>
<text transform="translate(582.1 323.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">T</text>
<text transform="matrix(1, -0.05, 0.05, 1, 595.15, 322.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text>
<text transform="translate(603.4 322.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">F</text>
<text transform="translate(617.5 321.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text>
<text transform="translate(636.6 320.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">U</text>
<text transform="translate(655.1 319.8) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text>
<text transform="matrix(1, -0.05, 0.05, 1, 673.8, 318.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">D</text>
<text transform="translate(742 682.9)" style="font-size: 60px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">GO <tspan x="69.1" y="0" style="letter-spacing: 0.0029296875em">B</tspan><tspan x="94" y="0" style="letter-spacing: -0.0068359375em">A</tspan><tspan x="118" y="0">CK</tspan></text>
<text transform="translate(479.2 549.5)" style="font-size: 180px;fill: #032c3f;font-family: Futura-CondensedExtraBold, Futura;font-weight: 700">4<tspan x="108.3" y="0" style="letter-spacing: -0.0009765625em">0</tspan><tspan x="216.4" y="0">4</tspan></text>
</g>
</svg>
</div>
Raw
script.js
var tl = new TimelineMax(),
split404 = new SplitText(".textB", {type:"chars"}),
splitPage = new SplitText(".textA", {type:"chars"}),
splitBack = new SplitText(".textC", {type:"chars"});
split404.split({type:"chars"});
splitPage.split({type:"chars"});
splitBack.split({type:"chars"});
tl.set(".hide", {opacity: 0})
.set(".box", {scale: 0, transformOrigin: "50% 50%"})
.set(".hide.big-white-circle", {scale: 0, transformOrigin: "50% 50%"})
.set(".hide.bottom-triangles", {scale: 0, rotation: 720, transformOrigin: "50% 50%"})
.to(".box", 2, {scale: 1, transformOrigin: "50% 50%", ease: Elastic.easeOut.config(1, 0.5)})
.staggerFrom(split404.chars, 1, {opacity: 0, scaleX: 0, ease: Power4.easeOut}, 0.05, "-=1")
.staggerTo(split404.chars, 1, {opacity: 1, scaleX: 1, ease: Power4.easeOut}, 0.05, "-=1")
.staggerFrom(splitPage.chars, 1, {opacity: 0, scaleX: 0, ease: Power4.easeOut}, 0.05, "-=1")
.staggerTo(splitPage.chars, 1, {opacity: 1, scaleX: 1, ease: Power4.easeOut}, 0.05, "-=1")
.staggerFrom(splitBack.chars, 1, {opacity: 0, scaleX: 0, ease: Power4.easeOut}, 0.05, "-=1.5")
.staggerTo(splitBack.chars, 1, {opacity: 1, scaleX: 1, ease: Power4.easeOut}, 0.05, "-=1.5")
.to(".hide.big-white-circle", 2, {scale: 1, opacity: 1, ease: Elastic.easeOut.config(1, 0.3)}, "-=1.45")
.to(".hide.spin-circles", 2, {opacity: 1}, "-=1.45")
.to(".hide.tri-dots", 1, {opacity: 1}, "-=1.5")
.to(".hide.bottom-triangles", 2, {opacity: 1, scale: 1, rotation: 0}, "-=1.5")
.to(".start-tri", 1, {morphSVG:".end-tri"}, "-=1.5")
// .timeScale();
// .seek();
// create repeating timeline for spinning circles
var tlSpin = new TimelineMax({repeat: -1});
tlSpin.set('.hide.spin-circles', {rotation: 0, transformOrigin: "50% 50%"})
.to('.hide.spin-circles', 3.5, {rotation: 360, ease:Linear.easeNone})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
Raw
style.css
body {
height: 100vh;
background: #88DCD5;
display: grid;
font-family: 'Roboto Condensed', sans-serif;
}
.container {
position: relative;
height: 600px;
width: 750px;
margin: auto;
}
.container svg {
height: 100%;
}
p, a {
margin: 0;
position: absolute;
text-decoration: none;
text-transform: uppercase;
color: #032C3F;
font-size: 24px;
}
.textA {
top: 169px;
left: 257px;
transform: rotate(-3deg);
}
.textB {
font-weight: 700;
font-size: 135px;
top: 209px;
left: 273px;
transform: rotate(-2deg);
}
.textC {
top: 370px;
left: 428px;
font-size: 30px;
transform: rotate(1deg);
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment