-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearning_svg.html
More file actions
60 lines (54 loc) · 4.27 KB
/
learning_svg.html
File metadata and controls
60 lines (54 loc) · 4.27 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning SVGs</title>
</head>
<body>
<h1 style="text-align: center;">Learning SVG Playground</h1>
<p>Placeholder as I'm refreshing my memory of how to draw SVGs.</p>
<h2>Space Ship</h2>
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="space ship with green tractor beams and a small alien showing in the dome abducting a cow">
<!-- The spaceship -->
<path d="M 60 75 C 70,20, 140,35, 140,75" stroke="black" fill="transparent" stroke-width="2" /><!-- the dome -->
<ellipse cx="100" cy="75" rx="40" ry="10" stroke="black" fill="transparent" stroke-width="4" /><!-- the body of the spaceship -->
<!-- The 'cx' property is the x-axis center of the ellipse. Default is 0. -->
<!-- The 'cy' property is the y-axis center of the ellipse. Default is 0. -->
<!-- The 'rx' property is required. This is the x radius of the ellipse. -->
<!-- The 'ry' property is required. This is the y radius of the ellipse. -->
<circle cx="75" cy="75" r="5" stroke="black" stroke-width="1" fill="red" /><!-- the lights of the ship - left light -->
<!-- For circles, 'r' is the radius, 'cx' is the x axis center of the circle, and 'cy' is the y axis of the circle. -->
<circle cx="100" cy="75" r="5" stroke="black" stroke-width="1" fill="red" /><!-- the lights of the ship - center light -->
<circle cx="125" cy="75" r="5" stroke="black" stroke-width="1" fill="red" /><!-- the lights of the ship - right light -->
<!-- the alien -->
<circle cx="100" cy="60" r="5" stroke="black" stroke-width="1" fill="#38F527" /><!-- alien head -->
<line x1="103" y1="55" x2="110" y2="50" stroke="#38F527" stroke-width="1" /><!-- right antenna -->
<line x1="97" y1="55" x2="90" y2="50" stroke="#38F527" stroke-width="1" /><!-- left antenna -->
<!-- ray beams -->
<polyline points="130,85 135,100 140,95 145,110 150,105 155,120 160,115 165,130 170,125" stroke="#38F527" fill="transparent" stroke-width="5"/><!-- right outer beam -->
<!-- The 'points' property is required. This property identifies the list of points of the polyline. Each point must contain an x coordinate and a y coordinate. -->
<polyline points="115,87 120,112 125,102 135,125" stroke="#38F527" fill="transparent" stroke-width="3"/><!-- left inner beam -->
<polyline points="70,85 65,100 60,95 55,110 50,105 45,120 40,115 35,130 30,125" stroke="#38F527" fill="transparent" stroke-width="5"/><!-- left outer beam -->
<polyline points="85,87 80,112 75,102 67,125" stroke="#38F527" fill="transparent" stroke-width="3"/><!-- left inner beam -->
<line x1="100" y1="87" x2="100" y2="120" stroke="#38F527" stroke-width="2" /><!-- center beam -->
<!-- cow -->
<ellipse cx="100" cy="160" rx="40" ry="15" stroke="black" fill="transparent" stroke-width="4" /><!-- the body of the cow -->
<ellipse cx="150" cy="150" rx="15" ry="12" stroke="black" fill="transparent" stroke-width="3" /><!-- the head of the cow -->
<circle cx="155" cy="147" r="5" stroke="black" fill="transparent" stroke-width="2" /> <!-- cow's eye -->
<circle cx="158" cy="148" r="2" stroke="black" stroke-width="2" /> <!-- cow's inner eye -->
<circle cx="145" cy="143" r="3" stroke="black" stroke-width="2" /> <!-- cow's ear -->
<circle cx="120" cy="150" r="5" fill="black" /> <!-- circle -->
<circle cx="80" cy="170" r="5" fill="black" /> <!-- circle -->
<circle cx="100" cy="160" r="7" fill="black" /> <!-- circle -->
<circle cx="70" cy="155" r="5" fill="black" /> <!-- circle -->
<circle cx="130" cy="165" r="5" fill="black" /> <!-- circle -->
<line x1="85" y1="175" x2="95" y2="190" stroke="black" stroke-width="2" /> <!-- rear leg 1 -->
<line x1="85" y1="175" x2="75" y2="190" stroke="black" stroke-width="2" /> <!-- rear leg 2 -->
<line x1="115" y1="175" x2="125" y2="190" stroke="black" stroke-width="2" /> <!-- front leg 1 -->
<line x1="115" y1="175" x2="105" y2="190" stroke="black" stroke-width="2" /> <!-- front leg 2 -->
<path d="M 60,160 Q 50,150 45,160 T 35 160" fill="none" stroke="#000" stroke-width="2px" />
</svg>
<footer>
<a href="https://robertjmccaffery.com/examples.html">Back to Examples</a> | <a href="http://robertjmccaffery.com/">Home</a>
</footer>
</body>
</html>