<svg width="100vw" height="100vh" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
  
    <rect id="scene" x="0" y="0" width="800" height="800" style="fill:none;"/>
    <ellipse id="shadow" cx="400" cy="730.292" rx="241.069" ry="11.295" style="fill:#1a1a1a;"/>
 
   <g id="console">
        <g>
            <rect x="235.808" y="497.715" width="328.385" height="232.578" style="fill:#1a1a1a;"/>
            <path d="M543.418,524.681c0,-5.477 -4.447,-9.924 -9.924,-9.924l-266.823,-0c-5.569,-0 -10.089,4.52 -10.089,10.089l-0,178.48c-0,5.477 4.447,9.924 9.924,9.924l266.988,0c5.477,0 9.924,-4.447 9.924,-9.924l0,-178.645Z" style="fill:#2c2f32;"/>
        </g>
     
        <g id="face">
            <path d="M422.722,602.643c0,12.54 -10.181,22.722 -22.722,22.722c-12.541,-0 -22.722,-10.182 -22.722,-22.722" style="fill:none;stroke:#fff;stroke-width:20px;"/>
            <circle cx="324.236" cy="614.004" r="18.463" style="fill:#fff;"/>
            <circle cx="475.764" cy="614.004" r="18.463" style="fill:#fff;"/>
        </g>
    </g>
    <g id="joycon-r">
        <path id="joycon-body" d="M564.192,497.715l26.907,-0c27.579,-0 49.97,22.39 49.97,49.969l0,132.639c0,27.579 -22.391,49.969 -49.97,49.969l-26.907,0l0,-232.577Z" style="fill:#ff4851;"/>
        <g id="control-r4" serif:id="control-r">
            <circle cx="600.207" cy="620.518" r="18.594" style="fill:#1a1a1a;"/>
            <circle cx="600.207" cy="620.518" r="13.31" style="fill:#1a1a1a;"/>
            <g id="dpad8" serif:id="dpad">
                <g>
                    <circle cx="600.207" cy="573.53" r="8.713" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <circle cx="600.207" cy="538.68" r="8.713" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <path d="M573.222,556.105c0,-4.809 3.904,-8.713 8.713,-8.713c4.808,0 8.712,3.904 8.712,8.713c0,4.808 -3.904,8.712 -8.712,8.712c-4.809,0 -8.713,-3.904 -8.713,-8.712Z" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <path d="M627.191,556.105c0,4.808 -3.904,8.712 -8.713,8.712c-4.808,0 -8.712,-3.904 -8.712,-8.712c-0,-4.809 3.904,-8.713 8.712,-8.713c4.809,0 8.713,3.904 8.713,8.713Z" style="fill:#1a1a1a;"/>
                </g>
            </g>
        </g>
    </g>
    <g id="joycon-l">
        <path id="joycon-body1" serif:id="joycon-body" d="M235.808,497.715l-26.907,-0c-27.579,-0 -49.97,22.39 -49.97,49.969l-0,132.639c-0,27.579 22.391,49.969 49.97,49.969l26.907,0l-0,-232.577Z" style="fill:#00bce0;"/>
        <g id="control-l4" serif:id="control-l">
            <g>
                <circle cx="199.534" cy="556.148" r="18.594" style="fill:#1a1a1a;"/>
                <circle cx="199.534" cy="556.148" r="13.31" style="fill:#1a1a1a;"/>
            </g>
            <g id="dpad9" serif:id="dpad">
                <g>
                    <circle cx="199.534" cy="603.136" r="8.713" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <circle cx="199.534" cy="637.986" r="8.713" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <path d="M226.518,620.561c0,4.809 -3.903,8.713 -8.712,8.713c-4.809,-0 -8.713,-3.904 -8.713,-8.713c0,-4.808 3.904,-8.712 8.713,-8.712c4.809,-0 8.712,3.904 8.712,8.712Z" style="fill:#1a1a1a;"/>
                </g>
                <g>
                    <path d="M172.549,620.561c0,-4.808 3.904,-8.712 8.713,-8.712c4.809,-0 8.713,3.904 8.713,8.712c-0,4.809 -3.904,8.713 -8.713,8.713c-4.809,-0 -8.713,-3.904 -8.713,-8.713Z" style="fill:#1a1a1a;"/>
                </g>
            </g>
        </g>
    </g>
    </div>
</svg>
body {
  background-color: #FFC400;
}

#console {
  animation-name: console-bounce;
  animation-duration: 2.5s;
  animation-delay: .5s; 
  animation-iteration-count: infinite; 
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

#joycon-r, #joycon-l {
  animation-name: joycon-bounce;
  animation-duration: 2.5s;
  animation-delay: .5s; 
  animation-iteration-count: infinite; 
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

#shadow {
  animation-name: shadow;
  animation-duration: 2.5s;
  animation-delay: .5s; 
  animation-iteration-count: infinite; 
  animation-direction: normal;
}

@keyframes console-bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1,.9)     translateY(90px); }
        25%  { transform: scale(1,1.1)    translateY(-400px); }
        30%  { transform: scale(1,1.1)    translateY(-400px); }
        50%  { transform: scale(1,.9)     translateY(90px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}

@keyframes joycon-bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        13%  { transform: scale(1,.9)     translateY(90px); }
        28%  { transform: scale(1,1.1)    translateY(-400px); }
        30%  { transform: scale(1,1.1)    translateY(-400px); }
        53%  { transform: scale(1,.9)     translateY(90px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}

@keyframes shadow {
        0%   { transform:      translateY(0); }
        13%  { transform:     translateY(0); }
        28%  { transform:     scale(.9,.9)   translate(50px,80px);}
        64%  { transform:      translateY(0); }
        100% { transform:       translateY(0); }
}


/* @keyframes joycon-bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1,.9)     translateY(90px); }
        30%  { transform: scale(1,1.1)    translateY(-400px); }
        50%  { transform: scale(1,1)      translateY(0); }
        57%  { transform: scale(1,1)      translateY(0); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
} */


/* @keyframes console-bounce {
        0%   { transform: translateY(0); }
        10%  { transform: translateY(-200); } 
        50%  { transform: translateY(-400px); }
        60%  { transform: translateY(-100); }
        97%  { transform: translateY(0); }
}

@keyframes joycon-bounce {
        3%   { transform: translateY(0); }
        13%  { transform: translateY(-200); } 
        53%  { transform: translateY(-400px); }
        63%  { transform: translateY(-100); }
        100% { transform: translateY(0); }
} */

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js