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.
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
Source : Link , Question Author : androidguy , Answer Author : Billy Kerr