How to calculate points (a.k.a. coordinates )of a polygon to create an svg star

user_1655840 0
Viewed 327

I want to create a simple SVG star using basic html. The only way I was able to get the points listed below was to copy them from somewhere else. Yes, the code below works just fine. My question is, is there an online tool or a process or some formula where I can generate these points? I have tried to export an svg from a browser based svg creator tool, but it results in a path, not points. I have tried to import an svg into the same svg creator tool and, obviously, it simply copies the points I already have in the svg file.

<svg height="80" width="80" viewBox="0 0 45 45">
  <polygon points="22.5 35.25 8.68704657 42.5118994 11.3250859 27.1309497 0.150171867 16.2381006 15.5935233 13.9940503 22.5 0 29.4064767 13.9940503 44.8498281 16.2381006 33.6749141 27.1309497 36.3129534 42.5118994" />
</svg>

Here are my styles:

svg {
      fill: purple;
      stroke: red;
      stroke-width: 1;
svg html
2 Answers

In the next example I'm drawing 2 circles just to understand better what I'm doing. You can delete those circles.

In order to draw a star with 5 rays you need 10 points: five on the outer circle and 5 on the inner one. You will need to calculate the x and y of those points and use them to draw the star.

Please read the comments in the code.

let pts = [];//the array of points used to draw the star
let n = 0;//a counter
let c = {x:22.5,y:22.5};//the center of the svg canvas
let step = Math.PI/5;//since the star has 5 points you will need to calculate the position of a point every 36degs i.e Math.PI/5;

//a for loop to calculate the position of the points for the star
for(let a=-Math.PI/2;  a<3*Math.PI/2; a+= step){
  //The point will be either on the outer circle (r=22) or on the inner one (r=11)
  let r = n%2 == 0 ? 22 : 11;
  //calculate the x and y of the point
  let x = c.x + r*Math.cos(a);
  let y = c.y + r*Math.sin(a);
  //push the x and the y values to the pts array
  pts.push(x);
  pts.push(y);
  //increase the counter
  n++
}

//join the array to get the value for the points attribute
let points = pts.join(",");
//set the points attribute of the polygon
poly.setAttribute("points",points)
svg{border:solid}
<svg height="80" width="80" viewBox="0 0 45 45" fill="none" stroke="red">
  <g stroke="silver">
  <circle cx="22.5" cy="22.5" r="22"/>  
  <circle cx="22.5" cy="22.5" r="11"/>
  </g>
  <polygon id="poly" points="" />
</svg>

user_78973950

OP says: I want to create a simple SVG star using basic html

The HTML:

  <svg-star></svg-star>
  <svg-star></svg-star>
  <svg-star></svg-star>
  <svg-star></svg-star>
  <svg-star></svg-star>

will create:

If you define the native Web Component <svg-star> once with:

<style>
  svg {
    fill: purple;
    stroke: red;
    stroke-width: 1;
  }
</style>

<svg-star></svg-star>
<svg-star></svg-star>
<svg-star></svg-star>
<svg-star></svg-star>
<svg-star></svg-star>

<script>
  customElements.define("svg-star", class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<svg height="80" width="80" viewBox="0 0 45 45">
          <polygon points="23 35 9 43 11 27 0 16 16 14 23 0 29 14 45 16 34 27 36 43"/>
          </svg>`
    }
  })
</script>

user_25208000
Related