index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG Exercise</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="960" height="500">
<!-- overlapping circles -->
<rect
x="200"
y="200"
width="400"
height="200"
fill="yellow"
stroke="navy"
stroke-width="10"
/>
<circle cx="400" cy="300" r="50" fill="red"></circle>
<circle cx="400" cy="300" r="30" fill="blue"></circle>
<line x1="210" y1="200" x2="210" y2="400" stroke="navy" stroke-width="20"></line>
<line x1="210" y1="200" x2="590" y2="200" stroke="navy" stroke-width="9"></line>
<line x1="590" y1="200" x2="590" y2="400" stroke="navy" stroke-width="20"></line>
<line x1="210" y1="400" x2="590" y2="400" stroke="navy" stroke-width="9"></line>
</svg>
