A simple reflect effect with SVG

by JeremiePat

HTML

<svg width="100%" height="100%" viewbox="0 0 200 200">
    <defs>
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="0%" y2="100%">  
            <stop offset="10%"  stop-color="#000"/>
            <stop offset="35%"  stop-color="#202020"/>
            <stop offset="100%" stop-color="#CCC"/>
        </linearGradient>  
        
        <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
            <rect x="0" y="100" width="200" height="100" fill="url(#myGradient)" />
        </mask>
    </defs>
    
    <g id="myObject">
        <rect x="0" y="0" width="200" height="99" />
        <circle cx="30" cy="80" r="10" fill="red" />
        <text x="45" y="87" font-size="20px" font-family="sans-serif" fill="white">MIRROR</text>
    </g>
    
    <g transform="translate(0 299) scale(1 -1)" mask="url(#myMask)">
        <use xlink:href="#myObject" y="100" />
    </g>
</svg>

CSS

body{
    background-color: #FFC;
}

svg {
    display: block;
}