-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGhostAnimation.html
63 lines (60 loc) · 3.02 KB
/
GhostAnimation.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghost Manipulating</title>
<link rel="stylesheet" href="GhostAnimation.css">
</head>
<body>
<h1>FUN WITH GHOST</h1>
<div class="container">
<div id="animation_zone">
<p class="title">ANIMATION ZONE</p>
<span id="scare">SCARE</span>
<span id="haunt">HAUNT</span>
<span id="quiver">QUIVER</span>
<span id="dizzy">DIZZY</span>
<span id="dress">DRESS UP</span>
<span id="hide">HIDE</span>
<span id="wink">WINK</span>
</div>
<div id="button_zone">
<div class="title">BUTTON ZONE</div>
<span id="random">RANDOM</span>
<span id="sourceCode">SVG/SOURCE</span>
<span id="save">SAVE</span>
</div>
</div>
<div class="container">
<div id="ghostContainer">
<svg id="ghostSVG" xmlns="http://www.w3.org/2000/svg" width="400" height="540" viewbox="0 0 100 135" transform="scale(1.0)">
<rect id="background" width="100" height="135" style="fill:transparent; stroke-width:0" />
<g id="ghost" transform="rotate(0),translate(0,0),scale(1.0)">
<path id="body" d="M 43.2 116.16 Q 38.4 130.68 33.6 116.16 Q 24 125.84 24 106.48 Q 14.4 111.32 14.4 96.8 Q 4.8 101.64 4.8 87.12 Q 9.6 48.4 19.2 38.72 Q 24 0 43.2 0 Q 62.4 0 67.2 38.72 Q 76.8 48.4 81.6 87.12 Q 81.6 101.64 72 96.8 Q 72 111.32 62.4 106.48 Q 62.4 125.84 52.8 116.16 Q 48 130.68 43.2 116.16"
style="stroke:wheat; stroke-width:1; fill:white" ></path>
<g id="eyes" transform="rotate(0), translate(0,0)">
<g id="eye-l" transform="rotate(0), translate(0,0)">
<ellipse id="eye-l-ball" cx="35" cy="25" rx="4" ry="4" style="stroke:black; fill:black;" ></ellipse>
<circle id="eye-l-pupil" cx="35" cy="28" r="0.5" style="stroke:white; fill:white" ></circle>
</g>
<g id="eye-r" transform="rotate(0), translate(0,0)">
<ellipse id="eye-r-ball" cx="52" cy="25" rx="4" ry="4" style="stroke:black; fill:black" ></ellipse>
<circle id="eye-r-pupil" cx="52" cy="28" r="0.5" style="stroke:white; fill:white"></circle>
</g>
</g>
<g id="mouth" transform="translate(0,0), scale(1.0)">
<ellipse id="mouthEllipse" cx="44" cy="35" rx="5" ry="1" style="fill: black;"></ellipse>
</g>
</g>
</svg>
</div>
</div>
<!-- <div class="container">
<div id="sourceCode_zone">
</div>
</div> -->
</body>
<script type="text/javascript" src="GhostAnimation.js"></script>
</html>