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

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

Don't poke the panda
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.

Post a Comment

2 Comments

  1. This is very nice blog.Is it possible that your targeted keywords aren't ranking highly on Google? If you answered yes, then you should be aware of the following disturbing news. To obtain ideal SEO service, make a decisive choice and contact a digital marketer atSEO Company in Wellington. SEO ensures that you appear on the top page of Google and get a large number of visitors.

    ReplyDelete