Draw a circle with SVG with samples


It is said that you should write one code a day and make one output.

Today I will introduce my samples of drawing some circles with SVG.

All you have to do is “draw a circle with SVG”, but if you have never edited SVG, it is worth to try.


Draw some circles with SVG

If <circle> </ circle> is inserted between <svg> </ svg>, a circle will be drawn.

If <rect> </ rect> is inserted, a square will be drawn.

It’s simple and easy to understand.

See the Pen SVG circle example by ExDesign (@marimari1020) on CodePen.

The meaning of each designation is as follows.

  • cx : Circle X coordinate
  • cy : Circle Y coordinate
  • r : Circle radius
  • fill : Circle fill color
  • stroke :Circle line color
  • stroke-width : Circle line thickness
  • stroke-dasharray : Circle line dotted line, Specify point spacing


See the Pen SVG circle example2 by ExDesign (@marimari1020) on CodePen.

This is all you have to do with the code, but as shown in the code above, you can modify the values if you want to add more circles later.

Figures drawn with SVG are more beautiful and flexible than using image files.