<!DOCTYPE html>
<html>
<style>
  img {
    -webkit-mask: url(resources/color-profile-mask-image.svg) top left;
    -webkit-mask-size: 33% 33%;
    -webkit-mask-repeat: space;
    width: 380px;
  }
</style>

<body>
  <!-- The blue sector of the images should be at 12 o'clock. -->

  <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="380" height="380">
   <defs>
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
     <circle cx=".5" cy=".5" r=".47" fill="white"/>
    </mask>
   </defs>
   <image xlink:href="resources/red-at-12-oclock-with-color-profile.jpg" width="380" height="380" mask="url(#mask)"/>
  </svg>

  <img src="resources/red-at-12-oclock-with-color-profile.jpg">
</body>