<svg viewBox="0 0 100 100" width="100" height="100">
  <title>Tyler</title>
  <defs>
    <circle id="circle" cx="50" cy="50" r="49" vector-effect="non-scaling-stroke"/>
    <clipPath id="circle-clip">
      <use xlink:href="#circle"/>
    </clipPath>
  </defs>
  <g clip-path="url(#circle-clip)">
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/penguin.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
    <use xlink:href="#circle" fill="none" stroke="#0F1C3F" stroke-width="2" opacity="0.25"/>
  </g>
</svg>
svg {
  height: auto;
  max-width: 66vmin;
  width: 66%;
}

External CSS

  1. https://codepen.io/tylersticka/pen/84283323f542da5a9690fa4581c876ec.css

External JavaScript

This Pen doesn't use any external JavaScript resources.