CODEWITHSUNDEEP
svgd3.jspathraphael
Brendan Moore
Brendan Moore

Reputation: 193

circular arc paths with svg

I am pretty new to SVG and wanted to ask for a best approach to the following design:

enter image description here

I believe SVG is the way to go here since I need hover and click effects on each of the red arc pieces. These values and this design are essentially hardcoded and will not change. Are there any tools / libraries (D3 or Raphael) that would make this easier for me?

Thanks In Advance.

Upvotes: 0

Views: 246

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101868

You don't really need d3 or even an editor. It's a design that is easy to code by hand.

I was bored, so I whipped this up in about 10 minutes.

document.getElementById("band4").addEventListener("click", function(e) {
    alert("50+");
}, false);

document.getElementById("band3").addEventListener("click", function(e) {
    alert("20-50");
}, false);

document.getElementById("band2").addEventListener("click", function(e) {
    alert("10-20");
}, false);

document.getElementById("band1").addEventListener("click", function(e) {
    alert("Less than 10");
}, false);
svg {
  position: absolute;
  top: 0px;
}


circle.band {
    fill: #a20c3e;
}

circle.band:hover {
    fill: #ca3f5e;
}

text {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    fill: white;
}

tspan.sup {
    font-size: 6px;
}

text.sub {
    font-size: 5px;
    font-weight: normal;
}
<img src="http://lorempixel.com/400/200/" width="100%"/>

<svg viewBox="-100 -100 200 100">
    <defs>
        <mask id="target">
            <rect x="-100" width="100%" height="100%" fill="black"/>
            <circle r="97" fill="white"/>
            <circle r="77" fill="black"/>
            <circle r="74" fill="white"/>
            <circle r="54" fill="black"/>
            <circle r="51" fill="white"/>
            <circle r="31" fill="black"/>
            <circle r="28" fill="white"/>
        </mask>
    </defs>
    <circle id="band4" class="band" r="98" mask="url(#target)"/>
    <circle id="band3" class="band" r="75" mask="url(#target)"/>
    <circle id="band2" class="band" r="52" mask="url(#target)"/>
    <circle id="band1" class="band" r="29" mask="url(#target)"/>
    <text y="-82" text-anchor="middle" pointer-events="none">50<tspan class="sup" font-size="50%" dy="-0.7em">+</tspan></text>
    <text y="-59" text-anchor="middle" pointer-events="none">20-50</text>
    <text y="-36" text-anchor="middle" pointer-events="none">10-20</text>
    <text y="-17" text-anchor="middle" class="sub" pointer-events="none">Less than</text>
    <text y="-6" text-anchor="middle" pointer-events="none">10</text>
</svg>

Upvotes: 0

Scott
Scott

Reputation: 449

meetamit's suggestion is a good one. Or you could look into the 'sector' method shown here: Half circle using raphael

Upvotes: 1

Related Questions