```metadata
title: SVG Magic Filters
description: >-
  This example brew uses the magic of SVG filtering; the first removes the pure
  white background from an image, while the second pixelates the image.
tags:
  - example
  - reddit
  - svg
systems: []
renderer: V3
theme: 5ePHB

```

```css
.page .removeWhiteBackground {
  filter: url(#removeWhite);
}


```

<!-- Wasteland -->
![](https://img00.deviantart.net/b844/i/2013/126/2/d/wasteland__commission__by_ehecod-d64attr.png){position:absolute,top:0,left:0,width:1016px,filter:url(#pixelate)}

<!-- Stain -->
<!-- ![](https://i.imgur.com/Tkbl4ji.png){position:absolute,left:0,top:0,width:100%} -->

<!-- Warrior -->
![](https://i.pinimg.com/originals/12/04/40/1204403bb365661bb17fdd2ecdd6584c.png){position:absolute,top:0,left:0,width:550px,filter:url(#removeWhiteBackground)}


<svg>
  <filter id='removeWhiteBackground'>
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="l2a"></feColorMatrix>
    <feComponentTransfer in="l2a" result="mod_l2a">
      <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
    </feComponentTransfer>
    <feComposite in="SourceGraphic" in2="mod_l2a" operator="out"></feComposite>
  </filter>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="2" width="2"/>    
    <feComposite width="10" height="10"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate" radius="5"/>
  </filter>
</svg>