Left Arrow.Back
Left Arrow.Back

Notes / SVG / Hologram

Hologram

A hologram of a superhero.

SVG Hologram

Planted

Status: seed

1. Reference

I started by collecting images of holograms shown in movies, tv shows & music videos. Properties used to communicate something was a holograms were:

  • only 1 hue (blue or green),
  • only show an image's subject (no background),
  • a faded triangle positioned beneath the subject indicating the hologram's source,
  • scan lines (with a distortion animation) &
  • a blur around the edges.
Images of holograms.
A superhero with background scenary.

2. Prepare Asset

The hologram's subject will be taken from the above image of Gwen Stacy. Erase.bg was used to remove the background.

A superhero.
A hologram of a superhero.

3. Render the Image

To reduce complexity, everything will be rendered within an <svg> element. The <image> element is used to render the subject's .png file.

localhost:3000

import "./styles.css";
import "./styles.css";
A hologram of a superhero.

4. Blue

To make the subject blue, an SVG filter with the <feComponentTransfer> primitive is used. This primitive remaps the color of each pixel. If your unfamiliar with SVG filters, you can find a note explaining the fundamentals here.

localhost:3000

import "./styles.css";
import "./styles.css";
A hologram of a superhero.

5. Blur

The blur effect can be created by adding more primitives to the filter. We can take the result from <feComponentTransfer> and:

  • apply a Gaussian blur,
  • reduce the opacity &
  • translate it to the right (or left).

The output of the filter is the combination of 3 images:

  • the blue result,
  • the blurred, reduced opacity & translate left result &
  • the blurred, reduced opacity & translate right result.

localhost:3000

import "./styles.css";
import "./styles.css";
A hologram of a superhero.

6. Scan Lines

Scan lines can be created using the <pattern> element to create a series of repeating white horizontal lines. That pattern can be used wihin a <mask> & the mask applied to a <g> element. When the <image> is wrapped in the <g> element, only pixels from the <image> that overlap with white pixels from the mask will be visible. This result in a series of alternating lines going down the page: image pixels -> transparent -> image pixels -> transparent -> ...

If you are unfamiliar with SVG patterns or masks, you can find notes explaining the fundamentals here:

localhost:3000

import "./styles.css";
import "./styles.css";
A hologram of a superhero.

7. Triangle

To render the triangle below the subject, the <polygon> element is used.

localhost:3000

import "./styles.css";
import "./styles.css";
A hologram of a superhero.

8. Fade

We now need to add a fade effect that moves from the bottom to the top. The triangle should fade out and the subject should fade in. This can be achieved with an opacity mask. A white gradient of varying opacity rendered within a <mask>.

localhost:3000

import "./styles.css";
import "./styles.css";
The internationally recognized symbol for accessibility.

9. Accessibility

The last thing we need to do is address accessibility. Adding a <title> with a description of the image. Screen readers will be able to read this text & communicate what the image is for visually impaired users.

localhost:3000

import "./styles.css";
import "./styles.css";