We use here CSS keyframes animation on strokes and fill. At the beginning the circle stroke path is animated by use of long dash animation. When we click on the circle, the 'check' line path is animated by long dash animation. In addition the shadow of outer circle is animated to fill the check-box.
Pay attention how the svg block is located. It is located by adding the class to the svg tag and defining the location by the regular 'margin: 10px auto'. In addition we define the svg tag area to be like a regular HTML circle (with border-radius), and apply the shadow to it. The shadow is animated in the 'fill' animation.
See also Codrops Animated Checkboxes and Radio Buttons with SVG demo and article.