Don't Poke the Panda - HTML, CSS, JS

Don't Poke the Panda - HTML, CSS, JS

Don't poke the panda

Hey Guys, This is another fun time pass made with HTML, CSS , JS. Just get into it and enjoy..

DEMO:

CLICK HERE TO VIEW FULLSCREEN


Now it's the time to get into the code.

HTML:

I've used pretty much html in it.Feel free to leave anything on comments

<h1>Don't poke the panda</h1>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1178.38 1092.03">
        <defs>
          <style>
            .cls-1{fill:#0c0c0c}.cls-2{fill:#bfbfbf}.cls-3{fill:#fff}
          </style>
        </defs>
        <g id="Layer_2" data-name="Layer 2">
          <g id="panda" data-name="Layer 1">
            <g id="hind-legs">
              <path d="M361.37,298.27c-161.44,0-455.58,99.52-331.73,329.52,64.77,120.29,52,261.91,157,358.27,0,0,95.1,14.1,95.1-13.27,0-186.87,2.21-382.66,140.43-384.81,142.64-2.21,164.76,171.39,164.76,358.27,0,28.92,103.94-2.21,103.94-2.21s50.87-172.68,50.87-320.67C741.75,408.4,560.46,298.27,361.37,298.27Z"/>
              <path class="cls-1" d="M361.37,298.27c-161.44,0-455.58,99.52-331.73,329.52,64.77,120.29,52,261.91,157,358.27,0,0,95.1,14.1,95.1-13.27,0-186.87-140.77-415.35,68.56-433.46,230-19.9,236.63,220,236.63,406.92,0,28.92,103.94-2.21,103.94-2.21s50.87-172.68,50.87-320.67C741.75,408.4,560.46,298.27,361.37,298.27Z"/>
            </g>
            <g id="top">
                <g id="torso">
                <path class="cls-2" d="M73.87,475c0,162.9,188.21,320.82,413.56,320.82s524.13-64.78,524.13-227.68-302.1-305.3-527.45-305.3S73.87,312.15,73.87,475Z"/>
                <path class="cls-3" d="M73.87,475C93.78,697.55,299.68,744.12,525,744.12s486.54-13,486.54-175.94-302.1-305.3-527.45-305.3S59.38,313,73.87,475Z"/>
                </g>
                <g id="front-legs">
                <path d="M857.54,322.48C558.32,279.88,361.67,339.31,461.68,671.9c39.34,130.84,94,242.4,164.44,376,0,0,107.58,9.67,107.58-17.69C733.7,843.3,716,634.24,854.23,632.1,996.87,629.89,1019,803.49,1019,990.37c0,28.92,99.94,2.79,99.94,2.79s54.87-177.68,54.87-325.67C1173.79,452.52,1054.64,350.55,857.54,322.48Z"/>
                <path class="cls-1" d="M863.54,323.48C564.32,280.88,375.67,334.31,467.68,672.9c35.83,131.84,86,250.4,161.44,376,0,0,110.58,9.67,110.58-17.69,0-186.87-59.17-419.59,78.13-435.67,245.48-28.75,207.15,211,207.15,397.86,0,28.92,90.94-.21,90.94-.21s61.87-176.68,61.87-324.67C1177.79,453.52,1060.64,351.55,863.54,323.48Z"/>
                </g>
                <g id="head">
                <path class="cls-1" d="M1135,90.75c-8.67-49.3-65.15-87.11-100.77-90.67C1012.16-2.13,957,42.56,967,75.27c16.94,55.55,70.23,112.77,89.42,88.46C1080.23,133.54,1141,124.43,1135,90.75Z"/>
                <path d="M1118,89.54c-6.92-39.34-52-69.52-80.42-72.36-17.65-1.76-61.67,33.9-53.72,60,13.51,44.33,56,90,71.36,70.6C1074.25,123.68,1122.72,116.42,1118,89.54Z"/>
                <path class="cls-1" d="M552.62,97.39c8.67-49.3,65.15-87.11,100.77-90.67,22.12-2.21,77.28,42.48,67.31,75.19-16.94,55.55-70.23,112.77-89.42,88.46C607.42,140.17,546.69,131.07,552.62,97.39Z"/>
                <path d="M572.53,96c6.63-37.67,49.79-66.57,77-69.29C666.43,25,708.59,59.14,701,84.14c-12.94,42.45-53.67,86.18-68.34,67.6C614.41,128.67,568,121.71,572.53,96Z"/>
                <path class="cls-2" d="M1100.62,276.52c31.73,110.59-133.8,264.28-251,266.49-101.71,1.92-285.75-140.14-248.8-266.49,39.27-134.28,89.86-254.16,249.9-249.9C1018.25,31.07,1062.69,144.33,1100.62,276.52Z"/>
                <path class="cls-3" d="M1025.43,256.62c-21.05,37.89-95.78,21.79-106.15,84-7,41.86,4.42,101.73-44.23,117.21-36.5,11.61-4,72.43-33.17,73-101.71,1.92-278-128-241.06-254.33C640.08,142.24,681.83,29,841.87,33.25,1009.4,37.71,1092.21,136.4,1025.43,256.62Z"/>
                <path class="cls-1" d="M640.22,341.56c28.69,41.43,97.54,56.17,128.86,4.59,30.2-49.72,70-85.51,47.48-119.88s-80.17-36.43-128.86-4.59S616.84,307.79,640.22,341.56Z"/>
                <circle class="cls-2" cx="761.15" cy="259.93" r="29.86"/>
                <ellipse class="cls-3" cx="755.48" cy="260.31" rx="24.19" ry="28"/>
                <path class="cls-1" d="M1056.79,334.92c-28.69,41.43-97.54,56.17-128.86,4.59-30.2-49.72-70-85.51-47.48-119.88s80.17-36.43,128.86-4.59S1080.17,301.16,1056.79,334.92Z"/>
                <circle class="cls-2" cx="935.86" cy="253.3" r="29.86"/>
                <ellipse class="cls-3" cx="930.34" cy="253.73" rx="24.33" ry="28.42"/>
                <path d="M909.32,428.9c0,16-24.26,29-54.18,29s-54.18-13-54.18-29,54.18,6.82,54.18,6.82S909.32,412.91,909.32,428.9Z"/>
                <g id="mouth">
                    <ellipse class="cls-2" cx="855.14" cy="499.89" rx="64.13" ry="19.9"/>
                    <ellipse class="cls-1" cx="855.14" cy="499.89" rx="64.13" ry="13.27"/>
                </g>
                </g>
        </g>
            <ellipse id="shadow" cx="644.46" cy="993.61" rx="533.92" ry="98.41" opacity="0.44" fill="#0c0c0c"/>
          </g>
        </g>
      </svg>

CSS:

 body{
            font-family: 'Fredoka One', cursive;
            text-align: center;
            background: rgb(117,154,1);
            background: linear-gradient(169deg, rgba(117,154,1,1) 0%, rgba(44,84,1,1) 78%, rgba(42,75,1,1) 100%);
        }
    
        svg{
            max-width: 80%;
            max-height: 40vh;
            margin: 30vh auto;
            overflow: visible;
            
        }
        #panda{
          cursor: pointer;
        }
        #mouth{
            opacity:0;
        }
        h1{
            font-weight:400;
            color: rgb(223, 255, 106);
        }

JAVASCRIPT:

var tl = new TimelineMax({repeat:0, paused:true});
var tl2 = new TimelineMax({repeat:-1});

tl2.to("#head", .5, {rotation:2, yoyo:true, repeat:1, transformOrigin:"50% 50%"});
tl2.to("#head", .5, {rotation:-2, yoyo:true, repeat:1, transformOrigin:"50% 50%"});

tl.set("#mouth", {scale:0, opacity: 1, transformOrigin:"50% 50%"});
tl.to("#mouth", .5, {scale:1, repeat:0, transformOrigin:"50% 50%", ease:Power1.easeIn}, 0);
tl.to("#torso", .7, {rotation:-90, x:100, y:-150, repeat:0, transformOrigin:"15% 50%", ease:Power1.easeIn}, 0);
tl.to("#front-legs, #head", .5, { y:-200, repeat:0, transformOrigin:"50% 50%", ease:Power1.easeIn},0);
tl.to("#front-legs, #head", .5, {x:-475, y:-800, repeat:0, transformOrigin:"50% 50%", ease:Power1.easeIn}, .2);
tl.to("#shadow", .5, {x:-240, repeat:0, transformOrigin:"15% 50%"}, .3);

document.getElementById("panda").addEventListener("mouseover", function(){

        tl.play();

})

document.getElementById("panda").addEventListener("mouseleave", function(){
    
        tl.reverse();

})

Enjoyed it? STAY TUNED for more posts like this.Until then...

HAPPY CODING.