SOURCE

<h1 contenteditable data-text="Grow">Grow</h1>

@font-face {
    font-family: 'Decovar Regular24';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf');
}

h1 {
    margin: 0;
    font-size: 20vw;
    position: relative;
    font-weight: 400;
    font-family: "Decovar Regular24";
    font-variation-settings: 'INLN' 400, 'SWRM' 1000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/209708058_b5a5fb07a6_o.jpg);
    background-size: 30%;
    background-repeat: repeat;
    text-shadow: 2px 2px 5px rgba(#2a4308, 0.4);
    animation: grow 3s linear infinite alternate;
    &:before {
        text-shadow: 1px 1px 2px rgba(#2a4308, 0.5), -1px 1px 2px rgba(#2a4308, 0.5), -1px -1px 2px rgba(#2a4308, 0.5), 1px -1px 2px rgba(#2a4308, 0.5), 3px 3px 20px rgba(#000, 0.5);
    }
    &:after {
        color: #421F00;
        font-variation-settings: 'INLN' 0;
    }
}

@keyframes grow {
    0% {
        font-variation-settings: 'INLN' 400, 'SWRM' 1000;
    }
    100% {
        font-variation-settings: 'INLN' 400, 'SWRM' 0;
    }
}

html {
    height: 100%;
}

body {
    background: radial-gradient(ellipse at center, #adbf41 20%, #328a26 80%);
    height: 100%;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    letter-spacing: 0.6rem;
    &:after,
    &:before {
        content: attr(data-text);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
    }
}