<svg viewBox="0 0 100 100">
    <path d="M10 10H90V90H10Z"/>
    <circle cx="50" cy="50" r="40"/>
</svg>

<svg class="neopet">
  
  <g id="body"></g>
  
  <g id="head"></g>
    
  <g id="wings"></g>
  
</svg>

<svg class="neopet">

  <g id="wings"></g>
  
  <g id="body"></g>
  
  <g id="head"></g>
  
</svg>

.element {
    animation-name: fade;
    animation-duration: 2s;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element-three {
    animation-name: second-animation;
    animation-duration: 3s;
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element-three {
    animation-name: third-animation;
    animation-duration: 3s;
    animation-delay: 5s;
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element-three {
    animation-name: third-animation;
    animation-duration: 3s;
    animation-delay: 5s;
}

.element-four {
    animation-name: fourth-animation;
    animation-duration: 4s;
    animation-delay: 8s;
}

.element-five {
    animation-name: fifth-animation;
    animation-duration: 12s;
    animation-delay: 2s;
}

.element-six {
    animation-name: sixth-animation;
    animation-duration: 3s;
    animation-delay: 14s;
}

.element {
    animation-name: first-animation;
    animation-duration: 2s;
}

.element-two {
    animation-name: second-animation;
    animation-duration: 3s;
    animation-delay: 2s;
}

.element-three {
    animation-name: third-animation;
    animation-duration: 3s;
    animation-delay: 5s;
}

.element-four {
    animation-name: fourth-animation;
    animation-duration: 4s;
    animation-delay: 8s;
}

.element-five {
    animation-name: fifth-animation;
    animation-duration: 12s;
    animation-delay: 2s;
}

.element-six {
    animation-name: sixth-animation;
    animation-duration: 3s;
    animation-delay: 14s;
}

transform-origin: 200px 50px;

const findFace = async () => {

    const myWebcamFeed = document.querySelector('.player');
    const faceDetector = new FaceDetector();

    try {

        const faces = await faceDetector.detect(myWebcamFeed);
	
        console.log(faces);

    } catch (error) {
        console.log("oops, something went wrong with face detection")
    };
}

const findFace = async () => {

    const myWebcamFeed = document.querySelector('.player');
    const faceDetector = new FaceDetector();

    try {

        const faces = await faceDetector.detect(myWebcamFeed);
	
        console.log(faces);

    } catch (error) {
        console.log("oops, something went wrong with face detection")
    };
}

const findFace = async () => {

    const myWebcamFeed = document.querySelector('.player');
    const faceDetector = new FaceDetector();

    try {

        const faces = await faceDetector.detect(myWebcamFeed);
	
        console.log(faces);

    } catch (error) {
        console.log("oops, something went wrong with face detection")
    };
}

const findFace = async () => {

    const myWebcamFeed = document.querySelector('.player');
    const faceDetector = new FaceDetector();

    try {

        const faces = await faceDetector.detect(myWebcamFeed);
	
        console.log(faces);

    } catch (error) {
        console.log("oops, something went wrong with face detection")
    };
}

{
    boundingBox: {
        x: 545,
        y: 187,
        top: 187,
        left: 545,
        right: 855,
        bottom: 497,
        width: 310,
        height: 310
    },
    landmarks: [
        {
            locations: { x: 627.5, y: 262.5 },
            type: 'eye'
        },
        {
            locations: { x: 763, y: 258 },
            type: 'eye'
        },
        {
            locations: { x: 701, y: 418 },
            type: 'mouth',
        }
    }
}

{
    boundingBox: {
        x: 545,
        y: 187,
        top: 187,
        left: 545,
        right: 855,
        bottom: 497,
        width: 310,
        height: 310
    },
    landmarks: [
        {
            locations: { x: 627.5, y: 262.5 },
            type: 'eye'
        },
        {
            locations: { x: 763, y: 258 },
            type: 'eye'
        },
        {
            locations: { x: 701, y: 418 },
            type: 'mouth',
        }
    }
}