JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<div class="anvil svg1">

</div>

<div class="anvil svg2">

</div>

<div class="anvil svg3">

</div>

<div class="svg4">

</div>

<div class="svg5">

</div>

CSS

body {
  background: #222;
}

.anvil, .svg4::before, .svg5::before {
  background: url(http://vaughnroyko.com/chromebug/stoneanvil.png) center center no-repeat;
	background-size: 64px 64px;
	width: 64px;
	height: 64px;
  image-rendering: pixelated;
}

.svg1 {
  filter: drop-shadow(1px 0 0 #FF0000) drop-shadow(-1px 0 0 #FF0000) drop-shadow(0 1px 0 #FF0000) drop-shadow(0 -1px 0 #FF0000) drop-shadow(1px 0 0 #00B4FF) drop-shadow(-1px 0 0 #00B4FF) drop-shadow(0 1px 0 #00B4FF) drop-shadow(0 -1px 0 #00B4FF);
}

.svg2 {
  filter: drop-shadow(1px 0 0 #00B4FF) drop-shadow(-1px 0 0 #00B4FF) drop-shadow(0 1px 0 #00B4FF) drop-shadow(0 -1px 0 #00B4FF);
}

.svg3 {
  filter: drop-shadow(1px 1px 10px #00B4FF);
}

.svg4::before {
  content: "";
  display: block;
  filter: drop-shadow(1px 0 0 #00FF00) drop-shadow(-1px 0 0 #00FF00) drop-shadow(0 1px 0 #00FF00) drop-shadow(0 -1px 0 #00FF00);
}

.svg5 {
  --pre-filter: brightness(0.3);
}

.svg5::before {
  content: "";
  display: block;
  filter: var(--pre-filter) drop-shadow(1px 0 0 #0000FF) drop-shadow(-1px 0 0 #0000FF) drop-shadow(0 1px 0 #0000FF) drop-shadow(0 -1px 0 #0000FF) drop-shadow(1px 0 0 #00B4FF) drop-shadow(-1px 0 0 #00B4FF) drop-shadow(0 1px 0 #00B4FF) drop-shadow(0 -1px 0 #00B4FF)
}