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.

How to make "Now Loading...." page on JavaScript

You might see "Now Loading...." page when you browse some websites. Let's make the "Now Loading... Wait for few secon...

torutsume.net

Sample basic Node.js application to understand how Node.js works

To understand how to work Node.js web application, this is the simple example, the title is "dice-game-program".

torutsume.net