How to draw a radially symmetric 5-pointed star?

Question

I'm looking for a 5-pointed star that I can rotate as part of a user interface. Therefore, the center of the star should not move – otherwise, it looks strange.

However, no matter where I get a 5 pointed star from, the center of the star is not at the center of the image.

I'm confident that such a shape exists, because:

• It's possible to make a radially symmetric pentagon. Each vertex is 72 degrees apart on the circumscribed circle.
• Such a star can be bounded by a square, since the circle can circumscribe a square; at most (I think) 1 point of the star will touch the square. It's possible to have a square asset containing a radially symmetric star, with the star's center at the square's center.

If I wanted to make such a shape, what low-cost software could I use, and what would the basic process be? Since I'm looking for radial symmetry, I imagine starting with a perfect pentagon is the key. I expect the hardest part of the process to be ensuring that all 10 edges of the star have equal length.

Answer 1

A 5 pointed star IS radially symmetrical - The issue here is the rotational centre is skewed by the vertical distance (in this example) of the top point and the bottom 2 points.

OK so, how to solve YOUR problem... I don't know what sort of UI you are working on, or what asset types are usable within it - But lets assume you can use a square .PNG with a transparent background.

I would simply save the PNG out with radial centre of the star aligned with the diagonal centre of the background, then when you rotate, it will stay centred.

To make this shape, I used Illustrator, which is in no way cheap, but there are free / cheap Vector packages available. I drew 2 circles, one for the outer diameter of the star, one for the inner. I then set out 5 lines that intersect the centre, and are each rotated by 72 degrees from one-another.

Then I drew lines to connect the outer points to the inner points where these intersect the circles. Simples!

Answer 2

Here's a simple method using Inkscape(dot)org which is free and Open Source.

The main problem is that the centre of rotation of a star is different from the centre of rotation of its bounding box. So to get everything to rotate symmetrically, you need to put the star inside a square, and match both centres of rotation.

1. On the snapping tool bar on the right edge of the application window, enable Snapping, Snap Nodes, Snap Cusp Nodes, Snap Item's Rotation Centers.

2. Click and drag a horizontal and vertical guide from the rulers, and make sure the nodes intersect.

3. Using the polygon tool set to the star option, and 5 corners, draw a five pointed star. Apply a stroke and no fill to make it easy to see.

4. Click and drag the star shape over the origin you created and allow it to snap to the centre of rotation.

5. Choose the rectangle tool, mouse over the origin until it shows up, hold down shift+CTRL as you click and drag to make a square centred around the origin.

6. Group both square and star.

7. When you have finished, you can remove the stroke of the square, apply a fill to the star, then export as PNG using the "Hide all except selected" option. The result is a PNG with transparent square background with both centres of rotation of the square and star in the same location.

If you want the Inkscape SVG it's here

Answer 3

As a matter of fact, like you have noticed, there is no equal sided symmetrical five sided star in existence that fulfills the requirement of having center where the star's bounding box center is. Image systems tend to crop the excess away.

Center of an object is a complicated thing. Center of a bounding box is equate rarely where the center of an object is. Unfortunately center is a diffuse concept so no matter what one would choose as a center metric you would get it wrong from time to time. (more discussion on this can be found here.)

Now almost universally systems take the easy way out and define the bounding box center as object center. That's fine, if you want another center just surround your object with a invisible box, or circle, that is sufficiently big and center where you want it. It can touch one edge if you like but that is not essential (nor necessarily the most compact or problem free representation).

Image 1: Rotate around bb center.

Alternatively you can use groups to find center. Essentially storing the position of the center, so now it no longer matters what shape the image has. And here is a live SVG example of using the grouping method.

Whichever seems easier to you, the later method is more compact in complicated cases, or cases where you consider center to be at an edge of the image, as you only need to store 2 floats. Whereas if you have a bitmap with much empty space your wasting much more memory.

Answer 4

You can use this basic SVG to create one in your browser, no other tools required:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 100 100">
    <defs> 
        <!-- change the two 20 values to make rays thicker or thinner -->
        <path id="ray" d="M-20,0 L0,-50 L20,0 Z"/>
    </defs>

    <g style="stroke:none; fill: black" transform="translate(50,50)">
        <!-- five points of star -->
        <use xlink:href="#ray"/>
        <use transform="rotate(72)" xlink:href="#ray"/>
        <use transform="rotate(144)" xlink:href="#ray"/>
        <use transform="rotate(216)" xlink:href="#ray"/>
        <use transform="rotate(288)" xlink:href="#ray"/>
        <!-- star will be centred on this circle in the green bounding box -->
        <circle r="1" fill="red" stroke="none"/>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="green"/>
    </g>

</svg>

It defines a triangle to use as the ray, the creates five copies of it at 72 degree rotations (360/5) around the centre point of a square.

Answer 5

Draw a circle, then draw a chord which does not pass through the centre. Then group them and rotate the group through 72 degrees, four times over, copying it each time. Voila, a star. You can now ungroup all your groups, zoom in and join the lines at each point, and delete the surplus lines.

The issue you have rotating it is that the bounding square is not centred on the centre of the star. To fix this, you simply need to keep one of the original circles, make it invisible by giving it no stroke and fill, and group it with the star. The bounding box around this circle will now be concentric with your star and you can rotate it to your heart's content.

Answer 6

Using the Mac app Sketch, the action 'Insert Shape -> Star' seems to do exactly what I'm asking on initial drag. Just be sure you don't resize it! You can even set the inner radius. I used 38%.