Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Oct 16, 2016
Embed
What would you like to do?
SVG Counter (CSS Only)
<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>
/*
\
_\,,
"-=\~ _
\\~___( ~
_|/---\\_
\ \
*/
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')
}
$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')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment