<div class="text">Works on Chrome (latest)</div>
<svg xmlns="http://www.w3.org/svg/2000" viewBox="0 0 50 100">
	<path d='M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0' />
</svg>
$c1: #181a27;
$c2: #e88565;
$easing: cubic-bezier(.34,1.61,.7,1);

// adding this to
// counter the rule applied
// by normalize.css
svg:not(:root) {
	overflow: visible;
}

@mixin centmid {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

* {
	box-sizing: border-box;
}

body {
	background-color: $c1;
}

.text {
	color: $c2;
	font-weight: 100;
	font-size: .8em;
	padding: 5px;
}

.text.center {
	@include centmid;
	font-size: 1.5em;
}

svg {
	width: 150px;
	height: 300px;
	@include centmid;
	padding: 15px;
}

svg.blur {
	filter: blur(5px);
}

path {
	stroke: $c2;
	stroke-width: 1px;
	fill: none;
	animation: morph 15s infinite $easing;
}

@keyframes morph {
	0%,
	7% {
		d: path('M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0')
	}
	11%,
	17% {
		d: path('M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100')
	}
	21%,
	27% {
		d: path('M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100')
	}
	31%,
	37% {
		d: path('M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50')
	}
	41%,
	47% {
		d: path('M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100')
	}
	51%,
	57% {
		d: path('M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100')
	}
	61%,
	67% {
		d: path('M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50')
	}
	71%,
	77% {
		d: path('M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100')
	}
	81%,
	87% {
		d: path('M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50')
	}
	91%,
	96% {
		d: path('M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50')
	}
}
View Compiled
/*


 \
 _\,,
"-=\~     _
	 \\~___( ~
	_|/---\\_
	\        \


*/

const text = document.querySelector('.text')
const svg = document.querySelector('svg')

const support = 'd' in text.style


if (!support) {
	
// 	bring text in center
	text.classList.add('center')
	
// 	blur svg element
	svg.classList.add('blur')
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.