MY Animations #2 – Cat Head with hover

Inspired by a youtube tutorial video here – https://youtu.be/UTHgr6NLeEw

Using Figma https://www.figma.com/ to draw a basic cats head with a tongue layer underneath some mouth/nose features. I can then export the svg code being sure to select the ‘include id element’ in the export > SVG options.

<svg width="441" height="349" viewBox="0 0 441 349" fill="none" class="mycat" xmlns="http://www.w3.org/2000/svg">
<rect width="441" height="349" fill="#F5F5F5"/>
<g id="Catframe" clip-path="url(#clip0_0_1)">
<rect width="441" height="349" fill="white"/>
<g id="Cathead">
<g id="Group 1">
<circle id="Ellipse 1" cx="215" cy="194" r="141" fill="#D9D9D9"/>
<path id="Polygon 1" d="M306.672 4.99767L303.259 88.6105L247.696 64.3658L306.672 4.99767Z" fill="#D9D9D9"/>
<path id="Polygon 2" d="M115.603 15.0416L176.493 72.4447L121.755 98.4976L115.603 15.0416Z" fill="#D9D9D9"/>
<line id="Line 1" x1="137.842" y1="163.526" x2="173.842" y2="151.526" stroke="black"/>
<line id="Line 2" x1="254.107" y1="149.511" x2="291.181" y2="157.602" stroke="black"/>
</g>
<path id="cattongue" fill-rule="evenodd" clip-rule="evenodd" d="M233 177H192V211H192.229C192.078 211.979 192 212.98 192 214C192 225.046 201.178 234 212.5 234C223.822 234 233 225.046 233 214C233 212.98 232.922 211.979 232.771 211H233V177Z" fill=""/>
<g id="Group 2">
<g id="catmouth">
<mask id="path-7-inside-1_0_1" fill="white">
<path d="M188 164H242V237H188V164Z"/>
</mask>
<path d="M188 164H242V237H188V164Z" fill="#D9D9D9"/>
<path d="M242 236H188V238H242V236Z" fill="black" mask="url(#path-7-inside-1_0_1)"/>
</g>
<line id="Line 3" x1="214.5" y1="237" x2="214.5" y2="185" stroke="black"/>
<path id="Polygon 3" d="M215 177L256.569 189.75H173.431L215 177Z" fill="black"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_0_1">
<rect width="441" height="349" fill="white"/>
</clipPath>
</defs>
</svg>

I removed fill attribute for the

The I add css animations to the entire head and the tongue element on hover.

svg.mycat  {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

#Cathead {
   display: block;
}

#Cathead:hover #cattongue {
    animation: tongueout 2s infinite linear;
    position: absolute;
    fill:#FDBFEB;
}

@keyframes tongueout {
  0% {
    transform: translate(0px,0px);
  }
  50% {
    fill:blueviolet;
    transform: translate(0px,50px);
  }
  100% {
    transform: translate(0px,0px);
  }
}