Question

I have a circle, with a boundary ring inside it (green & static), and some “pulsing” outer circles (blue). How would I approach this to only let the portions of the “pulsing circles” that are inside the static circle be visible?

I also included the JS that makes renders the HTML for your reference, but it does not generate the SVG in the JSFiddle.

I think that layers exist in SVG, but that isnt very helpful given how I structured the rendering of the other circles.

A quick review of the way it works.

1. draw the background circle with the orange gradient, and place concentric has circles on it.
2. draw the green static circle.
3. place the four pulses at the cardinal points of the cartesian plane.
4. animate the pulses.

I know that I can measure a click within the boundaries of the main circle, so I am hoping that I can limit the animation of the pulse (maybe a hacky way) to within the green circle ring.

Maybe other circle placed on top that has a reverse fill or something? just spitting out ideas, cause I have tried everything I know of and cant find any other examples or ideas researching.

Related articles that might help you help me think of a way to accomplish this:

How to calculate the SVG Path for an arc (of a circle)

Answer 1

If I understand you correctly, you want to limit the pulsing circles to the inside of the green, non-pulsing circle. This can be done using a clip path:

<defs>
  <!-- ... -->
  <!-- Here we define the clip path, using the non-pulsing circle -->
  <clipPath id="ringClip">
    <use xlink:href="#ring-circle"/>
  </clipPath>
</defs>
<g>
  <!-- other content -->
  <!-- We put all pulsing circles into a group, 
       applying the clip path to them as a whole -->
  <g clip-path="url(#ringClip)">
    <!-- pulsing circles -->
  </g>
  <circle id="ring-circle"><!-- more attributes --></circle>
</g>

Try on jsFiddle