html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<head>
<title> Scared face </title>
</head>
<svg width="380" height="400">
<!-- Делаем удивленное лицо -->
<!-- голова -->
<ellipse cx="490" cy="500" rx="0" ry="00" style="fill: NavajoWhite">
<animate attributeName="ry" from="500" to="500" dur="10s" fill="freeze" repeatCount="5000" />
<animate attributeName="rx" from="300" to="180" dur="10s" fill="freeze" repeatCount="5000" />
<animate attributeName="cx" from="80" to="80" dur="10s" fill="freeze" repeatCount="5000" />
</ellipse>
<!-- глаза -->
<ellipse cx="190" cy="130" rx="29" ry="5" style="fill: #fabc09">
<animate attributeName="ry" from="50" to="80" dur="10s" fill="freeze" repeatCount="5000" />
<animate attributeName="cx" from="200" to="70" dur="10s" fill="freeze" repeatCount="5000" />
</ellipse>
<ellipse cx="190" cy="130" rx="9" ry="29" style="fill: #f00c99">
<animate attributeName="ry" from="50" to="15" dur="10s" fill="freeze" repeatCount="5000" />
<animate attributeName="cx" from="200" to="70" dur="10s" fill="freeze" repeatCount="5000" />
</ellipse>
<!-- from отвечает за высоту глаз -->
<ellipse cx="90" cy="130" rx="29" ry="5" style="fill: #fabc09">
<animate attributeName="ry" from="40" to="100" dur="10s" fill="freeze" repeatCount="5000" />
<animate attributeName="cx" from="100" to="30" dur="10s" fill="freeze" repeatCount="5000" />
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run