SVG Counter (CSS Only)

index.html

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

script.babel

/*


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


*/

const isChrome = !!window.chrome

if (!isChrome) {
	
// 	bring text in center
	document
		.querySelector('.text')
		.classList
		.add('center')
	
// 	blur svg element
	document
		.querySelector('svg')
		.classList
		.add('blur')
}

style.scss

$c1: #181a27;
$c2: #e88565;
$easing: cubic-bezier(.34,1.61,.7,1);

@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')
	}
}

svg-counter-css-only.markdown

SVG Counter (CSS Only)

CSS based SVG Path Animation
(Works on Chrome)

A Pen by Siddharth Parmar on CodePen.

License.