<h1>With CSS filters</h1>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<rect width="100" height="100" fill="pink" stroke="red" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-filter">
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }
.css-filter {
filter: drop-shadow(2px 0 0 antiquewhite) drop-shadow(-2px 0 0 antiquewhite) drop-shadow(0 2px 0 antiquewhite) drop-shadow(0 -2px 0 antiquewhite) drop-shadow(1px 0 0 red) drop-shadow(-1px 0 0 red) drop-shadow(0 -1px 0 red) drop-shadow(0 1px 0 red);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.