I started by collecting images of holograms shown in movies, tv shows and music videos. Properties used to communicate something was a holograms were:
To reduce complexity, everything will be rendered within an <svg> element.
The <image> element is used to render the subject's .png file.
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.
The blur effect can be created by adding more primitives to the filter.
We can take the result from <feComponentTransfer> and:
The output of the filter is the combination of 3 images:
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:
To render the triangle below the subject, the <polygon> element is used.
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>.
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.
Have any feedback about this note or just want to comment on the state of the economy?
