SVG custom circles shape

Question

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%.

<!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.

This may be helpful : http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html — CodeRomeos, Sep 21 '15 at 12:58
Yes it looks a little odd, beacuse is made in MS Paint and it's just an example :) thanks for link. — michael24B, Sep 21 '15 at 13:33
so you want to split your circle in random shapes, not even with a common center for your slices? Ps, SO is not a place to ask your job is done for you and at least please take a minimum time to provide a correct mockup. — Kaiido, Sep 21 '15 at 13:33

score 3 · Accepted Answer · answered Sep 21 '15 at 13:38

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>

SVG Documentation (MDN)

Thank you for your time and great answer! Do you maybe have any idea how to split area by n-value (instead of 4) in javascript? — michael24B, Sep 21 '15 at 13:44
That would require a great deal of maths and figuring out the correct algorithm, maybe something to try yourself first and get as far as you can. SO is a place to help solve problems rather than develop for you but I liked this challenge :P — Stewartside, Sep 21 '15 at 13:49
@michael24B: As Stewart mentioned in his previous comment, splitting into n sectors dynamically would need you to calculate points on the circumference of a circle and then create the line or path to that point using JS. You can look at my answers [here](http://stackoverflow.com/questions/31247310/circle-loading-animation/31250354#31250354) or [here](http://stackoverflow.com/questions/30729543/creating-a-new-spiky-label-with-24-or-above-point-burst/30892219#30892219) for a couple of examples where this approach of finding points is used. — Harry, Sep 21 '15 at 13:52
Thanks Stewartside and @Harry for great directions. I'll try to do something like that. — michael24B, Sep 21 '15 at 13:54

SVG custom circles shape

1 Answers1