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
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.
-
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.
-
Click and drag a horizontal and vertical guide from the rulers, and make sure the nodes intersect.
-
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.
-
Click and drag the star shape over the origin you created and allow it to snap to the centre of rotation.
- 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.
-
Group both square and star.
-
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
Attribution
Source : Link , Question Author : androidguy , Answer Author : Billy Kerr