Animating SVG with SMIL for transforms and some CSS - detailed

N M — Sat, 04 May 2024 19:46:26 +0000

SVG with some SMIL and CSS animations

Backround rays with SMIL gradient animation:

  <svg xmlns="http://www.w3.org/2000/svg" id="Rays" viewBox="0 0 200 200">
    <radialGradient id="radGrad" cx="100" cy="100" r="99" gradientUnits="userSpaceOnUse">
      <stop offset="0.25" stop-color="#cce">
        <animate attributeName="stop-color" values="#cce;#cce; #ffc; #eff; #cce;" dur="6s" repeatCount="indefinite" />
      </stop>
      <stop offset="0.75" stop-color="#cb0167">
        <animate attributeName="stop-color" values="#cb0167;#f20; #f50; #cb0167;#cb0167" dur="6s" repeatCount="indefinite" />
      </stop>
      <stop offset="1" stop-color="#cb0167">
        <animate attributeName="stop-color" values="#cb0167;#cb0167; #f20; #f50; #cb0167;" dur="6s" repeatCount="indefinite" />
      </stop>
    </radialGradient>
    <path fill="url(#radGrad)" d="M90.5 199l9.5-99 9.5 99h-19zm52.3-9.2L100 100l24.9 96.3 17.9-6.5zm28-20.1L100 100l56.3 82 14.5-12.3zm19.6-28.5L100 100l80.9 57.7 9.5-16.5zm8.6-33.4l-99-7.8 95.7 26.5 3.3-18.7zm-3.3-34.4L100 100l99-7.9-3.3-18.7zm-14.9-31.2L100 100l90.3-41.3-9.5-16.5zM156.2 18L100 100l70.8-69.8L156.2 18zM124.8 3.7L100 100l42.7-89.8-17.9-6.5zM90.4 1l9.6 99 9.4-99h-19zm-33.2 9.3L100 100 75.1 3.7l-17.9 6.6zM29.1 30.4L100 100 43.7 18.1 29.1 30.4zM9.6 58.8L100 100 19.1 42.3 9.6 58.8zM1 92.3l99 7.7L4.3 73.5 1 92.3zm3.3 34.4L100 100l-99 7.9 3.3 18.8zm14.9 31.2L100 100 9.7 141.4l9.5 16.5zM43.9 182l56.1-82-70.7 69.8L43.9 182zm31.4 14.3L100 100l-42.6 89.8 17.9 6.5z" />
  </svg>

The Chicken:

  <svg id="Chicken" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
    <linearGradient id="grd__a" x1="300.621" x2="410.152" y1="702.911" y2="812.442" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#b5151f" />
      <stop offset=".045" stop-color="#c32d26" />
      <stop offset=".122" stop-color="#d74e30" />
      <stop offset=".2" stop-color="#e66837" />
      <stop offset=".28" stop-color="#f17b3d" />
      <stop offset=".363" stop-color="#f88640" />
      <stop offset=".453" stop-color="#fa8a41" />
      <stop offset="1" stop-color="#fa8a41" />
    </linearGradient>
    <path fill="url(#grd__a)" d="M410.7 719.3c-4 16.2-24.3 66.4-24.3 66.4s10.2 10.8 15.1 20.4c10.6 20.6-23.4 27.3-23.4 27.3l-3.5-15.6 1.4 16.8-.8 2.2c-2.2 15.9-15.9 28.2-32.4 28.2-13.3 0-24.8-8-29.9-19.4-.8-2-1.5-3.9-2.1-6.1.5 2.1 1.1 4.1 2.1 6.1-6.2 10.3-18.7 17.3-33.2 17.3-20.6 0-37.4-14.3-37.4-31.8 0-17.6 16.7-31.8 37.4-31.8h.7c6.9.1 13.3 1.8 18.8 4.7-5.5-2.9-12-4.7-18.9-4.8 10.1-.7 19 .2 19 .2l21.4-19.3s35.4-46.8 46-88.5c3.2-12.6-3.5-51.1-3.5-51.1l49-24.4c-.1-.1 5.6 74.5-1.5 103.2z">
      <animateTransform attributeName="transform" type="rotate" dur="5s" values="0,412,616; 25,412,616;0,412,616;" repeatCount="indefinite" />
    </path>
    <linearGradient id="grd__b" x1="458.473" x2="656.776" y1="658.479" y2="856.781" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#b5151f" />
      <stop offset=".045" stop-color="#c32d26" />
      <stop offset=".122" stop-color="#d74e30" />
      <stop offset=".2" stop-color="#e66837" />
      <stop offset=".28" stop-color="#f17b3d" />
      <stop offset=".363" stop-color="#f88640" />
      <stop offset=".453" stop-color="#fa8a41" />
      <stop offset="1" stop-color="#fa8a41" />
    </linearGradient>
    <path fill="url(#grd__b)" d="M670.8 831.1c0 17.5-16.8 31.8-37.4 31.8-14.4 0-27-7-33.1-17.2-5.1 11.3-16.6 19.3-29.9 19.3-16.5 0-30.1-12.2-32.4-28.2l-.8-2.2 1.4-16.8-3.5 15.6s-34-6.7-23.4-27.3c4.9-9.6 15.1-20.4 15.1-20.4s-20.3-50.2-24.3-66.4c-7.1-28.7-1.4-103.3-1.4-103.3l49.1 24.4s-6.7 38.5-3.5 51.1c10.5 41.7 46 88.5 46 88.5l21.4 19.3s9-.9 19-.2c-5.1.1-10 1.1-14.4 2.8 4.4-1.6 9.2-2.6 14.2-2.7h.7c20.5.1 37.2 14.3 37.2 31.9z">
      <animateTransform attributeName="transform" type="rotate" dur="5s" values="0,501,616; -25,501,616;0,501,616;" repeatCount="indefinite" />
    </path>
    <linearGradient id="grd__c" x1="538.755" x2="473.977" y1="798.088" y2="733.31" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fef62f" />
      <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__c)" d="M507.7 184.5c-17.7 0-32.2-14.5-32.2-32.2v-38.6c0-17.7 14.5-32.2 32.2-32.2 17.7 0 32.2 14.5 32.2 32.2v38.6c-.1 17.7-14.5 32.2-32.2 32.2z" />
    <linearGradient id="grd__d" x1="421.734" x2="356.956" y1="798.089" y2="733.311" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fef62f" />
      <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__d)" d="M390.7 184.5c-17.7 0-32.2-14.5-32.2-32.2v-38.6c0-17.7 14.5-32.2 32.2-32.2s32.2 14.5 32.2 32.2v38.6c0 17.7-14.5 32.2-32.2 32.2z" />
    <linearGradient id="grd__e" x1="492.207" x2="402.595" y1="837.304" y2="747.692" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fef62f" />
      <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__e)" d="M449.2 176.5c-25.1 0-45.6-20.5-45.6-45.6V80.5c0-25.1 20.5-45.6 45.6-45.6s45.6 20.5 45.6 45.6v50.3c.1 25.2-20.5 45.7-45.6 45.7z" />
    <linearGradient id="grd__f" x1="650.855" x2="760.598" y1="247.549" y2="250.568" gradientTransform="matrix(.9274 -.3742 -.3117 -.7725 175.948 909.737)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#d39d21" />
      <stop offset=".25" stop-color="#d6a022" />
      <stop offset=".642" stop-color="#f9ef56" />
      <stop offset="1" stop-color="#faf358" />
    </linearGradient>
    <path class="hand hand-l" fill="url(#grd__f)" d="M797.2 607.2c-22.4 7.6-37.5-18.2-55.6-54.8-16.9-34-24.5-81.6-34.4-100.5-10.6-20.5-34.4-40.1-37.8-48.5 0 0-20.7-79.1 8.9-91l5.6-2.2c29.6-12 104.7 146.3 104.7 146.3 20.7 49.7 30.9 143 8.6 150.7z">
      <animateTransform attributeName="transform" type="rotate" dur="3s" values="0,670,380; -25,670,380;0,670,380;" repeatCount="indefinite" />
    </path>
    <linearGradient id="grd__g" x1="2188.386" x2="2298.128" y1="-497.241" y2="-494.223" gradientTransform="matrix(-.9274 -.3742 .3117 -.7725 2382.015 909.737)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#d39d21" />
      <stop offset=".25" stop-color="#d6a022" />
      <stop offset=".642" stop-color="#f9ef56" />
      <stop offset="1" stop-color="#faf358" />
    </linearGradient>
    <path class="hand hand-r" fill="url(#grd__g)" d="M102.8 607.2c22.4 7.6 37.5-18.2 55.6-54.8 16.9-34 24.5-81.6 34.4-100.5 10.6-20.4 34.4-40 37.8-48.4 0 0 20.7-79.1-8.9-91l-5.6-2.2c-29.6-12.1-104.7 146.3-104.7 146.3-20.7 49.6-30.9 142.9-8.6 150.6z">
      <animateTransform attributeName="transform" type="rotate" dur="3s" values="0,203,380; 25,203,380;0,203,380;" repeatCount="indefinite" />
    </path>
    <linearGradient id="grd__h" x1="456.483" x2="456.483" y1="757.946" y2="241.215" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fffe6b" />
      <stop offset=".14" stop-color="#fefa1c" />
      <stop offset=".922" stop-color="#d7a100" />
      <stop offset="1" stop-color="#d6980f" />
    </linearGradient>
    <path fill="url(#grd__h)" d="M524.3 648.5H388.6c-97.3 0-176.9-79.7-176.9-176.9V308.7c0-97.3 79.7-176.9 176.9-176.9h135.7c97.3 0 176.9 79.7 176.9 176.9v162.9c.1 97.3-79.5 176.9-176.9 176.9z" />
    <path fill="#CB0167" stroke="#BE1E2D" stroke-miterlimit="10" stroke-width="6.346" d="M733 300.3v21.2c0 .7 0 1.2-.1 1.9-.5 78.3-60.7 141.6-135.1 141.6-57.9 0-107.3-38.4-126.5-92.4l-14 2.1-15.5-2.2c-19.1 54.1-68.6 92.6-126.6 92.6-74.3 0-134.6-63.2-135.1-141.6-.1-.7-.1-1.2-.1-1.9v-21.2c0-8.3 6.7-15 15-15h523.1c8.2-.1 14.9 6.6 14.9 14.9z" />
    <path class="Glassez" fill="url(#Glasses)" d="M499.9 324.6h198.8c0 57.8-44.5 107.5-99.3 107.5s-99.5-49.6-99.5-107.5zm-285.4 0h198.8c0 57.8-44.5 107.5-99.3 107.5s-99.5-49.6-99.5-107.5z">

    </path>
    <linearGradient id="Glasses" spreadMethod="reflect" gradientTransform="rotate(5)">
      <animateTransform attributeName="gradientTransform" type="rotate" values="0 0.5 0.5; 15 0.5 0.5; 0 0.5 0.5; -25 0.5 0.5;0 0.5 0.5;" dur="4s" repeatCount="indefinite" />
      <stop offset="0%" stop-color="#720021">
        <animate attributeName="stop-color" values="#720021; #720021; #720021; #720021; #720021" dur="8s" repeatCount="indefinite" />
      </stop>
      <stop offset="25%" stop-color="#720021">
        <animate attributeName="stop-color" values="#720021; #ff0167; #720021; #f0a; #720021;#720021;#720021;" dur="8s" repeatCount="indefinite" />
      </stop>
      <stop offset="50%" stop-color="#720021">
      </stop>
      <stop offset="75%" stop-color="#720021">
        <animate attributeName="stop-color" values="#720021; #ff0167; #720021; #f0a; #720021;#720021;#720021;" dur="8s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" stop-color="#720021">
        <animate attributeName="stop-color" values="#720021; #720021; #720021; #720021;#720021;" dur="8s" repeatCount="indefinite" />
      </stop>
    </linearGradient>

    <linearGradient id="grd__i" x1="456.529" x2="456.529" y1="480.407" y2="402.244" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ffaf32" />
      <stop offset=".165" stop-color="#fdab31" />
      <stop offset=".321" stop-color="#f6a02e" />
      <stop offset=".474" stop-color="#eb8d28" />
      <stop offset=".625" stop-color="#db7220" />
      <stop offset=".774" stop-color="#c64f16" />
      <stop offset=".921" stop-color="#ad250a" />
      <stop offset="1" stop-color="#9e0b03" />
    </linearGradient>
    <path fill="url(#grd__i)" d="M514.3 419.6c.8 4.3 1.2 8.7 1.2 13.2 0 36.2-26.4 64.9-58.9 64.9s-58.9-28.7-58.9-64.9c0-4.6.4-9 1.2-13.2 10 24.4 32.1 33.5 57.7 33.5s47.7-9.1 57.7-33.5z" />
    <linearGradient id="grd__j" x1="456.529" x2="456.529" y1="486.805" y2="444.211" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#cb0167" />
      <stop offset=".217" stop-color="#c40357" />
      <stop offset=".641" stop-color="#b0072c" />
      <stop offset="1" stop-color="#9e0b03" />
    </linearGradient>
    <path fill="none" stroke="url(#grd__j)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="9.066" d="M400.3 417.7c9.7 24.4 31.2 33.5 56.2 33.5 25 0 46.5-9.1 56.2-33.5" />
    <linearGradient id="grd__k" x1="456.529" x2="456.529" y1="450.466" y2="530.401" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ffaf32" />
      <stop offset=".456" stop-color="#fead31" />
      <stop offset=".621" stop-color="#f9a62e" />
      <stop offset=".738" stop-color="#f19b29" />
      <stop offset=".833" stop-color="#e68a21" />
      <stop offset=".914" stop-color="#d77417" />
      <stop offset=".984" stop-color="#c5590a" />
      <stop offset="1" stop-color="#c05207" />
    </linearGradient>
    <path fill="url(#grd__k)" d="M456.5 369.6c23.9 0 46.4 23.8 56.1 45.1-5.8 26.1-29.8 34.8-56.1 34.8-26.4 0-50.4-8.7-56.1-34.8 9.8-21.3 32.3-45.1 56.1-45.1z" />
    <path class="brows" fill="#CC9902" d="M411.6 269.2h-21.9c-4 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3h21.9c4 0 7.3 3.3 7.3 7.3-.1 4.1-3.3 7.3-7.3 7.3zm111.8 0h-21.9c-4 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3h21.9c4 0 7.3 3.3 7.3 7.3 0 4.1-3.3 7.3-7.3 7.3z" />
  </svg>

CSS does the rest:

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  animation: 6s BxShdw ease-in-out;
}
@keyframes BxShdw {
  0%,
  30%,
  70%,
  100% {
    box-shadow: 0 0 5vmax rgba(0, 0, 0, 0.35) inset;
  }
  15%,
  50%,
  85% {
    box-shadow: 0 0 10vmax #cb0167 inset;
  }
}

svg#Chicken {
  display: block;
  position: absolute;
  width: 100vmin;
  height: 100vmin;
  top: 50%;
  left: 50%;
  margin: -50vmin 0 0 -50vmin;
  z-index: 5;
  animation: 8s Chck ease-in-out infinite;
}
@keyframes Chck {
  0%,
  30%,
  60% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(45deg);
  }
  45% {
    transform: rotate(-45deg);
  }
}
svg#Rays {
  width: 140vmax;
  height: 140vmax;
  top: 50%;
  left: 50%;
  margin: -70vmax 0 0 -70vmax;
  position: absolute;
  z-index: 1;
  animation: 32s R360 linear infinite;
}
@keyframes R360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.Glassez {
  stroke: rgba(255, 55, 55, 0.35);
  stroke-width: 3;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: 8s Gls linear infinite;
}
@keyframes Gls {
  0% {
    stroke-dashoffset: 800;
  }
  30% {
    stroke-dashoffset: 0;
  }
  60%,
  100% {
    stroke-dashoffset: -800;
  }
}
.brows {
  animation: 8s eyeBrows ease-in-out infinite;
}
@keyframes eyeBrows {
  0%,
  30%,
  60%,
  80%,
  90%,
  100% {
    transform: translate(0, 0);
  }
  15%,
  45%,
  85%,
  95% {
    transform: translate(0, -16px);
  }
}

DEV Community: N M

Animating SVG with SMIL for transforms and some CSS - detailed