-
Notifications
You must be signed in to change notification settings - Fork 1
/
svg-animations.html
30 lines (28 loc) · 1.15 KB
/
svg-animations.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
29
30
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>SVG Animations</title>
<link href="css/svg-animations.css" rel="stylesheet">
</head>
<body>
<div class="flower">
<svg id="flower" width="280" height="340" viewBox="0 0 280 340">
<rect id="stem" width="18.4" height="180.86" x="130.8" y="159.1" fill="#479a00"/>
<g class="flower-head">
<g id="petals" fill="#9e54ff">
<ellipse cx="140" cy="58.9" rx="21.7" ry="51.4"/>
<ellipse cx="140" cy="215.9" rx="21.7" ry="51.4"/>
<ellipse cx="84.5" cy="81.9" rx="21.7" ry="51.4" transform="rotate(-45 84.435 81.926)"/>
<ellipse cx="195.5" cy="192.9" rx="21.7" ry="51.4" transform="rotate(-45 195.544 193.003)"/>
<ellipse cx="61.5" cy="137.4" rx="51.4" ry="21.7"/>
<ellipse cx="218.5" cy="137.4" rx="51.4" ry="21.7"/>
<ellipse cx="84.5" cy="192.9" rx="51.4" ry="21.7" transform="rotate(-45 84.537 192.984)"/>
<ellipse cx="195.5" cy="81.9" rx="51.4" ry="21.7" transform="rotate(-45 195.443 81.945)"/>
</g>
<circle id="centre" cx="140" cy="137.8" r="36.4" fill="#f1eb00"/>
</circle>
</svg>
</div>
</body>
</html>