<div class="canvas-wrapper">
	<a href="#" class="canvas">
		<div class="canvas_border">
			<svg>
				<defs><linearGradient id="grad-orange" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(253,137,68);stop-opacity:1"></stop><stop offset="100%" style="stop-color:rgb(153,75,23);stop-opacity:1"></stop></linearGradient><linearGradient id="grad-red" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#D34F48"></stop><stop offset="100%" stop-color="#772522"></stop></linearGradient></defs>
				<rect id="rect-grad" class="rect-gradient" fill="none" stroke="url(#grad-orange)" stroke-linecap="square" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%"></rect>
			</svg>
		</div>
		<div class="canvas_img-wrapper">
			<img class="canvas_img" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="">
		</div>
		<div class="canvas_copy canvas_copy--left">
			<span class="canvas_copy_subtitle">Heading</span>
			<strong class="canvas_copy_title">Hello</strong>
			<strong class="canvas_copy_title">World</strong>
			<span class="canvas_copy_details">Details and stuff</span>
		</div>
	</a>
	<a href="#" class="canvas">
		<div class="canvas_border">
			<svg>
				<defs><linearGradient id="grad-orange" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(253,137,68);stop-opacity:1"></stop><stop offset="100%" style="stop-color:rgb(153,75,23);stop-opacity:1"></stop></linearGradient><linearGradient id="grad-red" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#D34F48"></stop><stop offset="100%" stop-color="#772522"></stop></linearGradient></defs>
				<rect id="rect-grad" class="rect-gradient" fill="none" stroke="url(#grad-orange)" stroke-linecap="square" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%"></rect>
			</svg>
		</div>
		<div class="canvas_img-wrapper">
			<img class="canvas_img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/249772/Twitter_Logo_Blue.png" alt="">
		</div>
		<div class="canvas_copy">
			<span class="canvas_copy_subtitle">Heading</span>
			<strong class="canvas_copy_title">Hello</strong>
			<strong class="canvas_copy_title">World</strong>
			<span class="canvas_copy_details">Details and stuff</span>
		</div>
	</a>
</div>

@import url('https://fonts.googleapis.com/css?family=Lato:300,900');

$transition-ease-in-out: all .25s ease-in-out 0s;
$transition-cubic-bezier : all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
$animation-offset: 80px;

*, :after, :before {
    box-sizing: border-box;
}
html, body {
	height: 100%;
}
body {
	font-family: "Lato", sans-serif;
	background: #eee;
	padding: 100px 60px;
	animation: fade-in 3s ease-in-out forwards;
}
strong {
	font-weight: 900;
}
.canvas-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	
	.canvas + .canvas {
		margin-left: 40px;
	}
}
.canvas {
	position: relative;
	display: block;
	width: 400px;
	height: 400px;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}
.canvas_border {
	position: absolute;
	top: 40px;
	left: -40px;
	height: 100%;
	width: 100%;
	z-index: 0;

	svg {
		height: 100%;
		width: 100%;
	}
}
.rect-gradient {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: erase-line 1s ease-in-out forwards;
}
.canvas_img-wrapper {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: rotate(-10deg) skew(-10deg);
	overflow: hidden;
	background: white;
}
.canvas_img {
	transform: scale3d(.9,.9,.9);
	opacity: .3;
	max-width: 200px;
	max-height: 200px;
}
.canvas_copy {
	position: absolute;
	bottom: 0;
	left: 85%;
	text-transform: uppercase;
	color: #dac527;
	z-index: 100;
}
.canvas_copy--left {
	left: -25%;
}
.canvas_copy_title {
	font-size: 62px;
	display: block;
	transform: translateX(-#{$animation-offset});
		transition: $transition-cubic-bezier 0s;
		color: black;

		&:nth-child(1) {
			transition-delay: 0.1s;
			}
		&:nth-child(2) {
			transition-delay: 0.2s;
			}
}
.canvas_copy_subtitle {
	display: block;
	transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - #{$animation-offset}));
	transform-origin: top left;
	position: absolute;
	left: 0;
	top: 8px; //This needs to change with font size. It's an offset for the line-height of the "hellow world"
	font-size: 24px;
	font-weight: 900;
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s;
}
.canvas_copy_details {
	display: block;
	transition: $transition-cubic-bezier 0.14s;
	transform: translateX(-#{$animation-offset});
		}
.canvas_border, .canvas_img-wrapper, .canvas_img  {
	transition: $transition-ease-in-out;	
}
.canvas_border, .canvas_img-wrapper {
	transform: rotate(-10deg) skew(-10deg);	
}
.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details {
	opacity: 0;
}
.canvas:hover {
	.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details, .canvas_img {
		opacity: 1;
	}
	.canvas_border, .canvas_img-wrapper {
		transform: rotate(-14deg) skew(-14deg) scale(0.96);
	}
	.canvas_img {
		transform: scale3d(1,1,1);
	}
	.canvas_copy_title, .canvas_copy_details {
		transform: translateX(0);
	}
	.canvas_copy_subtitle {
		transform: rotate(270deg) translateY(-100%) translateX(-100%);
	}
	.rect-gradient {
		animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	}
}

@keyframes draw-line {
	from {
		stroke-dashoffset: 2000;		
	}
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes erase-line {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 2000;		
	}
}
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}