html,body,svg { height:100% }

gradient mask

by Sean Furrh

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask -->

<svg>
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="50%" y2="50%">
      <stop offset="5%"  stop-color="white"/>
      <stop offset="95%" stop-color="black"/>
    </linearGradient>
  </defs>

  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    
    <circle cx="10" cy="10" r="5" fill="white"/>
    <circle cx="30" cy="10" r="5" fill="white"/>
    <circle cx="10" cy="30" r="5" fill="white"/>
    <circle cx="10" cy="50" r="5" fill="white"/>
    <circle cx="28.28" cy="28.28" r="5" fill="white"/>
    <circle cx="50" cy="10" r="5" fill="white"/>
  </mask>
 
  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  
  <polygon points="0,110 0,0 110,0" fill="url(#myGradient)" mask="url(#myMask)" />
</svg>

CSS

html,
body,
svg {
  height: 100%
}