Reference
I started by collecting images of holograms shown in movies, tv shows and 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.
Prepare Asset
The hologram's subject will be taken from the above image of Gwen Stacy. Erase.bg was used to remove the background.
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.
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.
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 and translate left result and
- ▪ the blurred, reduced opacity and translate right result.
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> and 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:
Triangle
To render the triangle below the subject, the <polygon> element is used.
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>.
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 and communicate what the image is for visually impaired users.
Feedback
Have any feedback about this note or just want to comment on the state of the economy?
