Quick Tip: How to draw a star with SVG and Javascript

Quick Tip

SVG provides a powerful way to create graphics that will scale to any size in your application. It’s easy enough to draw a star, but you need to work with the polygon shape to work with. Ideally you’d want a way to calculate your star shapes, similar to how you can specify a radius or width/height with circles and rectangles. Fortunately there is a way to calculate the points on a star, and here is how.

To calculate the points on our star, we bring trigonometry to the rescue! Thank to a StackOverflow answer (written in Java), we know that a basic star is simply a fixed set of points on a circle, equidistant from each other. To make a “fancy” looking star, we work with two circles, and outer and an inner, and use the same angle, applied to the larger and shorter radius. The nice thing about this formula is that we can calculate the proper angle no matter how many “arms” we want on the star: 5, 6, 11, etc.).

With SVG, we simply need to define the points in our polygon (star) and it will do all the hard work of connecting the lines and filling in the space. All our algorithm needs to do is “walk” along the star, and make note of the coordinates at each tip of the arm. That said, here’s what our function looks like:

When using the D3 library, we can easily append our star with the following syntax:


d3.select("#star_svg")
  .append("svg:polygon")
  .attr("id", "star_1")
  .attr("visibility", "visible")
  .attr("points", CalculateStarPoints(pointX, pointY, 5, 10, 5))

After you apply a little CSS formatting you get the final result (as applied onto a map)

Arizona SVG Star

There you  have it! You can easily modify this function to work with other libraries, including those that draw the lines between points.

Hope this helps!

 

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s