Animating SVG with SMIL for transforms and some CSS – detailed

<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>

<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>

.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);
}
}