JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<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>
    <g transform="translate(300,300)" mask="url(#centrehole)">
        <!-- outer bevel -->
        <g>
            <!-- light segment -->
            
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#EFF0F1"/>
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#dd2f2f"/>
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#6cae3e"/>

            <!-- light rounded end -->
            <circle cx="0" cy="235" r="40" fill="#EFF0F1"/>
            <circle cx="-235" cy="0" r="40" fill="#dd2f2f"/>
            <circle cx="0" cy="-235" r="40" fill="#6cae3e"/>
        </g>
        <!-- inner bevel - same as above but with different colours and is masked -->
        <g mask="url(#innerbevel)">
            <!-- light segment -->
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#d1d7dd"/>
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#a51c32"/>
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#558b2f"/>

            <!--rounded end -->
            <circle cx="0" cy="235" r="40" fill="#d1d7dd"/>
            <circle cx="-235" cy="0" r="40" fill="#a51c32"/>
            <circle cx="0" cy="-235" r="40" fill="#558b2f"/>
        </g>
    </g>

</svg>