Animated Face

Animated Face

Code:

<p align="center">
<svg width="750" height="300" viewBox="0 0 250 100">

<defs>

<linearGradient id="happycolors">

<stop offset="0%" stop-color="green"> </stop>
<stop offset="25%" stop-color="red"> </stop>
<stop offset="50%" stop-color="blue"> </stop>
<stop offset="75%" stop-color="green"> </stop>
<stop offset="100%" stop-color="red"> </stop>

</linearGradient>

</defs>

<rect x="0" y="0" width="250" height="100" fill="url(#happycolors)" />

<defs>

<g id="happyface7">

<title> Beautiful face </title>

<desc> Its a beautiful face </desc>


<circle cx="125" cy="55" r="40" fill="orange" stroke="black" />

<g id="eyes7" stroke="black">


<circle r="15" fill="white" cx="105" cy="45" />

<circle r="5" fill="black" cx="105" cy="50">
<animate attributeName="cx" values="105;110;105;100;105" fill="freeze" repeatCount="indefinite" dur="5s"/>
</circle>


<circle r="15" fill="white" cx="140" cy="45" />

<circle r="5" fill="black" cx="140" cy="50">
<animate attributeName="cx" values="140;145;140;135;140" fill="freeze" repeatCount="indefinite" dur="5s"/>
</circle>
</g>


<path d="M110 70 l30 0 q-15 15, -30 0" fill="white" stroke="black" />

</g>

</defs>

<use xlink:href="#happyface7" x="0" y="0">
<animate attributeName="x" values="0;90;-90;0" repeatCount="indefinite" dur="7s" />
</use>

</svg>
</p>

Outcome:

Animated Face with SVG