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.
The SVG <text> And <clipPath> Elements
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 id.
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 <video> and <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.
Final Code
See the Pen SVG Text With Video Background by Jeremy Faucher (@jeremyfaucher) on CodePen.
Conclusion
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.