HTML
<div class="x">
<svg class="y" viewBox="0 0 200 200">
<linearGradient id="gradient--colors"
x1="0" y1="100%"
x2="100%" y2="0">
<stop offset="0%" stop-color="fuchsia"/>
<stop offset="50%" stop-color="fuchsia"/>
<stop offset="100%" stop-color="fuchsia"/>
</linearGradient>
<radialGradient id="gradient--colors-transparency"
fx="25%" fy="25%">
<stop offset="0%"
stop-color="black"/>
<stop offset="30%"
stop-color="black"
stop-opacity=".2"/>
<stop offset="97%"
stop-color="white"
stop-opacity=".4"/>
<stop offset="100%"
stop-color="black"/>
</radialGradient>
<mask id="mask--colors-transparency">
<rect fill="url(#gradient--colors-transparency)"
width="100%" height="100%"></rect>
</mask>
<radialGradient id="gradient--spot" fy="20%">
<stop offset="10%"
stop-color="white"
stop-opacity=".7"/>
<stop offset="70%"
stop-color="white"
stop-opacity="0"/>
</radialGradient>
<radialGradient id="gradient--bw-light" fy="10%">
<stop offset="60%"
stop-color="black"
stop-opacity="0"/>
<stop offset="90%"
stop-color="white"
stop-opacity=".25"/>
<stop offset="100%"
stop-color="black"/>
</radialGradient>
<mask id="mask--light-bottom">
<rect fill="url(#gradient--bw-light)"
width="100%" height="100%"></rect>
</mask>
<mask id="mask--light-top">
<rect fill="url(#gradient--bw-light)"
width="100%" height="100%"
transform="rotate(180, 50%, 50%)"></rect>
</mask>
<ellipse rx="55" ry="25"
cx="55" cy="55"
fill="url(#gradient--spot)"
transform="rotate(-45, 55, 55)">
</ellipse>
<circle r="50%" cx="50%" cy="50%"
fill="aqua"
mask="url(#mask--light-bottom)">
</circle>
<circle r="50%" cx="50%" cy="50%"
fill="yellow"
mask="url(#mask--light-top)">
</circle>
<ellipse rx="40" ry="20"
cx="150" cy="150"
fill="url(#gradient--spot)"
transform="rotate(-225, 150, 150)">
</ellipse>
<circle r="50%" cx="50%" cy="50%"
fill="url(#gradient--colors)"
mask="url(#mask--colors-transparency)">
</circle>
</svg>
</div>
CSS
body {
background-color: skyblue;
overflow: hidden;
}
svg {
width: 25vw;
max-width: 250px;
max-height: 250px;
padding: 2rem;
}
.x {
animation: x 20s linear infinite alternate;
}
.y {
animation: y 10s linear infinite alternate;
}
@keyframes x {
100% {
transform: translateX(400px);
}
}
@keyframes y {
100% {
transform: translateY(300px);
}
}
