SVG(arc) sample

HTML

<svg width=240 height=240>
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 220
            Z"
    fill = "lightskyblue">
    </path>
</svg>



<svg width=240 height=240>
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 120
            A100, 100, 0, 0, 1, 120, 220
            Z"
    fill = "skyblue">
    </path>
</svg>

CSS

svg:hover {transform:scale(1.5) rotate(30deg);}

svg {transition: all 1s ease;}