cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               <svg class="Codepen-Editor" width="75%" height="75%" viewBox="0 0 842 596" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path fill="#00abff" d="M235.4 71H842v524.2H235.3z" class="Canvas-Background"/><path class="Column-Drag" fill="#49494b" d="M211.3 67.8H236v527.7h-24.7z"/><g class="Col.-1"><path class="Col.-1-Editor" fill="#1d1f20" d="M0 71.3h223.7v175H0z"/><path fill="#1a1c1d" d="M0 71.3h223.7v36.3H0z"/><path d="M217 84c0-1-.6-2.3-1.4-3-.8-1-2-1.4-3-1.4h-14.7c-1.2 0-2.4.5-3.2 1.3-.8.7-1.3 2-1.3 3V95c0 1.2.5 2.3 1.3 3 .8 1 2 1.4 3 1.4h14.7c1.2 0 2.3-.5 3-1.3 1-1 1.4-2 1.4-3.2V84z" fill="#343436"/><g fill="#fff"><path d="M205.8 92.6c.3-.5.2-1 0-1.5-1.2-1-3.4-3.6-4.5-4.8 0-.2-.3-.3-.6-.3-.2 0-.4 0-.5.2-.3.5-.3 1 0 1.5l4.4 5 .6.2c.2 0 .4-.2.5-.4z"/><path d="M204.7 92.6c-.4-.5-.3-1 0-1.5l4.4-4.8c.2-.2.4-.3.7-.3.2 0 .4 0 .5.2.3.5.3 1 0 1.5l-4.4 5-.6.2c-.2 0-.4-.2-.5-.4z"/></g><path d="M31 84c0-1-.5-2.3-1.3-3-.8-1-2-1.4-3-1.4H12c-1 0-2.3.5-3 1.3-1 .7-1.4 2-1.4 3V95c0 1.2.5 2.3 1.3 3 .7 1 2 1.4 3 1.4h14.6c1.2 0 2.3-.5 3-1.3 1-1 1.4-2 1.4-3.2V84z" fill="#343436"/><path d="M20 84h-1.3l-.2 1c-.4 0-.8 0-1 .3l-.8-.6-1 .7.4.8-.6 1h-1l-.3 1.2 1 .4c-.2.4-.2.8 0 1.2l-1 .5.5 1.2h1c0 .3.3.6.6 1l-.3.7 1 .7.7-.4 1 .3.3.8H20v-1c.5 0 1 0 1.2-.2l.7.5c.2 0 .6-.3 1-.6l-.5-.8c.3-.3.6-.6.7-1h1l.3-1-.8-.6v-1.2l.8-.4c0-.5-.2-1-.4-1.2h-.8c0-.3-.4-.7-.7-1l.4-.8-1-.7-.8.6-1-.4-.3-1zm-.7 3.3c1 0 2 1 2 2 0 1.3-1 2.2-2 2.2s-2-1-2-2c0-1.2 1-2.2 2-2.2z" fill="#fff"/><text x="37.1" y="97.3" font-family="'Lato-Heavy', 'Lato', sans-serif" font-weight="800" font-size="21.7" fill="#ccc">H<tspan x="54.4 67.9 89.1" y="97.3 97.3 97.3">TML</tspan></text></g><g class="Col.-2"><path class="Col.-2-Editor" fill="#1d1f20" d="M0 246.2h223.7v175H0z"/><path fill="#1a1c1d" d="M0 246.2h223.7v36.3H0z"/><path d="M217 259c0-1.2-.6-2.3-1.4-3-.8-1-2-1.4-3-1.4h-14.7c-1.2 0-2.4.4-3.2 1.3-.8.7-1.3 1.8-1.3 3v10.7c0 1.2.5 2.3 1.3 3.2.8.7 2 1.2 3 1.2h14.7c1.2 0 2.3-.5 3-1.3 1-1 1.4-2 1.4-3.3V259z" fill="#343436"/><g fill="#fff"><path d="M205.8 267.6c.3-.5.2-1 0-1.5-1.2-1-3.4-3.6-4.5-5h-.6c-.2 0-.4 0-.5.2-.3.5-.3 1 0 1.5l4.4 5 .6.2c.2 0 .4-.3.5-.4z"/><path d="M204.7 267.6c-.4-.5-.3-1 0-1.5l4.4-5h.7c.2 0 .4 0 .5.2.3.5.3 1 0 1.5l-4.4 5-.6.2c-.2 0-.4-.3-.5-.4z"/></g><path d="M31 259c0-1.2-.5-2.3-1.3-3-.8-1-2-1.4-3-1.4H12c-1 0-2.3.4-3 1.3-1 .7-1.4 1.8-1.4 3v10.7c0 1.2.5 2.3 1.3 3.2.7.7 2 1.2 3 1.2h14.6c1.2 0 2.3-.5 3-1.3 1-1 1.4-2 1.4-3.3V259z" fill="#343436"/><path d="M20 259h-1.3l-.2 1c-.4 0-.8 0-1 .2l-.8-.5-1 .7.4.8-.6 1h-1l-.3 1 1 .6c-.2.4-.2.8 0 1.2l-1 .4.5 1.2h1c0 .3.3.7.6 1l-.3.8 1 .7.7-.5 1 .4.3.8H20v-1c.5 0 1 0 1.2-.3l.7.6c.2 0 .6-.4 1-.6l-.5-.8.7-1h1l.3-1.2-.8-.4v-1.2l.8-.5c0-.4-.2-.8-.4-1.2l-.8.2c0-.4-.4-.7-.7-1l.4-.8-1-.7-.8.5-1-.3-.3-1zm-.7 3.3c1 0 2 1 2 2 0 1.2-1 2.2-2 2.2s-2-1-2-2c0-1.3 1-2.2 2-2.2z" fill="#fff"/><text x="37.1" y="272.2" font-family="'Lato-Heavy', 'Lato', sans-serif" font-weight="800" font-size="21.7" fill="#ccc">C<tspan x="51.8 64.1" y="272.2 272.2">SS</tspan></text></g><g class="Col.-3"><path class="Col.-3-Editor" fill="#1d1f20" d="M0 420.3h223.7v175H0z"/><path fill="#1a1c1d" d="M0 420.3h223.7v36.3H0z"/><path d="M217 433c0-1-.6-2.2-1.4-3-.8-1-2-1.3-3-1.3h-14.7c-1.2 0-2.4.4-3.2 1.3-.8.8-1.3 2-1.3 3V444c0 1.2.5 2.3 1.3 3 .8 1 2 1.4 3 1.4h14.7c1.2 0 2.3-.4 3-1.3 1-1 1.4-2 1.4-3.2V433z" fill="#343436"/><g fill="#fff"><path d="M205.8 441.6c.3-.4.2-1 0-1.4l-4.5-5c0-.2-.3-.3-.6-.2-.2 0-.4 0-.5.3-.3.4-.3 1 0 1.4 1 1.3 3.3 3.8 4.4 5 0 .2.4.3.6.2.2 0 .4-.2.5-.4z"/><path d="M204.7 441.6c-.4-.4-.3-1 0-1.4 1-1.3 3.3-3.8 4.4-5 .2-.2.4-.3.7-.2.2 0 .4 0 .5.3.3.4.3 1 0 1.4-1 1.3-3.3 3.8-4.4 5 0 .2-.4.3-.6.2-.2 0-.4-.2-.5-.4z"/></g><path d="M31 433c0-1-.5-2.2-1.3-3-.8-1-2-1.3-3-1.3H12c-1 0-2.3.4-3 1.3-1 .8-1.4 2-1.4 3V444c0 1.2.5 2.3 1.3 3 .7 1 2 1.4 3 1.4h14.6c1.2 0 2.3-.4 3-1.3 1-1 1.4-2 1.4-3.2V433z" fill="#343436"/><path d="M20 433h-1.3l-.2 1c-.4 0-.8 0-1 .3l-.8-.6-1 .8.4.8-.6 1h-1l-.3 1 1 .5c-.2.4-.2 1 0 1.3l-1 .5.5 1.2h1c0 .3.3.6.6 1l-.3.7 1 .8.7-.6 1 .4.3.8H20v-.8c.5 0 1-.2 1.2-.4l.7.6 1-.8-.5-.8c.3-.3.6-.6.7-1h1l.3-1-.8-.5V438l.8-.4c0-.4-.2-.8-.4-1.2h-.8c0-.3-.4-.6-.7-1l.4-.7-1-.8-.8.6-1-.4-.3-1zm-.7 3.4c1 0 2 1 2 2 0 1.2-1 2-2 2s-2-.8-2-2c0-1 1-2 2-2z" fill="#fff"/><text x="37.1" y="446.3" font-family="'Lato-Heavy', 'Lato', sans-serif" font-weight="800" font-size="21.7" fill="#ccc">J<tspan x="46.7" y="446.3">S</tspan></text></g><g class="Header"><g class="Header-Bar"><path d="M0 0h842v71H0z"/><path fill="#343436" d="M0 57.4h842V71H0z"/><path d="M0 67.8h236v3.5H0z"/></g><g class="Pro-Button"><path d="M251.3 39.3c0-1-.4-2-1-2.7-1-.7-1.8-1-2.8-1h-26c-1 0-2 .3-2.7 1-.7.8-1 1.7-1 2.7v8c0 1 .3 2 1 2.7.8.7 1.7 1 2.7 1h26c1 0 2-.3 2.7-1 .7-.7 1-1.7 1-2.7v-8z" fill="#fcd000"/><text x="221.6" y="47.8" font-family="'Lato-Medium', 'Lato', sans-serif" font-weight="500" font-size="12.5" fill="#1a1c1d">PRO</text><g class="Pen-Title"><text x="84" y="201" font-family="'Lato-Regular', 'Lato', sans-serif" font-size="58.3" fill="#49494b" transform="scale(.24)">A<tspan x="121.5" y="201"> </tspan>PEN B<tspan x="301" y="201">Y</tspan></text><text x="354.6" y="201" font-family="'Lato-Bold', 'Lato', sans-serif" font-weight="700" font-size="67.1" fill="#fff" transform="scale(.24)">M<tspan x="417.5 434.5 468.6" y="201 201 201">ike</tspan> M<tspan x="583.3" y="201">a</tspan>ngialar<tspan x="816.4" y="201">d</tspan>i</text><text x="20.2" y="27.8" font-family="'Lato-Medium', 'Lato', sans-serif" font-weight="500" font-size="16.1" fill="#ccc">C<tspan x="30.7" y="27.8">o</tspan>depen E<tspan x="97.1" y="27.8">d</tspan>itor<tspan x="130.5" y="27.8"> </tspan>| S<tspan x="151.3 161.9" y="27.8 27.8">VG</tspan> Example #3</text></g></g><a href="https://codepen.io/mikemang/"><g class="Avatar-Button"><path d="M832.6 16c0-3.2-2.5-5.7-5.6-5.7h-31c-3 0-5.4 2.5-5.4 5.6v26.3c0 3 2.5 5.6 5.5 5.6h31c3 0 5.6-2.6 5.6-5.7V16z" fill="#8ac85c" stroke="#000" stroke-width=".6"/><text x="797.9" y="39.6" font-family="'Lato-Bold', 'Lato', sans-serif" font-weight="700" font-size="28.9" fill="#fff">M</text></g></a><a href="https://codepen.io/mikemang/details/JWwbxm/"><g class="Change-View-Button"><path d="M780.5 16c0-3.2-2.5-5.7-5.6-5.7H686c-3 0-5.6 2.5-5.6 5.6v26.3c0 3 2.5 5.6 5.6 5.6H775c3 0 5.5-2.6 5.5-5.7V16z" fill="#343436"/><text x="708.1" y="32.3" font-family="'Lato-Regular', 'Lato', sans-serif" font-size="11" fill="#fff">Change <tspan x="747.1" y="32.3">V</tspan>iew</text><g class="Eye-Browser-Icon"><path fill="#ccc" d="M689.8 22.6H704v13H690z"/><path fill="#49494b" d="M691 24.7H703v9.8H691z"/><g><path d="M693.7 28.3c2-1.4 4.5-1.4 6.4 0 .3 0 .5.3.7.4l.2.5-.3.4c-.2 0-.4.3-.6.4-1.8 1.4-4.4 1.4-6.3 0-.2 0-.4-.3-.6-.4v-.4-.5c.3 0 .5-.3.7-.4z" fill="#ccc"/><ellipse cx="696.9" cy="29.2" rx="1.5" ry="1.5" fill="#49494b"/></g></g></g></a><g class="Settings-Buttons"><path d="M671 16c0-1.6-.7-3-1.7-4s-2.5-1.7-4-1.7H589c-1.6 0-3 .6-4 1.7-1 1-1.7 2.4-1.7 4v26.3c0 1.5.6 3 1.7 4 1 1 2.4 1.6 4 1.6h76.3c1.5 0 3-.7 4-1.7s1.6-2.5 1.6-4V16z" fill="#343436"/><path d="M636 32.5h-1v-4.7h-2.8V31c0 .3 0 .5.2.6l.4.2h.6v-.2h.4l.3.5c-.2.3-.4.4-.7.5h-.7c-.4 0-.8 0-1-.3-.2-.2-.4-.6-.4-1v-3.4h-2.6V31c0 .3 0 .5.2.6l.5.2h.4c0-.2 0-.2.2-.2l.4.5c-.2.3-.4.4-.6.5h-.8c-.4 0-.7 0-1-.3-.2-.2-.3-.6-.3-1v-3.4h-.7c-.2 0-.2-.2-.2-.3v-.3l1-.2v-1.7h.2c0-.2 0-.2.2-.2h.4v2h2.7l.2-1.7c0-.2.2-.2.2-.2h.5v2h3.8v5.5zm.2-7.3v.2l-.2.2s-.2 0-.3.2h-.2-.3l-.2-.2-.2-.2v-.2-.3c0-.2 0-.3.2-.3 0 0 0-.2.2-.2h.6l.2.2v.2c.2 0 .2 0 .2.2z" fill="#fff"/><text x="614.9" y="32.5" font-family="'Lato-Regular', 'Lato', sans-serif" font-size="11" fill="#fff">Se<tspan x="636.8" y="32.5">n</tspan>gs</text><path d="M607 23.7H606l-.2 1c-.4 0-.7 0-1 .3l-.7-.6c-.5.2-.8.4-1 .7l.2 1c-.3.2-.5.6-.7 1l-.8-.2-.4 1.3.7.5v1.2l-.7.5c0 .4.2.8.4 1.2h.8l.7 1-.3.7c.2.4.5.6 1 .8l.5-.5c.4 0 .7.3 1 .3l.3 1h1.3l.2-1 1.2-.3.6.5 1-.7-.3-.7.7-1h.8l.4-1-.7-.6v-1.2l.6-.4c0-.4-.2-.8-.4-1.2h-.8l-.7-1 .3-.7-1-.6-.6.6-1.2-.4v-1zm-.6 3.3c1.2 0 2 1 2 2 0 1.3-.8 2.2-2 2.2-1 0-2-1-2-2 0-1.2 1-2.2 2-2.2z" fill="#ccc"/></g><g class="Pencil-Icon" fill="#ccc"><path d="M265.7 24.7l5-6.3 2.5 2-5 6.3.2-1.5-1.5.5.2-1.5-1.5.5zM265 28l.5-3 2.3 2-2.8 1zM273.4 20c.6-.6.5-1.5-.2-2-.7-.6-1.7-.5-2.2.2l1.2 1 1.2 1z"/></g></g><g class="Canvas-Left"><path fill="#ebf3fe" d="M310.3 257h106v112h-106z"/><path fill="#d8e8fd" d="M310.3 257h4v112h-4z"/><g class="Top"><path fill="#eed2a0" d="M345.8 249.7h35v7.2h-35zM349.2 244h28.2v5.7h-28.2z"/><path fill="#ebca92" d="M345.8 249.7h4v7.2h-4zM349.2 244h3.2v5.7h-3.2z"/><path fill="#eed2a0" d="M360.2 228.5h6V244h-6z"/><path fill="#ebca92" d="M360.2 228.5h1.6V244h-1.6z"/></g><g class="Base"><path fill="#eed2a0" d="M314.2 382.3h16.6v38.3h-16.6zM398.8 382.3h16.6v38.3h-16.6z"/><path fill="#ebca92" d="M314.2 382.3h8.3v38.3h-8.3zM398.8 382.3h8.3v38.3H399z"/><path fill="#eed2a0" d="M298 359.2h136.5v23H298z"/><path fill="#ebca92" d="M298 359.2h45.5v23H298z"/></g><path class="Paint-Stripe" d="M353.6 257V319H373V257h-19.4z" fill="#ec5549"/><g class="Paint-Roller-Left"><path fill="#666" d="M382 321h5v.8h-5zM363.7 333.3c-.5 0-1 .4-1 1v10h1v-11zM387 334.2c.4 0 .8-.4.8-1V322c0-.5-.4-1-.8-1v13.2z"/><path d="M387 334.2c.4 0 .8-.4.8-1h-24c-.6 0-1 .5-1 1H387z" fill="#666"/><g fill="#333"><path d="M372 342.2l-.4-.7c-.2-.2-.5-.3-.8-.3h-15c-.4 0-.7 0-1 .3l-.2.7c0 .3 0 .6.3.8 0 .2.4.3.7.3h15c.4 0 .7 0 1-.3l.2-.8z"/><path d="M365.7 342.4h-5v9.4c0 .6.4 1.2.8 1.7.5.4 1 .7 1.8.7.6 0 1.2-.3 1.7-.7.4-.5.7-1 .7-1.7v-9.4z"/></g><path d="M382 324.5h-37.4c0 1.4 1 2.4 2.4 2.4h32.6c1.3 0 2.3-1 2.3-2.5z" fill="#eb4537"/><path d="M382 322.2l-.2-.2h-37-.2V324.5H382V322z" fill="#ec5549"/><path d="M382 319.8c0-.2-.2-.2-.2-.2h-37-.2V322H382v-2.2z" fill="#ee665b"/><path d="M382 317.3h-37.2-.2v2.3H382v-.2-2z" fill="#f0776d"/><path d="M382 317c0-1.2-1-2.3-2.4-2.3H347c-1.4 0-2.4 1-2.4 2.4v.2H382z" fill="#f2887f"/></g></g><g class="Canvas-Right"><path fill="#ebf3fe" d="M670.7 257h106v112.3h-106z"/><path fill="#d8e8fd" d="M670.7 257h4v112.3h-4z"/><g class="Top1"><path fill="#eed2a0" d="M706.2 250h35v7h-35zM709.5 244h28.2v6h-28.2z"/><path fill="#ebca92" d="M706.2 250h4v7h-4zM709.5 244h3.2v6h-3.2z"/><path fill="#eed2a0" d="M720.6 228.8h6v15.4h-6z"/><path fill="#ebca92" d="M720.6 228.8h1.6v15.4h-1.6z"/></g><g class="Base1"><path fill="#eed2a0" d="M674.6 382.5h16.6v38.3h-16.6zM759.2 382.5h16.6v38.3h-16.6z"/><path fill="#ebca92" d="M674.6 382.5h8.3v38.3h-8.4zM759.2 382.5h8.3v38.3h-8.3z"/><path fill="#eed2a0" d="M658.5 359.4H795v23H658.4z"/><path fill="#ebca92" d="M658.5 359.4H704v23h-45.5z"/></g><path class="Paint-Stripe2" d="M714 257v62.5h19.3V257H714z" fill="#1abc9c"/><g class="Paint-Roller-Right"><path fill="#666" d="M742.4 321.3h5v.7h-5zM724 333.6c-.4 0-.8.4-.8.8v10h1v-10.8zM747.4 334.4c.4 0 .8-.3.8-.8v-11.4c0-.5-.4-1-.8-1v13.2z"/><path d="M747.4 334.4c.4 0 .8-.3.8-.8h-24c-.6 0-1 .4-1 .8h24.2z" fill="#666"/><path d="M732.3 342.5c0-.3 0-.6-.3-.7-.2-.2-.5-.3-.8-.3h-15c-.4 0-.7 0-1 .3l-.2.7c0 .3 0 .5.3.7.2.2.5.3.8.3h15.2c.3 0 .6 0 .8-.3.2-.2.3-.4.3-.7z" fill="#333"/><path d="M726 342.7h-4.8v9.3c0 .6.3 1.3.7 1.7.4.5 1 .7 1.6.7.7 0 1.3-.2 1.7-.7.5-.4.8-1 .8-1.7v-9.3z" fill="#333"/><path d="M742.3 324.8H705c0 1.3 1 2.4 2.3 2.4H740c1.3 0 2.3-1 2.3-2.4z" fill="#1abc9c"/><path d="M742.3 322.5v-.2H705V324.7h37.2v-2.2z" fill="#2ec2a5"/><path d="M742.3 320H705v2.2h37.2V320z" fill="#43c8ae"/><path d="M742.3 317.6v-.2H705V320h37.2v-2.2z" fill="#58ceb7"/><path d="M742.3 317.4c0-1.4-1-2.4-2.4-2.4h-32.7c-1.3 0-2.4 1-2.4 2.4h37.3z" fill="#6dd4c0"/></g></g><g class="Canvas-Middle"><path fill="#ebf3fe" d="M477.3 211h136v144h-136z"/><path fill="#d8e8fd" d="M477.3 211h5v144h-5z"/><g class="Top2"><path fill="#eed2a0" d="M523 201.6h44.6v9.2H523z"/><path fill="#eed2a0" d="M527.2 194.2h36.2v7.5h-36.2z"/><path fill="#ebca92" d="M523 201.6h5v9.2h-5z"/><path fill="#ebca92" d="M527.2 194.2h4v7.5h-4z"/><path fill="#eed2a0" d="M541.3 174.5h7.8v19.7h-7.7z"/><path fill="#ebca92" d="M541.3 174.5h2v19.7h-2z"/></g><g class="Base2"><path fill="#eed2a0" d="M482.4 371.7h21.3v49h-21.3zM591 371.7H612v49H591z"/><path fill="#ebca92" d="M482.4 371.7H493v49h-10.6zM591 371.7h10.6v49H591z"/><path fill="#eed2a0" d="M461.6 342h175V372h-175z"/><path fill="#ebca92" d="M461.6 342h58.2V372h-58.2z"/></g><g class="Cat"><g class="Ears" fill="#fcaa4b"><path d="M517 247.8c.2-1 1-2 2-2.5 1-.3 2 0 3 .8 3.7 4.5 9 10.6 12.3 14.2.6.7.8 1.6.6 2.5-.4.8-1 1.5-1.8 1.8l-12.8 4.7c-.8.3-1.8.2-2.5-.3-.8-.6-1.2-1.5-1.2-2.4l.3-18.8zM578 247.8c-.2-1-1-2-2-2.5-1-.3-2 0-2.8.8l-12.5 14.2c-.5.7-.8 1.6-.5 2.5.2.8.8 1.5 1.6 1.8l12.8 4.7c1 .3 1.8.2 2.5-.3.8-.6 1.3-1.5 1.2-2.4l-.3-18.8z"/></g><g class="Head" fill="#ffbc55"><path d="M588.8 287.2c0-8.8-3.5-17.3-9.8-23.5-6.2-6.2-14.6-9.7-23.4-9.7h-13c-8.7 0-17 3.5-23.3 9.7-6.2 6.2-9.7 14.7-9.7 23.5 0 13.5 11 24.5 24.5 24.5h30.2c13.6 0 24.6-11 24.6-24.5z"/><path d="M582.4 288c0-7.8-3-15.3-8.6-20.8-5.5-5.5-13-8.6-20.8-8.6h-7.7c-7.8 0-15.3 3-20.8 8.6-5.5 5.5-8.6 13-8.6 20.8 0 5 2 10 5.5 13.5C525 305 530 307 535 307h28.3c5 0 10-2 13.5-5.5 3.6-3.6 5.6-8.4 5.6-13.5z"/></g><g class="Eyes" fill="#222e34"><ellipse cx="536.2" cy="276.7" rx="3.1" ry="3.2"/><ellipse cx="562.1" cy="276.7" rx="3.1" ry="3.2"/></g><path class="Nose" d="M542.4 284.7c0 3.4 3 6 6.8 6 3.7 0 6.8-2.6 6.8-6h-13.6z" fill="#f2887f"/><g class="Mouth" fill="#fddaa6"><path d="M546.5 293.5c0 3.6-4.2 6.4-9.4 6.4-4.4 0-8-2.2-9-5-.2-.3-.2-.7 0-1 .3-.3.6-.5 1-.5.5 0 1 .4 1.2 1 .6 2 3.5 3.5 7 3.5 3.8 0 7-2 7-4.5h2.3zM551.8 293.5c0 3.6 4.2 6.4 9.4 6.4 4.5 0 8.2-2.2 9.2-5v-1c-.3-.3-.7-.5-1-.5-.6 0-1 .4-1.2 1-.7 2-3.6 3.5-7 3.5-4 0-7-2-7-4.5h-2.4z"/></g><g class="Whiskers" fill="#fcaa4b"><path d="M527.2 280.7c0-.4-.3-.7-.7-.7h-12.2c-.4 0-.7.3-.7.7v1.5c0 .4.3.7.7.7h12.2c.4 0 .7-.4.7-.8v-1.5zM582.4 280.7c0-.4-.3-.7-.7-.7h-12.2c-.4 0-.7.3-.7.7v1.5c0 .4.3.7.7.7h12.2c.4 0 .7-.4.7-.8v-1.5zM527.2 286.2c0-.4-.3-.8-.7-.8h-12.2c-.4 0-.7.4-.7.8v1.4c0 .4.3.7.7.7h12.2c.4 0 .7-.3.7-.7v-1.4zM582.4 286.2c0-.4-.3-.8-.7-.8h-12.2c-.4 0-.7.4-.7.8v1.4c0 .4.3.7.7.7h12.2c.4 0 .7-.3.7-.7v-1.4z"/></g></g></g><g class="HTML-Green-Lines" fill="#b5bc67"><path class="HGL1" d="M13.8 116h85.6v8.5H13.8z"/><path class="HGL3" d="M90.8 172h114v8.6h-114z"/><path class="HGL2" d="M124.4 145.6H210v8.5h-85.6z"/><path class="HGL4" d="M124.4 221.5H210v8.5h-85.6z"/></g><g class="CSS-Green-Lines" fill="#b5bc67"><path class="CGL1" d="M100.2 297.6h103v8h-103z"/><path class="CGL3" d="M20.5 350H72v7.8H20.5z"/><path class="CGL2" d="M20.5 325.2h112.8v8H20.5z"/><path class="CGL4" d="M20.5 396H87v7.8H20.5z"/><path class="CGL5" d="M108 396H203v7.8H108z"/></g><g class="JS-Green-Lines" fill="#b5bc67"><path class="JGL4" d="M20.5 569.5H81v8H20.5z"/><path class="JGL3" d="M132 542H203v7.8H132z"/><path class="JGL1" d="M136.7 471.2h66.5v8h-66.5z"/><path class="JGL2" d="M20.5 517.2H132v8H20.4z"/></g><g class="HTML-Purple-Lines" fill="#ae94b1"><path class="HPL2" d="M13.8 145.6H116v8.5H14z"/><path class="HPL1" d="M107.6 116H210v8.5H107.5z"/><path class="HPL3" d="M13.8 198H116v8.6H14z"/></g><g class="CSS-Purple-Lines" fill="#ae94b1"><path class="CPL2" d="M148 325.2h55.2v8H148z"/><path class="CPL1" d="M20.5 297.6h71.3v8H20.5z"/><path class="CPL3" d="M122 372.5h81.2v8h-81z"/></g><g class="JS-Yellow-Lines" fill="#e8a939"><path class="JYL3" d="M20.5 542h95.3v7.8H20.5z"/><path class="JYL1" d="M20.5 471.2h95.3v8H20.5z"/><path class="JYL2" d="M117.6 494.6h85.6v8h-85.6z"/></g><g class="JS-Purple-Lines" fill="#ae94b1"><path class="JPL3" d="M90 569.5h113.2v8h-113z"/><path class="JPL1" d="M20.5 494.6h81v8h-81z"/><path class="JPL2" d="M151.7 517.2h51.5v8h-51.5z"/></g><g class="HTML-Yellow-Lines" fill="#e8a939"><path class="HYL1" d="M13.8 172H83v8.6H13.8z"/><path class="HYL3" d="M13.8 221.8H116v8.5H14z"/><path class="HYL2" d="M124.4 197.2h80.3v8.5h-80.3z"/></g><g class="CSS-Yellow-Lines" fill="#e8a939"><path class="CYL1" d="M91.8 350h111.4v7.8H91.8z"/><path class="CYL2" d="M20.5 372.5H106v8H20.6z"/></g></svg>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
body{
 background-color: #EED2A0;
}
.Codepen-Editor{
  position: relative;
  display: block;
  margin: auto;
  margin-top: 3%;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
}
            
          
!
            
              var timeline = new TimelineMax({repeat: -1, repeatDelay: 3});

//if waiting --> invisible
timeline.set(".HTML-Green-Lines", {visibility: "hidden"})

timeline.set(".HTML-Purple-Lines", {visibility: "hidden"})

timeline.set(".HTML-Yellow-Lines", {visibility: "hidden"})

timeline.set(".CSS-Green-Lines", {visibility: "hidden"})

timeline.set(".CSS-Purple-Lines", {visibility: "hidden"})

timeline.set(".CSS-Yellow-Lines", {visibility: "hidden"})

timeline.set(".JS-Green-Lines", {visibility: "hidden"})

timeline.set(".JS-Purple-Lines", {visibility: "hidden"})

timeline.set(".JS-Yellow-Lines", {visibility: "hidden"})

timeline.set(".Canvas-Background", {fill: "#ffffff"})

timeline.set(".Canvas-Left", {visibility: "hidden"})

timeline.set(".Canvas-Right", {visibility: "hidden"})

timeline.set(".Canvas-Middle", {visibility: "hidden"})

timeline.set(".Cat", {visibility: "hidden"})

//Start Animation

//HTML Editor
timeline.set(".HTML-Green-Lines", {visibility: "visible"})

timeline.fromTo('.HTML-Green-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"})

timeline.set(".HTML-Purple-Lines", {visibility: "visible"})

timeline.fromTo('.HTML-Purple-Lines', 1, {scaleX: 0.0, transformOrigin: "right"}, {scale: 1, transformOrigin: "right"})

timeline.set(".HTML-Yellow-Lines", {visibility: "visible"})

timeline.fromTo('.HTML-Yellow-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"})

//CSS Editor
timeline.set(".CSS-Yellow-Lines", {visibility: "visible"})

timeline.fromTo('.CSS-Yellow-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"})

timeline.set(".Canvas-Background", {fill: "#00ABFF"})

timeline.set(".CSS-Purple-Lines", {visibility: "visible"})

timeline.fromTo('.CSS-Purple-Lines', 1, {scaleX: 0.0, transformOrigin: "right"}, {scale: 1, transformOrigin: "right"})

timeline.set(".CSS-Green-Lines", {visibility: "visible"})

timeline.set(".Canvas-Left", {visibility: "visible"})

timeline.set(".Canvas-Right", {visibility: "visible"})

timeline.fromTo('.CSS-Green-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"}, "+=0.5")

timeline.set(".Canvas-Middle", {visibility: "visible"})

//JS Editor
timeline.set(".JS-Green-Lines", {visibility: "visible"})

timeline.fromTo('.JS-Green-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"})

//Canvas Animations Begin
timeline.fromTo('.Paint-Stripe', 1, {scaleY: 0.20, transformOrigin: "top"}, {scaleY: 1, transformOrigin: "top"})

timeline.fromTo('.Paint-Roller-Left', 1, {y: -55, transformOrigin: "bottom"}, {y: 0, transformOrigin: "bottom"}, "-=1")

//JS animation
timeline.set(".JS-Purple-Lines", {visibility: "visible"})

timeline.fromTo('.JS-Purple-Lines', 1, {scaleX: 0.0, transformOrigin: "right"}, {scale: 1, transformOrigin: "right"})

//canvas animation
timeline.fromTo('.Paint-Stripe2', 1, {scaleY: 0.20, transformOrigin: "top"}, {scaleY: 1, transformOrigin: "top"})

timeline.fromTo('.Paint-Roller-Right', 1, {y: -55, transformOrigin: "bottom"}, {y: 0, transformOrigin: "bottom"}, "-=1")

//JS Animation

timeline.set(".JS-Yellow-Lines", {visibility: "visible"})

timeline.fromTo('.JS-Yellow-Lines', 1, {scaleX: 0.0, transformOrigin: "left"}, {scale: 1, transformOrigin: "left"})

timeline.set(".Cat", {visibility: "visible"})

timeline.fromTo('.Cat', 1, {opacity: 0.0, transformOrigin: "center"}, {opacity: 1, transformOrigin: "center"})



            
          
!
999px
Loading ..................

Console