Radial and linear gradients, animated.

index.html

<svg width="800" height="600">
<defs>
  <radialGradient id="sphere-gradient">
    <stop offset="0" stop-color="hsl(30, 100%, 80%)"/>
    <stop offset="0.75" stop-color="hsl(20, 100%, 60%)">
      <animate attributeName="offset" values="0.75;0.9;0.75" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" dur="4s" repeatCount="indefinite" />
    </stop>
    <stop offset="1" stop-color="hsl(10, 100%, 50%)">
      <animate attributeName="stop-color" values="hsl(10, 100%, 50%);hsl(40, 100%, 70%);hsl(10, 100%, 50%)" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" dur="4s" repeatCount="indefinite" />
    </stop>
  </radialGradient>

  <linearGradient id="space-gradient" x1="0" y1="0" x2="0", y2="100%">
    <stop offset="0" stop-color="hsl(250, 100%, 10%)"/>
    <stop offset="0.5" stop-color="hsl(240, 100%, 20%)">
      <animate attributeName="offset" values="0.5;0.9;0.5" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" dur="10s" repeatCount="indefinite" />
    </stop>
    <stop offset="1" stop-color="hsl(230, 100%, 30%)">
      <animate attributeName="stop-color" values="hsl(230, 100%, 30%);hsl(250, 100%, 30%);hsl(230, 100%, 30%)" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" dur="0s" repeatCount="indefinite" />
    </stop>
  </radialGradient>
</defs>

  <g class="background-layer">
    <rect width="800" height="600" fill="url(#space-gradient)" />
    </rect>
  </g>
  <g>
    <g>
      <circle id="reader" cx="100" cy="180" r="80" fill="url(#sphere-gradient)" />
    </g>
  </g>
</svg>