SVG SMIL Animation

Test of SMIL animation.

by the_voder

HTML

<!--
Test of inline SMIL animation in SVG.

SMIL animation is embedded in the SVG markup. SVG can be embedded in page using IMG tag, and animation will continue to run.

Animation could be achieved using CSS animation, but SVG markup would need to be embedded in page source, for SVG elements to be accessible to CSS.

Downsides of SMIL animation:

Possible deprecation in future, in favout of CSS animation
-->


<h2>Left Eye: SMIL Animation on SVG Element, Right Eye: CSS Animation</h2>
<p>Note: SMIL animation support may be deprecated in future.</p>

<!-- INLINE ANIMATION ATTACHED TO SVG ELEMENTS -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 548.76 455.46">
  <defs>
    <clipPath id="clip-path" transform="translate(-18.28 -10.47)">
      <path id="Eyelid_Mask" data-name="Eyelid Mask" d="M192,14.6H69.53A43.47,43.47,0,0,0,26.11,58v3.81a43.46,43.46,0,0,0,43.42,43.41H192a43.46,43.46,0,0,0,43.42-43.41V58A43.47,43.47,0,0,0,192,14.6Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(-18.28 -10.47)">
      <path d="M192,14H69.53A43.47,43.47,0,0,0,26.11,57.41v3.81a43.46,43.46,0,0,0,43.42,43.41H192a43.46,43.46,0,0,0,43.42-43.41V57.41A43.47,43.47,0,0,0,192,14Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-3" transform="translate(-18.28 -10.47)">
      <path id="Eyelid_Mask-2" data-name="Eyelid Mask" d="M513,14.6H390.53A43.47,43.47,0,0,0,347.11,58v3.81a43.46,43.46,0,0,0,43.42,43.41H513a43.46,43.46,0,0,0,43.42-43.41V58A43.47,43.47,0,0,0,513,14.6Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-4" transform="translate(-18.28 -10.47)">
      <path d="M513,14H390.53a43.47,43.47,0,0,0-43.42,43.42v3.81a43.46,43.46,0,0,0,43.42,43.41H513a43.46,43.46,0,0,0,43.42-43.41V57.41A43.47,43.47,0,0,0,513,14Z" fill="none"/>
    </clipPath>
  </defs>
  <title>OctoFace</title>
  <g style="isolation: isolate">
    <g id="Mouth">
      <g id="Mouth-2" data-name="Mouth">
        <g>
        ...

CSS

svg {
  margin: 20px auto 20px auto;
}

/* Apply Animation to both eyelid elements */
#Eyelid-4 {
    animation: blink_anim 5s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes blink_anim {
  0% { transform: scaleY(0); }
  94% { transform: scaleY(0); }
  96% { transform: scaleY(1.0); }
  98% { transform: scaleY(1.0); }
  100% { transform: scaleY(0); }
}