I’ve been having fun trying out David DeSandro‘s ace javascript pseudo-3D animation library Zdog.
<canvas style="display: block; margin: 40px auto;" class="zdog-canvas" width="480" height="480"></canvas>
// create illo const illo = new Zdog.Illustration({ // set canvas with selector element: '.zdog-canvas', scale: 2.5, }); const faceGroup = new Zdog.Group({ addTo: illo }); // face const face = new Zdog.Hemisphere({ addTo: faceGroup, diameter: 180, color: '#ee3', fill: true, }); const face2 = new Zdog.Hemisphere({ addTo: faceGroup, diameter: 180, scale: { z: -1 }, color: '#ff5', fill: true, }); // left eye const eyeLeft = new Zdog.Ellipse({ addTo: faceGroup, diameter: 30, translate: { x: 40, y: -10, z: 50 }, rotate: { y: -0.5 }, scale: { x: 0.65 }, color: '#333', fill: true, }); // right eye const eyeRight = eyeLeft.copy({ translate: { x: -40, y: -10, z: 50 }, rotate: { y: 0.5 }, }); // mouth const mouth = eyeLeft.copy({ diameter: 30, // stroke: 10, translate: { y: 40, z: 40 }, rotate: { x: -0.5 }, scale: { x: 3 }, color: '#333', // fill: false, }); // update & render // illo.updateRenderGraph(); let i = 0.1, y = 0.005; function animate() { // rotate illo each frame // illo.rotate.x = Math.sin(i) * 4.5; i += 0.05; illo.rotate.y = Math.sin(i); illo.rotate.z = Math.cos(i) * 0.5; illo.rotate.x = Math.cos(y+=0.005) * 1.2; illo.updateRenderGraph(); mouth.scale.y = Math.cos(i); // animate next frame requestAnimationFrame( animate ); } // start animation animate();
I was thinking of those transparent bouncy balls with things inside them.
Also I used CodePen’s prefill embed feature to embed the pen here and it worked a treat!