Grassy Text with Variable fonts.

grassy-text-with-variable-fonts.markdown

Grassy Text with Variable fonts.

Grass text effect with variable fonts! Using Decovar: https://github.com/TypeNetwork/fb-Decovar Seriously all the hard work is done by the font designer, so super props to them!

Thanks to: David Berlow https://twitter.com/dberlow Font Bureau https://twitter.com/dberlow?lang=en

A Pen by Mandy Michael on CodePen.

License.

index.html

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

script.js

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-text", this.innerText);
});

style.scss

// Chrome only people!

@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;

	// Variable font
	font-family: "Decovar Regular24"; 
	font-variation-settings: 'INLN' 1000, 'SWRM' 1000;

	// Background clip to image
	-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 4s linear infinite;
	
	&: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' 1000, 'SWRM' 1000;
	}
	
	50% {
		font-variation-settings: 'INLN' 1000, 'SWRM' 0;
	}
}


//Positioning
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;
	}
}