<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./index.js"></script>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" fill="yellow" stroke="#000" stroke-width="4" />
<path d="M20 57.5 h70" stroke="#000" stroke-width="4" class="mouth" />
<g class="eyeR">
<path d="M 62 50 v-6 a 1 1 0 0 1 30 0v6" fill="#fff" stroke="#000" stroke-width="3" />
<path d="M 62 50 h30" stroke-linecap="square" stroke="darkorange" stroke-width="3" />
<circle cx="83" cy="41.5" r="5" fill="#000" />
</g>
<g class="eyeL">
<path d="M 15 50 v-6 a 1 1 0 0 1 30 0v6" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round">
<animate id="a1" attributeName="d" values="M 15 50 v -6 c 0 -3 1 -6 3 -9 c 6 -8 18 -8 24 0 c 2 3 3 6 3 9 v 6; M 15 44 v 0 c 0 -3 1 -6 3 -9 c 11 0 13 0 24 0 c 2 3 3 6 3 9 v 0; M 15 50 v -6 c 0 -3 1 -6 3 -9 c 6 -8 18 -8 24 0 c 2 3 3 6 3 9 v 6" dur=".2s" begin="0s; a1.end+1s" repeatCount="2" keyTimes="0;0.5;1" keySplines="1 0 1 0;1 0 1 0" calcMode="spline" />
</path>
<circle cx="36" cy="41.5" r="5" fill="#000" />
<path d="M 15 50 h30" stroke-linecap="square" stroke="darkorange" stroke-width="3">
<animate attributeName="d" values="M 15 50 h30; M 15 45 h30; M 15 50 h30" dur=".2s" begin="0s; a1.end+1s" repeatCount="2" keyTimes="0;0.5;1" keySplines="1 0 1 0;1 0 1 0" calcMode="spline" />
</path>
</g>
</svg>
</body>
</html>
index.html
style.css
index.js