Apply SVG pixelation filter as mask.

by dievardump

HTML

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="bwNoise">
      <feTurbulence 
        type="fractalNoise" 
        baseFrequency="0.5"
        numOctaves="1"
        seed="5"
        result="noise"/>
      
      <!-- Make everything white and use noise red channel as alpha -->
      <feColorMatrix 
        type="matrix"
        values="0 0 0 0 1
                0 0 0 0 1
                0 0 0 0 1
                1 0 0 0 0"
        result="alpha"/>
      
      <!-- Create hard binary threshold -->
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 0 0 1 1 1 1 1"/>
      </feComponentTransfer>
    </filter>
    
    <!-- Reusable mask -->
    <mask id="noiseMask">
      <rect width="100%" height="100%" fill="white" filter="url(#bwNoise)"/>
    </mask>
  </defs>
  
  <!-- Red background to see transparency -->
  <rect width="600" height="400" fill="red"/>
  
  <!-- Apply mask to a circle with scaling -->
  <circle cx="300" cy="200" r="150" fill="coral" mask="url(#noiseMask)" transform="scale(3)"/>
</svg>