SVG Hologram

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.

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.

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.

import "./styles.css";

import "./styles.css";

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.

import "./styles.css";

import "./styles.css";

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.

import "./styles.css";

import "./styles.css";

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:

• SVG pattern
• SVG mask

import "./styles.css";

import "./styles.css";

7. Triangle

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

import "./styles.css";

import "./styles.css";

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>.

import "./styles.css";

import "./styles.css";

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.

import "./styles.css";

import "./styles.css";