Built with blockbuilder.org
Last active
February 7, 2020 19:04
-
-
Save molliemarie/0d45265a1053c2126694312967bfbc0b to your computer and use it in GitHub Desktop.
Scatter1_HTML_Starter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 --> | |
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment