Mix Blend Mode Troubles

Design help General
1

Hi Webflowers,

I’ve been trying to troubleshoot why my ‘FLUID TEXT’ page isn’t showing the text fluidity in the way that this codepen is: https://codepen.io/robin-dela/pen/KKPYoBq

I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered, but nothing has as yet made it work. I’d really appreciate any help!

The problematic code is below: (mixed

<style>
body {
	position: fixed;
	height: 100%;
  overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.mask {
	position: absolute;
	z-index: 2;
	background: white;
	height: 100vh;
	width: 100vw;
	mix-blend-mode: screen;
	/* display: none; */
}

svg {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

</style>

Here is my site Read-Only: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview