I was inspired to recreate this by the eye catching SVG with a video background on the Crustac website. This is a great way to help narrate your brand's storytelling and add continual motion to the page.
In this video I will walk you through the process with some cool tricks along the way.
Using the SVG
<text> element we can draw text like any SVG graphic element. This is a quick way to create an SVG, without having to create an illustration. The
<text> element gets wrapped in an SVG
<clipPath> element and restricts the area where the fill is applied for the SVG.
Masking The Video
Now with the
clip-path: CSS property and the
url() function we can tell the video where the SVG
<clipPath> is defined using
Vertically Align the Text
I used the
dy attribute with the
<text> element to vertically position the text. The
dy is relative to the
y coordinates and gives additional control vertically.
Responsively Center the Text
Finally we wrap the
<svg> tags in a wrapper
div with a
width: percent, set to the width of the text and
margin: 0 auto; to center the text with the video. The width percent needs to be custom styled, as the text width can't be wider than the video or the text will get cut off.
Using the SVG
<text> element is a bit trickier to position than if we used an illustrated SVG
<path> element. But here we have the option of easily changing the text and sprint ideas with a minimal amount of code.