How to build this rounded bicolor tablet?

Question

I'm trying to make a donut chart that looks like below

I will use angularJS, SVG and D3.js

I do not know how to get these rounded ends, please help. Thank.

Answer 1

The simple answer: you use masks.

We use a mask to paint the inside of the frame. And a mask to cut a hole in the middle.

Holes are not needed. You can form a donut with thick lines. But it was easier for me to draw circular sectors, and then make a hole.

Here it is in the form of SVG. I will leave the conversion to D3.

<svg width="600" height="600">
    <defs>
        <!-- masks out the area outside and inside the inner bevel region -->
        <mask id="innerbevel">
            <rect width="100%" height="100%" fill="black"/>
            <circle cx="0" cy="0" r="235" fill="white"/>
        </mask>
        <!-- cuts hole in centre of graph -->
        <mask id="centrehole">
            <rect x="-100%" y="-100%" width="200%" height="200%" fill="white"/>
            <circle cx="0" cy="0" r="195" fill="black"/>
        </mask>
    </defs>

    <!-- Graph is drawn centred at (0,0). The transform moves it into middle of SVG. -->
    <!-- The mask forms the hole in the centre. -->
    <g transform="translate(300,300)" mask="url(#centrehole)">
        <!-- outer bevel -->
        <g>
            <!-- light blue segment -->
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#89e4d2"/>
            <!-- red segment -->
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#f394a2"/>
            <!-- blue segment -->
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#a3a4ff"/>

            <!-- light blue rounded end -->
            <circle cx="0" cy="235" r="40" fill="#89e4d2"/>
            <!-- red rounded end -->
            <circle cx="-235" cy="0" r="40" fill="#f394a2"/>
            <!-- blue rounded end -->
            <circle cx="0" cy="-235" r="40" fill="#a3a4ff"/>
        </g>
        <!-- inner bevel - same as above but with different colours and is masked -->
        <g mask="url(#innerbevel)">
            <!-- light blue segment -->
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#5bc8b7"/>
            <!-- red segment -->
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#ef6974"/>
            <!-- blue segment -->
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#6b5dff"/>

            <!-- light blue rounded end -->
            <circle cx="0" cy="235" r="40" fill="#5bc8b7"/>
            <!-- red rounded end -->
            <circle cx="-235" cy="0" r="40" fill="#ef6974"/>
            <!-- blue rounded end -->
            <circle cx="0" cy="-235" r="40" fill="#6b5dff"/>
        </g>
    </g>

</svg>

Run codeHide result