title: How to add a border to an image inside an SVG circle
body: <p>I am animating a stroke around a circle using GSAP. Here's a <a href="https://codepen.io/A7DC/pen/pGRPrm" rel="nofollow noreferrer">Codepen</a>.</p>
  
  <p>What I want to do is have spacing between the outer pink and (what should be) the inner circular image, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/t2JqR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t2JqR.png" alt="enter image description here"></a></p>
  
  <p>Here's my SVG code:</p>
  
  <pre><code>      &lt;svg id='svg1' width='48' height='48' viewBox='0 0 48 48'&gt;
          &lt;defs&gt;
            &lt;clipPath id='circleView'&gt;
              &lt;circle cx='24' cy='24' r='22' fill='none' stroke='#FF62E1' strokeWidth='2' /&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
          &lt;image
            width='100%'
            height='100%'
            xlinkHref={'https://source.unsplash.com/random'}
            clipPath='url(#circleView)'
            /&gt;
          &lt;circle
            cx='24'
            cy='24'
            r='22'
            fill='none'
            stroke='#FF62E1'
            strokeWidth='2'
            strokeDasharray='100.48'
            strokeDashoffset='100.48'
            // @ts-ignore
            ref={(circle) =&gt; { this.circle = circle }} &gt;
            &gt;
          &lt;/circle&gt;
        &lt;/svg&gt;
  </code></pre>
  
  <p>I have played around with <a href="https://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape"><code>filter</code></a> and using multiple circles to create the effect, but to no avail.  </p>
  
  <p>Any ideas on how to achieve this?</p>