JSFiddle - React, Tailwind, and code Playground

by EoghanM

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="344" width="440">    
   <g id="outline-me">
  <rect  x="130" y="10" width="20" height="20" />
  <rect  x="130" y="30" width="20" height="20" />
  <rect  x="110" y="30" width="20" height="20" />
  <rect  x="150" y="30" width="20" height="20" />
  <rect  x="130" y="50" width="20" height="20" />
   </g>

<g id="outline-me-transparent">
  <rect  x="230" y="210" width="20" height="20" />
  <rect  x="230" y="230" width="20" height="20" />
  <rect  x="210" y="230" width="20" height="20" />
  <rect  x="250" y="230" width="20" height="20" />
  <rect  x="230" y="250" width="20" height="20" />
   </g>
   

</svg>

CSS

svg { background: pink; }

#outline-me {
  		filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black);
  
}

#outline-me rect {
  fill: lightblue;
}



#outline-me-transparent {
 /* doesn't work should see pink in middle of cross */
  		filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black);      
      mix-blend-mode: darken;  /* this works to make the white transparent in html - but not in svg */
      isolation: isolate;  /* this doesn't work for me https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#using_mix-blend-mode_with_svg */
}
#outline-me-transparent rect {
   fill: white;         
}