feat: add glow to sun

This commit is contained in:
Johannes Millan 2025-04-23 18:22:15 +02:00
parent 661d558835
commit c39c294158

View file

@ -1,29 +1,77 @@
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
<svg width="400"
height="100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="groundGradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="black" stop-opacity="0" />
<stop offset="50%" stop-color="black" stop-opacity="0.01" />
<stop offset="100%" stop-color="black" stop-opacity="0.02" />
<linearGradient id="groundGradient"
x1="0"
y1="1"
x2="0"
y2="0">
<stop offset="0%"
stop-color="black"
stop-opacity="0" />
<stop offset="50%"
stop-color="black"
stop-opacity="0.01" />
<stop offset="100%"
stop-color="black"
stop-opacity="0.02" />
</linearGradient>
<mask id="fadeSides">
<linearGradient id="sideFade" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="black" stop-opacity="0" />
<stop offset="20%" stop-color="white" stop-opacity="1" />
<stop offset="80%" stop-color="white" stop-opacity="1" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
<linearGradient id="sideFade"
x1="0"
y1="0"
x2="1"
y2="0">
<stop offset="0%"
stop-color="black"
stop-opacity="0" />
<stop offset="20%"
stop-color="white"
stop-opacity="1" />
<stop offset="80%"
stop-color="white"
stop-opacity="1" />
<stop offset="100%"
stop-color="black"
stop-opacity="0" />
</linearGradient>
<rect width="100%" height="100%" fill="url(#sideFade)" />
<rect width="100%"
height="100%"
fill="url(#sideFade)" />
</mask>
<filter id="glow"
x="-50%"
y="-50%"
width="200%"
height="200%">
<feDropShadow dx="0"
dy="0"
stdDeviation="5"
flood-color="white"
flood-opacity="0.9" />
</filter>
</defs>
<filter x="-50%" y="-50%" width="200%" height="200%"/>
<circle cx="200"
cy="50"
r="40"
filter="url(#glow)"
fill="#fff" />
<circle cx="200" cy="50" r="40" fill="#fff" />
<rect y="50" width="100%" height="50" fill="url(#groundGradient)" mask="url(#fadeSides)" />
<rect y="50"
width="100%"
height="50"
fill="url(#groundGradient)"
mask="url(#fadeSides)" />
</svg>

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After