<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 800 200" width="400" height="200" version="1.1">
  <!--  cross-->
  <g>
    <!--centre circle-->
    <circle cx="100" cy="100" r="100" fill="#b2d4e5"></circle>
    <!--vertical line of cross-->
    <path d="M100 50 l0 100" stroke="white" stroke-width="20" stroke-linecap="round"></path>
    horizontal line of cross
    <path d="M50 100 l100 0" stroke="white" stroke-width="20" stroke-linecap="round"></path>
  </g>

  <!--tick-->
  <g transform="translate(300,0)">
    <!--centre circle-->
    <circle cx="100" cy="100" r="100" fill="#b2d4e5"></circle>
    <!--left line of tick-->
    <path d=" M100 150 l50 -100" stroke="white" stroke-width="20" stroke-linecap="round"></path>
    <!--right line of tick-->
    <path d="M50 100 l50 50" stroke="white" stroke-width="20" stroke-linecap="round"></path>
  </g>
  
  <!--  cross and tick animated-->
  <g transform="translate(600,0)">
    <!--centre circle-->
    <circle cx="100" cy="100" r="100" fill="#b2d4e5"></circle>
    <!--vertical line of cross aniamtes to centre, then to left part of tick and back again-->
    <path d="M100 150 l50 -100" stroke="white" stroke-width="20" stroke-linecap="round">
       <animate
        dur="2s"  attributeName="d" values="M100 50 l0 100; M100 100 l0 0; M100 150 l50 -100; M100 100 l0 0; M100 50 l0 100"  repeatCount="indefinite" />
    </path>
    <!--horizontal line of cross animates to centre, then to right part of tick and back again-->
    <path d="M50 100 l50 50" stroke="white" stroke-width="20" stroke-linecap="round">
        <animate
        dur="2s" attributeName="d" values="M50 100 l100 0; M100 100 l0 0; M50 100 l50 50; M100 100 l0 0; M50 100 l100 0"  repeatCount="indefinite"/>
    </path>
  </g>
</svg>
body {
  text-align: center;
}

svg {
  margin-top: calc(50vh - 100px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.