پیشنمایش زنده
کد HTML
<svg
viewBox="0 0 256 256"
class="glass-icon"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="mTop" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#ea4335"></stop>
<stop offset="1" stop-color="#fbbc04"></stop>
</linearGradient>
<linearGradient id="mRight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fbbc04"></stop>
<stop offset="1" stop-color="#34a853"></stop>
</linearGradient>
<linearGradient id="mBottom" x1="1" y1="0" x2="0" y2="0">
<stop offset="0" stop-color="#34a853"></stop>
<stop offset="1" stop-color="#4285f4"></stop>
</linearGradient>
<linearGradient id="mLeft" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" stop-color="#4285f4"></stop>
<stop offset="1" stop-color="#ea4335"></stop>
</linearGradient>
</defs>
<path
d="M 64 60 L 166 60 A 24 24 0 0 1 190 84"
stroke="url(#mTop)"
stroke-width="20"
stroke-linecap="round"
fill="none"
filter="drop-shadow(0 0 6px rgba(234,67,53,0.4))"
></path>
<path
d="M 190 84 V 100 L 240 70 V 186 L 190 156 V 172 A 24 24 0 0 1 166 196"
stroke="url(#mRight)"
stroke-width="20"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
filter="drop-shadow(0 0 6px rgba(52,168,83,0.4))"
></path>
<path
d="M 166 196 L 64 196 A 24 24 0 0 1 40 172"
stroke="url(#mBottom)"
stroke-width="20"
stroke-linecap="round"
fill="none"
filter="drop-shadow(0 0 6px rgba(66,133,244,0.4))"
></path>
<path
d="M 40 172 L 40 84 A 24 24 0 0 1 64 60"
stroke="url(#mLeft)"
stroke-width="20"
stroke-linecap="round"
fill="none"
filter="drop-shadow(0 0 6px rgba(66,133,244,0.4))"
></path>
</svg>
کد CSS
.glass-icon {
display: inline-block;
width: 128px;
height: 128px;
filter: grayscale(100%) opacity(0.6) brightness(3)
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
cursor: pointer;
}
.glass-icon:hover {
transform: translateY(-8px) scale(1.05);
filter: grayscale(0%) opacity(1) brightness(1)
drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}