I am trying to run a CSS/JavaScript animation INSIDE of text letters. I'm not sure if this is even possible. I am trying to make blades of grass grow, but have the containing the animation show through only where the letters should be. Grass animation Screenshot
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face{
font-family: BuildingBloc;
src: url('BuildingBloc.ttf');
}
body{
font-family: BuildingBloc;
font-size: 100px;
}
#grass, #text{
position:fixed;
bottom:50vh;
}
#text{
z-index: 10;
}
</style>
</head>
<body>
<div id="text">LAWN</div>
<div id="grass">
<script>
let grassWidth = 470;
let grassHeight;
let angle;
let leftRight;
for(let i = 0;i<grassWidth;i++){
grassHeight = 50 + Math.ceil(Math.random() * 50);
angle = Math.ceil(Math.random() * 20);
leftRight = Math.ceil(Math.random() * 2);
if (leftRight == 1) angle = -angle;
document.write(`<div class="grass-blade"
style="
height:${grassHeight}px;
transform: rotate(${angle}deg);
width:1px;
display:inline-block;
background:green;">
</div>`);
}
</script>
</div>
<script>
let grassDiv = document.querySelector('#grass');
grassDiv.style.overflow = 'hidden';
let pause = 0;
for (let i=0;i<100;i++){
pause+=100;
setTimeout(function(){grassDiv.style.height = `${i}px`},pause);
}
</script>
</body>
</html>