Let's talk about some randomly generated spacescapes. Obligatory eye candy:

Base Components

Before talking about how the various astronomical objects are formed, let's look at some of the basic elements used to form them: noise fields, flowfields, curlballs, gradients, and some glow and texture filters.

Noise Fields

A noise field is a way of generating texture. The basic idea is to have a grid of values and interpolations for points falling between grid points. There are several ways of interpolating values: pure value interpolation, a cellular approach based on distances to seed points, or using vector values at grid points and using dot products to interpolate. Within these basic approaches there are variations depending on how the grid is interpreted geometrically. Various approaches can be combined, sometimes at different grid scales to create a variety of effects. Here I am using a two-dimensional Open Simplex noise functions, at randomized grid scales, over rescaled points. The noise function for a given point in the canvas reports back a value in the [-1.0, 1.0] which I then map to various attributes of the astronomical object at that point.

Example: using a noise field (Perlin noise, in this case) to map the size and angle of the little droplets.


A flowfield is constructed off a gradient field by following the gradients from an initial starting point. That is, given a current point, determine the vector at that point, then move a given distance along that vector to get the next point. Connect the points. Maybe skip some line segments for a pleasing texture.


The basis of the curlballs are random smooth curls, consisting of a set of circular arcs alternating back and forth, joined smoothly along the tangents. Various parameters control the size ranges of the arcs and the radii of the curls and whether they stay in the same range or expand or contract.

If you take a set of curls and rotate them around a common starting point, you get a curlball. When the curls are all the same, you get a mandala effect:

When the curls are all different, you get a fuzzy ball:

SVG Gradients

SVG includes the ability to fill a shape or colour strokes with a colour gradient. There are two basic types: linear gradients and circular gradients. Here I am using circular gradients, which expand outwards from a central focus. There are a number of adjustments you can make: where the central focus is, where the outer circle for the gradient is (and its center does not have to be the focus, leading to off-kilter colourings). You can adjust the transparency as you go as well as the colours. You can even apply various affine transformations to the overall shape of the gradient. For colouring planets, I define the focus and center based on the location of the sun, and choose gradients to run from light to dark (so the focus is bright and oriented towards the sun). For coronas, comets, and stellar nebulas I modulate the transparency as well so that they fade out from the center.

A radial gradient, tuned to fit the stargate:

I have collected a variety of scaled colour gradients with nice properties (see [1] for a longer description) which are identified by name. For example, 'oxygen' is a gradient running through oranges from red to yellow, and 'ice' is a gradient running through blues to white.

SVG Filters: Glows, Textures

SVG has powerful "filter" capabilities: various operations that can be applied to the pixels within a visual element. These can be used to provide a variety of textural or lighting effects. There are four main ones I use for the astronomical objects:

  1. A soft glow applied to stars, comets, and stellar nebulas, in either 'oxygen' or 'ice'.
  2. A marbling texture, recoloured in various ways, applied over a base gradient to create swirly planets.
  3. Slight turbulence, applied over the noise-driven texture to smooth it out in the creation of textured planets.
  4. Speckling, applied over various objects to create a multitude of stars or a dusty appearance.

Astronomical Objects


The starfield consists of circles randomly scattered over the canvas. An open simplex noise field is used to select colours and sizes. This gives "clusters" of stars with a similar size and colouring. Colours are selected from the 'oxygen' gradient. A soft glow is applied to the stars.

Milky Way

The Milky Way consists of a bright band of whiter stars following an arc across the sky. This is drawn in groups, where each group uses a different spread that determines the range of distances from the base arc. Spreads are chosen with Zipf distribution; distances with a normal distribution. Sizes are also chosen with a Zipf distribution, so that there are a lot more smaller stars than larger stars. The whole is rendered with a soft glow and "spangling" using a speckled filter.

Sun + Corona

The Sun is mainly just a large star in how it is rendered. It may also have a corona, however, which consists of a dense curlball with a low-granularity speckling effect applied (combined with a soft glow).

Textured Planet

A textured planet uses an off-center base gradient (oriented towards the sun) overlain with semi-transparent textural circles. The colouring of the circles is drawn from a different gradient with the mapping driven by an open simplex noise field over the face of the planet. A smoothing SVG filter is applied on top.

Textured planets are a little expensive to render, and sometimes look a little moth-eaten or pixellated.

Swirly Planet

Swirly planets are coloured with an off-center base gradient (oriented towards the sun), to which a marbling filter is applied. Different colours may be used in the marbling.

Swirly planets are cheap to render, but the marbling doesn't really follow the curvature of the planet, giving them a flattened look. Some colour combinations have a decidedly unattractive paisley look to them.


Rings are constructed from multiple elliptical arcs or ellipses (depending on the angle of the rings relative to the parent planet. A rough speckling combined with a wide glow completes the look.


Comets are built like coronas, except with 'ice' colours and a narrow range of start angles (oriented relative to the sun).

Planetary Nebula

Planetary nebulas consist of two parts: a central curlball, which is built a lot like coronas and comets, and a series of shells. The shells are made from a bunch of wobbled circles clumped around a few radii. As usual, a glow and speckling is applied to complete the look. The whole is skewed to give rise to different orientations.

Nebular Flows

Nebular flows are formed using a flowfield. While flowfields are often built off noise fields, they don't have to be. For my nebular flows, I use a field based on spirals around three centers: the vector is the direction along the spiral whose center is nearest the given point. This does tend to create some dense circles, which doesn't always look that great.

When they are rendered without any additional filters, they tend to have a stylized look:

Optionally, a small-scale speckling may be applied:

Putting It All Together

To generate a complete spacescape, various randomizers select how many elements of which kind to include.