SVG — рисунки кодом — 3. Заливки и градиенты

<svg width="280" height="200" viewBox="0 0 280 200" role="img" aria-label="Небо и солнце">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#38bdf8"/>
      <stop offset="100%" stop-color="#1e3a8a"/>
    </linearGradient>
    <radialGradient id="sun" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fef08a"/>
      <stop offset="100%" stop-color="#f97316"/>
    </radialGradient>
  </defs>
  <rect width="280" height="200" fill="url(#sky)"/>
  <circle cx="220" cy="50" r="35" fill="url(#sun)"/>
</svg>