2

I am looking to create an SVG seven pointed star which is drawn with one path, similar to how you used to draw 5 pointed stars in grade school but scaled up to 7 points. I've included an image that shows what I mean.

I would also like the points of the star to be rounded, as seen in the image. The problem that I am currently facing (as seen in the image) is that I am able to draw the rough idea, but its completely asymmetric and doesn't look too good. Any help would be appreciated.

Thank you.

enter image description here

Improve this question

3 Answers 3

Reset to default
17

  1. Draw a regular 7 pointed star using the Star Tool.

  2. With the star still selected do View > Guides > Make Guides

  3. Make sure Smart Guides are enabled

  4. Using the Curvature Tool, draw the star making sure each corner snaps to the Anchors.

Example

enter image description here

Improve this answer
1
  • 2
    Accepting answer for simplicity + clean solution, but definitely recommend checking out @user287001's answer
    – Nikita Jerschow
    Commented Dec 3, 2020 at 20:04
12

You can draw it as sharp by clicking with the Pen to corners of a 7-gon which is drawn with the polygon tool. Control the curvature by applying Effect > Stylize > Round corners

enter image description here

Have Snap to Point and Smart Guides ON to be able to draw the sharp version accurately.

Expand the appearance if you want to fix the roundness and have a path with no effect. Before expanding you can reopen the roundness effect via the Appearance panel for adjustments.

Not asked: No matter which drawing method you actually use, but you can meet a problem: Where is the centerpoint? Illustrator gives the center of the bounding box which is NOT the center of the 7 point star. You can find the centerpoint by drawing 2 cord lines between the crossings of the curve:

enter image description here

The green circle is drawn with the ellipse tool by starting from the centerpoint and holding Alt+Shift at the same time. Smart Guides can help you only if the star has one point just above, below, to right or to left from the centerpoint. To get it hold Shift when you draw the 7-gon in the beginning.

Improve this answer
4
  • Wow are you a wizard? this is incredible! Can you point me to a viable proof of the centerpoint effect that you explained? Does this only work for certain shapes? Or is it globally true for all closed paths? I haven't heard of this method before
    – Nikita Jerschow
    Commented Dec 3, 2020 at 19:52
  • It's valid for symmetric shapes like regular polygons or other shapes which can be considered to be made by combining a basic shape and its copies which are rotated around the centerpoint amount N(360 degrees/M) where M is an integer 2,3,4,... and N gets values 1, 2, 3...(M-1). The cord lines must be left-right symmetry axles of the rotated basic shapes. I'm not advanced enough to give a rigorous formal proof.
    – user82991
    Commented Dec 4, 2020 at 14:34
  • 1
    The center point is the same for stars (or just regular polygons) with an even number of points, but not for an odd number. It's easy enough to see why. If you look at that top point, you can tell at a glance that it sticks up higher relative to the bounding box - and there are more points below the center line of the bounding box than above it (4 on the bottom, 3 on the top in this case). So the center of the star must be lower to account for that. The exact amount can be calculated, but I'll leave that for Math.SE.
    – Darrel Hoffman
    Commented Dec 4, 2020 at 18:32
  • 1
    the drawing idea to find the center covers also even and odd number of points. Illustrator's bounding box doesn't.
    – user82991
    Commented Dec 4, 2020 at 18:43
1

BillyKerr's answer is definitely the cleaner/simpler solution but if you want options

  1. Make 1 arc (one point of the star made from 3 points)
  2. Change the rotation point (alt click) to be the bottom middle of the arc
  3. duplicate and rotate 360/7 (51.429) degrees....repeat
  4. select nearby nodes, join the paths (Object > path > average)...repeat
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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