I'm building a Gauge chart in a presentational component in React.
I just need to pass it a percentage and let the component do the rest. I can't use any animations because I'm taking a screenshot of the component to place the image in a Powerpoint presentation.
Here's a screenshot of what I'm trying to do:
As you can see in my code snippet, the circle <marker> is being positioned at the end of the grey <path> instead of at the end of the green <path>. How could I position the circle so it sits at the stroke-linecap of the green <path> as in the image above?
Here's the HTML code I have so far:
<div style="width:400px">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="dot"
viewBox="0 0 10 10"
refX="4"
refY="4"
markerWidth="4"
markerHeight="4"
>
<circle
cx="4"
cy="4"
r="2"
fill="#FFFFFF"
stroke="#008000"
stroke-width="2"
/>
</marker>
</defs>
<path d="M20,60a35,35 0 1,1 60,0" stroke="#D3D7DB" stroke-width="4" fill="none" stroke-linecap="round"></path>
<path d="M20,60a35,35 0 1,1 60,0" stroke="#008000" stroke-width="6" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="75 35" marker-end="url(#dot)"></path>
</svg>
</div>
You can do it all in SVG by setting pathLength and using animationMotion to position the circle.
Some JavaScript and a W3C standard Web Component (supported in all modern Browsers) help in putting multiple gauges on screen and making them dynamic.
customElements.define("svg-gauge", class extends HTMLElement {
connectedCallback() {
let speed = 0.5; // set to 0.0001 for instant display!
let arc = "M20,60a35,35 0 1,1 60,0";
let col = this.getAttribute("color") || "green";
this.innerHTML =
`<input type="range" min="0" max="100" step="5" value="0"`+ // delete 2 lines
` oninput="this.parentNode.percent=this.value" /><br>`+ // just for demo
`<svg viewbox="0 0 100 100">
<path d="${arc}" stroke="grey" stroke-width="6" fill="none" stroke-linecap="round"></path>
<path id="P" d="${arc}" stroke="${col}" stroke-width="8" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="75 35"/>
<circle stroke="${col}" cx="0" cy="0" fill="#fff" r="4" stroke-width="3">
<animateMotion dur="${speed}s" path="${arc}" keyPoints="0;0.75" fill="freeze" keyTimes="0;1" calcMode="linear"/>
</circle>
<text x="50%" y="40%" text-anchor="middle">XXX</text>
</svg>`;
this.style.display='inline-block';
this.percent = this.getAttribute("value") || "50";
}
set percent(val = 0) {
this.setAttribute("value", val);
let dash = val + " " + (105 - val);
this.querySelector("#P").setAttribute('stroke-dasharray', dash);
this.querySelector("animateMotion").setAttribute('keyPoints', '0;'+val/100);
this.querySelector("text").innerHTML =`${val} %`;
this.querySelector("animateMotion").beginElement();
this.querySelector("input").value = val;
}
})
<svg-gauge value="35" color="red" ></svg-gauge>
<svg-gauge value="50" color="orange"></svg-gauge>
<svg-gauge value="75" color="green" ></svg-gauge>
I went ahead and accepted Danny '365CSI' Engelman's answer above, but just in case anyone wants to do this without the animations here is how I ended up implementing it:
<div style="width:400px">
<svg viewBox="0 -10 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M20,60a35,35 0 1,1 60,0" stroke="#D3D7DB" stroke-width="4" fill="none" stroke-linecap="round"></path>
<path d="M20,60a35,35 0 1,1 60,0" stroke="#008000" stroke-width="6" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="50 85"></path>
<circle
cx="0"
cy="0"
r="6"
stroke-width="6"
fill="#FFFFFF"
stroke="#008000"
>
<animateMotion
begin="0s"
dur="infinite"
repeatCount="infinite"
keyPoints="0.5;0.5"
fill="freeze"
keyTimes="0;1"
calcMode="linear"
path="M20,60a35,35 0 1,1 60,0"
></animateMotion>
</circle>
</svg>
</div>
svg:
<path id="svg_1" stroke-width="0.5" stroke="black" fill="none" d="m50.610001,63.470001l12.869999,0m0,0l0,464.709991m0,0l-12.869999,0m0,0l0,-464.709991"/>
<path id="svg_2" stroke-width="0.5" stroke="black" fill="none" d="m66.529999,260.670013l12.870003,0m0,0l-0.029999,267.519989m0,0l-12.870003,0m0,0l0.029999,-267.519989"/>
<path id="svg_3" stroke-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>
html:
<div ng-include="'example.svg'"></div>
I would like to change fill color for id="svg_2" for example on button click, How to do it?
The problem are your paths. After every line you are using a move to command (m) where you are moving to the last point. I've rewritten the first 2 paths bu removing the move to (m0,0) Now the paths can be filled. The third path is just a line.
Now you can fill the paths using css or bu resetting the value of the attribute fill
path{fill:red}
<svg viewBox="0 0 130 600" width="100">
<path id="svg_1" stroke-width="0.5" stroke="black" fill="none" d="M50.610001,63.470001l12.869999,0
l0,464.709991
l-12.869999,0
l0,-464.709991"/>
<path id="svg_2" stroke-width="0.5" stroke="black" fill="none" d="M66.529999,260.670013l12.870003,0
l-0.029999,267.519989
l-12.870003,0
l0.029999,-267.519989"/>
<path id="svg_3" stroke-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>
</svg>
I need to animate the logo like so:
Here is its SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<g id="cap_arch_connector_vert">
<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
</g>
<g id="cap_bottom_arch">
<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
</g>
<g id="arched_line_right">
<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
C669.7,583.3,654.5,578.4,641.9,570z"/>
</g>
<g id="right_leg_line_1">
<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
</g>
<g id="arch_under_circle">
<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
C120,589.1,158.7,615.3,203.3,615.3z"/>
</g>
<g id="circle">
<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
</g>
<g id="line_to_circle">
<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
</g>
<g id="leg_connector">
<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
/>
</g>
<g id="arch_connector">
<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
l22.4-22.9L277.8,600.3z"/>
</g>
<g id="cap_mid-bottom_parallel_line">
<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 "/>
</g>
<g id="arch_connector_very_right">
<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
</g>
<g id="arch_connector_right">
<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
L674.7,582.5z"/>
</g>
<g id="right_leg_connector">
<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
"/>
</g>
<g id="cap_arch_connector_hor">
<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
/>
</g>
<g id="cap_top_arch">
<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
h16v-25.2v-6.8H333.7z"/>
</g>
<g id="left_leg_line_1">
<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
C300.1,561,305.7,550.3,309.6,538.8z"/>
</g>
<g id="left_leg_line_2">
<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
</g>
<g id="right_leg_line_2">
<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
"/>
</g>
<g id="cap_top_parallel_line">
<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 "/>
</g>
<g id="cap_bottom_parallel_line">
<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 "/>
</g>
<g id="right_cap_corner">
<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7
715.9,263 "/>
</g>
</svg>
I spend a lot of time looking for a solution but mostly I stumbled upon stroke SVG animations. Vivus.js looked like a good solution but it doesn't animate filled path, it works only with stroke. So does pretty much all examples I have found, like DrawSVG etc.
I broke down my SVG into simple elements so it would be easier to animate them. I suppose I have to use some SVG masks as I can't change the existing shape of the logo by applying stroke etc. The only animation that looks similar to mine is on Codepen. SVG code is pretty complicated there and I'm not sure whether the way it was animated there will solve my problem.
How can I animate the logo?
As the comments have suggested it would be advisable to convert the graphic from shapes to to strokes and then use an animation library such as Anime JS or Greensock to perform the animation.
Conversion to strokes
For the conversion to strokes I used Illustrator, and then exported to SVG before optimizing the graphic with Jake Archibald's SVGOMG.
Animation example
I chose the Anime JS library for the animation - see the snippet below.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: [0.550, 0.055, 0.100, 1.000],
duration: 1500,
delay: 1200,
direction:'forwards'
});
svg {
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>
Any further questions related to the graphic itself would be better on graphic design StackExchange.
I'm working with gephi, a software to make graphs, and it exports the graps in a flat svg format.
I need to put the graph in a web page with some interactive behaviour to highlight the selection beacause it has 1800 nodes.
I would like to know if there is any way to import this svg in D3.js or some tool to transform the svg code into D3.js code
Here is a sample of the svg format with a few nodes and links.
<svg contentScriptType="text/ecmascript" width="2998.8262"
xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
contentStyleType="text/css"
viewBox="-1491.000000 -1489.000000 2998.826172 2983.000000" height="2983.0"
preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<g id="edges">
<path fill="none" stroke-width="1.0"
d="M -741.524292,330.655731 C -696.531250,212.884094 -452.384125,103.716217 -334.612488,148.709290"
class="vansdlp kshhbak" stroke-opacity="0.6"
stroke="#73c000"/>
<path fill="none" stroke-width="1.0"
d="M -334.612488,148.709290 C -379.605560,266.480927 -623.752686,375.648804 -741.524292,330.655731"
class="kshhbak vansdlp" stroke-opacity="0.6"
stroke="#73c000"/>
<path fill="none" stroke-width="23.0"
d="M -334.612488,148.709290 C -334.612488,148.709290 -174.612488,148.709290 -334.612488,148.709290"
class="kshhbak" stroke-opacity="0.6" stroke="#73c000"/>
<path fill="none" stroke-width="1.0"
d="M -1003.035095,296.450439 C -943.891846,250.989349 -786.985413,271.512512 -741.524292,330.655731"
class="linaroblujh vansdlp" stroke-opacity="0.6"
stroke="#73c000"/>
</g>
<g id="nodes">
<circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-741.5243"
class="vansdlp" cy="330.65573" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
<circle fill-opacity="1.0" fill="#73c000" r="40.0" cx="-334.6125"
class="kshhbak" cy="148.70929" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
<circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-1003.0351"
class="linaroblujh" cy="296.45044" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
</g>
<g id="node-labels-outline">
<text stroke-linecap="round" font-size="24" x="-741.5243" y="336.144"
fill="#000000" stroke-linejoin="round"
style="text-anchor: middle; dominant-baseline: central;"
font-family="Arial" class="vansdlp" stroke="#ffffff"
stroke-opacity="0.6" stroke-width="3.75px">
vansdlp
</text>
<text stroke-linecap="round" font-size="96" x="-334.6125" y="166.17023"
fill="#000000" stroke-linejoin="round"
style="text-anchor: middle; dominant-baseline: central;"
font-family="Arial" class="kshhbak" stroke="#ffffff"
stroke-opacity="0.6" stroke-width="15.0px">
kshhbak
</text>
</g>
</svg>
There is no such a thing like "converting svg to d3 code". D3 is just a JavaScript library for manipulating DOM elements based on data, and your SVG is a set of DOM elements. D3 can create those elements, and can also manipulate already existing elements. However, the most powerful feature of D3 is associating data to those elements, and in your case the SVG has been created with Gephi, so you only have the elements, and no data... that being the case, you can manipulate your SVG elements using just CSS and pure, vanilla JavaScript, without using D3.
But you can manipulate them using D3, if you want. You don't need to "convert" anything, just add your SVG to the HTML and use D3 to manipulate the SVG.
In this very basic example of an interactive behaviour the circles are turned red when you hover them, with this simple code:
d3.selectAll("circle").on("mouseover", function(d){
d3.select(this).attr("fill", "red");
}).on("mouseout", function(d){
d3.select(this).attr("fill", "#73c000")
});
Here is the example, I just copied your SVG and added the small D3 snippet. Click "run code snippet" (try "full page", because your SVG is huge!):
d3.selectAll("circle").on("mouseover", function(d){
d3.select(this).attr("fill", "red");
}).on("mouseout", function(d){
d3.select(this).attr("fill", "#73c000")
});
text {
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg contentScriptType="text/ecmascript" width="2998.8262"
xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
contentStyleType="text/css"
viewBox="-1491.000000 -1489.000000 2998.826172 2983.000000" height="2983.0"
preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<g id="edges">
<path fill="none" stroke-width="1.0"
d="M -741.524292,330.655731 C -696.531250,212.884094 -452.384125,103.716217 -334.612488,148.709290"
class="vansdlp kshhbak" stroke-opacity="0.6"
stroke="#73c000"/>
<path fill="none" stroke-width="1.0"
d="M -334.612488,148.709290 C -379.605560,266.480927 -623.752686,375.648804 -741.524292,330.655731"
class="kshhbak vansdlp" stroke-opacity="0.6"
stroke="#73c000"/>
<path fill="none" stroke-width="23.0"
d="M -334.612488,148.709290 C -334.612488,148.709290 -174.612488,148.709290 -334.612488,148.709290"
class="kshhbak" stroke-opacity="0.6" stroke="#73c000"/>
<path fill="none" stroke-width="1.0"
d="M -1003.035095,296.450439 C -943.891846,250.989349 -786.985413,271.512512 -741.524292,330.655731"
class="linaroblujh vansdlp" stroke-opacity="0.6"
stroke="#73c000"/>
</g>
<g id="nodes">
<circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-741.5243"
class="vansdlp" cy="330.65573" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
<circle fill-opacity="1.0" fill="#73c000" r="40.0" cx="-334.6125"
class="kshhbak" cy="148.70929" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
<circle fill-opacity="1.0" fill="#73c000" r="10.0" cx="-1003.0351"
class="linaroblujh" cy="296.45044" stroke="#000000"
stroke-opacity="1.0" stroke-width="1.0"/>
</g>
<g id="node-labels-outline">
<text stroke-linecap="round" font-size="24" x="-741.5243" y="336.144"
fill="#000000" stroke-linejoin="round"
style="text-anchor: middle; dominant-baseline: central;"
font-family="Arial" class="vansdlp" stroke="#ffffff"
stroke-opacity="0.6" stroke-width="3.75px">
vansdlp
</text>
<text stroke-linecap="round" font-size="96" x="-334.6125" y="166.17023"
fill="#000000" stroke-linejoin="round"
style="text-anchor: middle; dominant-baseline: central;"
font-family="Arial" class="kshhbak" stroke="#ffffff"
stroke-opacity="0.6" stroke-width="15.0px">
kshhbak
</text>
</g>
</svg>
You could try something like https://github.com/jColeChanged/svg2d3js
But d3.js generates the graphs in a data driven way. You will not get happy with such a svg2d3js approach, if you want to change and animate.
d3.js uses something like that.
aparent.selectAll('a selector')
.data(somedata)
.enter()
.append('g');
aparent.selectAll('a selector')
.do_somethin()
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.
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)