7

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.

  • 1
    You could use Adobe Illustrator Star tool – iamcastelli Jun 27 '17 at 5:49
  • 2
    Whether or not this is "difficult" is pretty opinion based and depends on one experience. What is your real question you're asking? Also, what software do you have access to? How much is "low cost"? – Zach Saucier Jun 27 '17 at 11:55
  • Now if you want to minimize your image size, and it for some reason has to be square (a rectangle is smaller), then the smallest possible rectangle is touching your star in 2 points. only your star has been rotated by 9 degrees. – joojaa Jun 27 '17 at 20:51
12

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.

enter image description here

  1. 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.

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

enter image description here

  1. 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.

enter image description here

  1. Group both square and star.

  2. 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.

enter image description here

If you want the Inkscape SVG it's here

  • I do like the sound of this method, though I didn't have to use it because I luckily found something with Sketch, which is an app I had heard of before and decided to investigate. I'd definitely do this if I had an issue with Sketch. – androidguy Jun 27 '17 at 17:04
18

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.

enter image description here

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!

  • This definitely shows how to construct it. I didn't realize that drawing the line from the outer vertex back through the center will identify the point along the inner circle on the other side. The one last hard part about manual construction for a graphic program ignoramus like myself would have been forming a closed path with the segments so that I could fill the poly with a color. – androidguy Jun 27 '17 at 17:08
  • Re closing the path, (in AI) it would become a closed path once you made the last connection. Shame you didn't feel this was the answer :-( – Digital Lightcraft Jun 28 '17 at 7:17
12

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).

enter image description here

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.

  • 1
    +1 for making the "low cost software" any text editor. The SVG example is just what OP needs. – JollyJoker Jun 27 '17 at 13:25
  • The live example does appear to be radially symmetric though. I'm not sure how you came up with the points for its path; I certainly could have used the def there, if I didn't luck out with Sketch. – androidguy Jun 27 '17 at 16:59
  • @androidguy It is radially symmetrical see: codepen.io/anon/pen/zzPJoX?editors=1100 there is a 36 degree angle between the points. Anyway use the parametric function for a circle. – joojaa Jun 27 '17 at 17:37
  • You seem to be using a different definition of "bounding" than OP. Note this sentence from the original question: "it's important to note that at most (I think) 1 point of the star will touch the square." This indicates that the bounding square is not the standard "bounding box", i.e., the rectangle of minimal size containing the star. – Kyle Strand Jun 27 '17 at 19:01
  • @KyleStrand But that is not minimal, the minimal box has 3 points in the box even though they share a center. The shape of a bitmap can be any rectangular area and does not have to be square. But yes a minimal rectangle in any perpendicular orientation touches 1 point. Or possibly no point touches if its rotated. I'm minimizing the function. But is not sane for the rendering engine. – joojaa Jun 27 '17 at 19:28
1

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.

  • 1
    Can this then be rotated as a whole about the centre of the circle as required? – Digital Lightcraft Jun 27 '17 at 10:10
  • Yes, the star is centred on the circle. – Pete Kirkham Jun 27 '17 at 10:29
0

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.

0

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%.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.