CODEWITHSUNDEEP
javascripthtmlcsssvg
michael24B
michael24B

Reputation: 313

SVG custom circles shape

I don't have experience with SVG and I have a problem with creating my custom shape. I want to create below shape.

Share of slices and belongings lines should be genarated dynamically. All slices are the same. For example: If we have 4 slices each slices would have 25% value, if there are 10 slices we would have 10 slices with 10%.

image

<!DOCTYPE html>
<html>

<body>

  <svg width="800" height="800">
    <circle cx="400" cy="400" r="300" stroke="black" stroke-width="2" fill="red" />
    <circle cx="400" cy="400" r="80" stroke="black" stroke-width="2" fill="blue" />
    <path d="M 400 400 H 480 320" stroke="black" stroke-width="2" fill="none" />Sorry, your browser does not support inline SVG.
  </svg>

</body>

</html>

Please, help me out.

Upvotes: 0

Views: 1045

Answers (1)

Stewartside
Stewartside

Reputation: 20935

You will need multiple elements to this SVG.

  • Two for the center circle
  • Four for the outer circle

First, you need 4 areas for the 4 sections in the outside circle. This can be done like so:

<svg width="50%" viewbox="0 0 100 100">
  <path d="M50,50 L0,50 A50,50 0 0,1 50,0" fill="red"></path>
  <path d="M50,50 L100,50 A50,50 0 0,1 0,50" fill="blue"></path>
  <path d="M50,50 L100,50 A50,50 0 0,1 50,100" fill="green"></path>
  <path d="M50,50 L50,0 A50,50 0 0,1 100,50" fill="yellow"></path>
</svg>

For the inside area, you will need two segments with text inside.

text {
  fill: white;
  font-size: 16px;
}
<svg width="50%" viewbo0x="0 0 100 100">
  <path d="M0,50 A50,50 0 0,1 100,50z" fill="purple"></path>
  <path d="M0,50 A-50,-50 0 1,0 100,50z" fill="green"></path>
  <text x="18" y="40">Some text</text>
  <text x="15" y="70">Bottom text</text>
</svg>

Join them together and hey presto, you should have your shape.

text {
  font-size: 2.5em;
  fill: white;
}
<svg width="50%" viewbox="0 0 1000 1000">
  <path d="M500,500 L0,500 A500,500 0 0,1 500,0" fill="red"></path>
  <path d="M500,500 L1000,500 A500,500 0 0,1 0,500" fill="blue"></path>
  <path d="M500,500 L1000,500 A500,500 0 0,1 500,1000" fill="green"></path>
  <path d="M500,500 L500,0 A500,500 0 0,1 1000,500" fill="yellow"></path>
  <path d="M350,500 A100,100 0 0,1 650,500z" fill="purple" x="45" y="45"></path>
  <path d="M350,500 A-100,-100 0 1,0 650,500z" fill="pink"></path>
  <text x="420" y="450">Some text</text>
  <text x="410" y="550">Bottom text</text>
</svg>

Upvotes: 3

Related Questions