Built with blockbuilder.org
forked from molliemarie's block: Scatter1_HTML_Starter
license: mit |
Built with blockbuilder.org
forked from molliemarie's block: Scatter1_HTML_Starter
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>First Scatter Plot Using HTML!</title> | |
<style> | |
/* 5) Set `circle` elements to have a "fill" of "purple" or whatever color you choose */ | |
circle { | |
fill: purple; | |
} | |
svg { | |
border: 1px solid #f0f; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- 1) Make a container `<div>` in which you'll render your content --> | |
<div> | |
<p>My HTML Scatter</p> | |
<svg width=300 height=400> | |
<circle cx=100 cy=100 r=10></circle> | |
<circle cx=150 cy=150 r=15></circle> | |
<circle cx=200 cy=200 r=20></circle> | |
</svg> | |
</div> | |
<!-- 2) Create a `<p>` element in which you write "My HTML Scatter" --> | |
<!-- 3) Make a container `<svg>` element in which you'll place your circles --> | |
<!-- Set your svg's `width` to 300, and `height` to `400` --> | |
<!-- 4) Put 3 `<circle>` inside of your `<svg>`, | |
setting the properties for each one: --> | |
<!-- | |
- `cx`: How far to move the circle in the `x` direction (right). Should be 100, 150, and 200. | |
- `cy`: How for to move the circle in the `y` direction (down from the top). Should be 100, 150, and 200. | |
- 'r': circle's radius. Should be 10, 15, and 20. | |
--> | |
</body> | |
</html> |