How to make an animation on SVG in this way?

Short answer

The effect of the appearance of the inscription is achieved using three layers:

• Static text that is located along the semicircle patch
• Above to mask text, there is a patch with the background color.
• An animated mask that erases the masking patch.
  Plus a colored circle that moves with the mask

 text { font-size: 18px; font-family: serif; font-weight: 900; text-transform: uppercase; fill:#535353; } .container { width:50%; height:50%; } 

  <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" > <defs> <mask id="mask1" maskUnits="userSpaceOnUse"> <path fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" > <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> </path> </mask> <path id="Crc" fill="none" stroke="white" stroke-width="30" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" /> <filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" > <feGaussianBlur stdDeviation="5"> <animate attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" /> </feGaussianBlur> </filter> </defs> <image xlink:href="https://i.stack.imgur.com/1REYQ.png" transform="translate(0 10)" width="300px" height="300px" /> <text dy="0" textLength="100%" letter-spacing="4.8" > <textPath xlink:href="#Crc" startOffset="0%" >S olutions & consult </textPath> </text> <path class="clef dot" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" stroke="white" stroke-width="35" mask="url(#mask1)" > </path> <circle cx="0" cy="3" r="12" fill="#00F1F5" filter="url(#hole-blur)" > <animateMotion id="an" dur="5s" repeatCount="1" rotate="auto-reverse" begin="0s" fill="freeze" restart="whenNotActive"> <mpath xlink:href="#Crc"/> </animateMotion> </circle> </svg> </div> 

In detail

• The text is located along the semicircle patch.

  <text dy="0" textLength="100%" letter-spacing="4.8" > <textPath xlink:href="#Crc" startOffset="0%" >S olutions & consult </textPath>

For a cross-browser solution, I had to look for options so that the filling and the spacing between the letters were the same: textLength="100%" letter-spacing="4.8"

• Above to mask text, there is a patch with the background color.

  <path id="Crc" fill="none" stroke="white" stroke-width="30" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" />

  The patch has the shape of an arc in a semi-circle and its width stroke-width="30" completely overlaps the text

• An animated mask that erases the masking patch.

  <mask id="mask1" maskUnits="userSpaceOnUse"> <path fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" > <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> </path> </mask>

The mask has the same path shape as the masking patch, the stroke="white" mask attribute makes the masking patch transparent. Animation effect of mask movement is achieved by changing the attribute stroke-dashoffset

• Colored circle that moves with the mask

Moves the same way as the mask. Shadow Blur Effect - Gaussian Filter

<filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" > <feGaussianBlur stdDeviation="5"> <animate attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" /> </feGaussianBlur> </filter>

Animation of increasing, decreasing the blur of a circle is achieved by changing the attribute stdDeviation

1. The example works in all modern browsers except IE , which by definition does not know how to work with animation.
2. Example is adaptive
3. You can create similar applications for your projects, changing only the text and image.

DEMO LIVE

Example with a different picture

Changed the text and needed to fit the size of the image and its positioning

<image xlink:href="https://i.stack.imgur.com/1zUoo.png" transform="translate(20 85)" width="250px" height="250px" />

 text { font-size: 18px; font-family: serif; font-weight: 900; text-transform: uppercase; fill:black; } .container { width:50%; height:50%; } 

  <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" > <defs> <mask id="mask1" maskUnits="userSpaceOnUse"> <path fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" > <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> </path> </mask> <path id="Crc" fill="none" stroke="white" stroke-width="30" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" /> <filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" > <feGaussianBlur stdDeviation="5"> <animate attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" /> </feGaussianBlur> </filter> </defs> <image xlink:href="https://i.stack.imgur.com/1zUoo.png" transform="translate(20 85)" width="250px" height="250px" /> <text dy="0" textLength="100%" letter-spacing="4.8" > <textPath xlink:href="#Crc" startOffset="0%" >Our club come & consult </textPath> </text> <path class="clef dot" d="M 100, 200 m -75, 0 a 75,75 0 1,1 250,0" stroke="white" stroke-width="35" mask="url(#mask1)" > </path> <circle cx="0" cy="3" r="12" fill="#03ABF3" filter="url(#hole-blur)" > <animateMotion id="an" dur="5s" repeatCount="1" rotate="auto-reverse" begin="0s" fill="freeze" restart="whenNotActive"> <mpath xlink:href="#Crc"/> </animateMotion> </circle> </svg> </div>