{{ message }}

Instantly share code, notes, and snippets.

# daniellevass/webprogramming_space_1_5.md

Last active Nov 14, 2015
Web Programming Space Worksheet 1.5

#Space Worksheet 1.5

You need to find the JSFiddle link for the solar system that you made last week - if for whatever reason you can't or you have lost it I have made you a starting jsfiddle - you will need to fork it before you start!

##Task 1 - Hex Colours

There are many ways to represent colours with computers - we've been telling our svg shapes to be "red" or "yellow" or "green" - this isn't great if you want a specific colour green!

###Option A - rgb values

Microsoft Word likes to use this - if you ever try to change the colour to a custom colour you get a colour wheel:

This gets you three values (Red, Green, Blue) - 0 means you've got none of that colour, 255 means a lot of that colour. So:

• red would be 255,0,0
• green would be 0,255,0
• purple would be 153,51,204

###Option B - Hex Values

this is what most people use now

Basically a more efficient way of representing a rgb value - Instead of going from 0 to 255, you go from 00 to FF

• red would be #FF0000
• green is #00FF00
• purple would be #9933CC

Try making each of your planets a more accurate colour in your solar system. There are some links at the bottom of the page to get some hex color codes quickly!

```  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="100%" stop-color="#1D62F0" />

<circle cx="100" cy="100" r="100" fill="url(#grad1)" />```
• id = the name of the gradient - needed to give to the circle's fill attribute
• x1 & x2 = start and stop x values = these go from 0 to 100 to make our gradient
• y1 & y2 = start and stop y values = these stay constant for our example
• stop offset
• offest = how far down the gradient you want the colour
• stop-color = hex code for the stop point

```  <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#cc0000" />