<svg>
	<mask id="mask">
		<circle r="60" cx="80" cy="100"
				 class="c-mask-circle"/>
	</mask>
  
  <clipPath id="clip-path">
		<circle r="60" cx="80" cy="100"
				 class="c-mask-circle"/>
	</clipPath>
  
  <text y="15">circle:</text>
  <circle r="60" cx="80" cy="100"
				 class="c-mask-circle"/>
</svg>  
<svg>
  <text y="15">mask:</text>
  <g mask="url(#mask)">
  	<image xlink:href="https://source.unsplash.com/500x500/?blossom" width="100%" height="100%"/>
  </g>
</svg>
  
<svg>
  <text y="15">clipPath:</text>
  <g clip-path="url(#clip-path)">
  	<image xlink:href="https://source.unsplash.com/500x500/?blossom" width="100%" height="100%"/>
  </g>
</svg>
BODY {
  text-align: center;
}
svg {
  display: inline-block;
  width: 160px;
  height: 200px;
  margin: 2em 1em;
}

.c-mask-circle {
  fill: skyblue;
  stroke: steelblue;
  stroke-width: 40;
  stroke-opacity: .5;
  transform-origin: 100px 100px;
  animation: stroke-width 5s infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.