JSFiddle - React, Tailwind, and code Playground

by Drew Noakes

HTML

<svg id="svgLogo1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <defs>
        
        <!-- a transparent grey drop-shadow that blends with the background colour -->
        <filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
            <feColorMatrix result="bluralpha" type="matrix" values=
                    "1 0 0 0   0
                     0 1 0 0   0
                     0 0 1 0   0
                     0 0 0 0.4 0 "/>
            <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
            <feMerge>
                <feMergeNode in="offsetBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        
        <!-- a transparent grey glow with no offset -->
        <filter id="black-glow">
            <feColorMatrix type="matrix" values=
                        "0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0.7 0"/>
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        
        <!-- a transparent glow that takes on the colour of the object it's applied to -->
        <filter id="glow">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        
    </defs>
    
    <g transform="translate(20,20)">
        <rect x="0" y="0"  width="40" height="40" rx="5" ry="5" style="fill: #ddd; filter:url(#shadow)"/>
        <rect x="0" y="50"  width="40" height="40" rx="5" ry="5" style="fill: #d00; filter:url(#black-glow)"/>
        <rect...

CSS

body { background-color:#dfe; }