Shapes in SVG using JavaScript

About This Project

There are 6 shapes: circle, square, disc, diamond, triangle, and arrow.

There are 8 directions: n, ne, e, se, s, sw, w, and nw. Directions only apply to triangles and arrows.

You can also supply a direction as a number of degrees.

We draw these shapes with random background colors. You can see a new set of random colors when you refresh the page. You can also specify a color (see the bottom of this page).

We calculate the internal colors to contrast with the background colors. This module happens to choose between a light and dark shade of teal.

Animation

We can cause some animation by changing the direction value in JavaScript.

The advantage of doing this is JavaScript is that we are not continually downloading new images from the server, but the new images are generated on the client.

Try One

Shape:
Color: # (use 3-digit or 6-digit hex without the #)
Direction: (n, nw, w, sw, s, se, e, ne, or a number of degrees)