CSE332_SampleCode/svg.html at master · ayushGHub/CSE332_SampleCode · GitHub

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
<!-- Author : Ayush Kumar - aykumar@cs.stonybrook.edu -->


<!DOCTYPE html>
<html>
<body>

<h1>SVG Shapes</h1>

<svg width="500" height="500">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  <circle cx="360" cy="60" r="50" stroke="black" stroke-width="3" fill="red" />
  <ellipse cx="200" cy="180" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
  <line x1="10" y1="50" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  <text x="150" y="55" fill="red">I love SVG!</text>
  <path d="M350 120 L300 300 L425 300 Z" style="fill:green;stroke:steelblue;stroke-width:2" />
</svg>

<!--
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

<svg height="500" width="500">
  <circle cx="1050" cy="160" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
-->
</body>
</html>