<div class="husky">
<div class="mane">
<div class="coat"></div>
</div>
<div class="body">
<div class="head">
<div class="ear"></div>
<div class="ear"></div>
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="nose"></div>
<div class="mouth">
<div class="lips"></div>
<div class="tongue"></div>
</div>
</div>
</div>
<div class="torso"></div>
</div>
<div class="legs">
<div class="front-legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
<div class="hind-leg">
</div>
</div>
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>
$color-bg: #4F8EDB;
$color-primary: rgba(#30508F, 0.3);
$color-primary: #30508F;
$color-white: rgba(white, 0.3);
$color-white: white;
$color-light: #9EB6D7;
$color-lighter: #C8DAF2;
$color-dark: #343C60;
$color-ear: #DE6465;
$color-tongue: $color-ear;
$duration: 12s;
$total-kf: 15;
$k-head: (
0: rotate(0),
1: rotate(0),
3: rotate(-14deg),
6: rotate(-7deg),
7: rotate(-14deg),
9: rotate(-7deg),
11: rotate(0),
12: rotate(0)
);
$k-mouth: (
0: translateX(0),
1: translateX(0),
2: translateX(35%),
3: translateX(35%),
4: translateX(35%),
5: translateX(0) translateY(-5%)
);
$k-nose: (
0: translate(0),
1: translate(0),
2: translateX(100%),
4: translateX(100%),
5: translateX(0) translateY(-15%)
);
$k-body: (
0: translate(0),
1: translateY(3%),
2: translate(0),
3: translate(0),
4: translateY(2%),
5: translateY(0),
);
$k-mane: map-merge($k-body, (
1: translateY(5%),
4: translateY(3%)
));
$k-face: (
0: translate(0),
1: translate(0),
2: translateX(15%),
3: translateX(15%) translateY(0),
4: translateX(15%) translateY(0),
5: translateX(0) translateY(-15%),
6: translateX(0) translateY(-15%),
7: translateX(0) translateY(0),
);
$k-left-eye: (
0.4: scaleY(1),
0.5: scaleY(0.3),
0.6: scaleY(1),
1: translateX(0),
1.4: scaleY(1) translateX(75%),
1.5: scaleY(0.3) translateX(75%),
1.6: scaleY(1) translateX(75%),
2: translateX(150%),
3.3: scaleY(1) translateX(150%),
3.4: scaleY(0.3) translateX(150%),
3.5: scaleY(1) translateX(150%),
3.8: scaleY(1) translateX(150%),
3.9: scaleY(0.3) translateX(150%),
4.0: scaleY(1) translateX(150%),
5: translateX(0) translateY(-170%),
5.4: scaleY(1) translateY(-170%),
5.5: scaleY(0.3) translateY(-170%),
5.6: scaleY(1) translateY(-170%),
5.7: scaleY(1) translateY(-170%),
5.8: scaleY(0.3) translateY(-170%),
5.9: scaleY(1) translateY(-170%),
8: translateY(0),
9.8: scaleY(1) translateY(0),
9.9: scaleY(0.3) translateY(0),
10.0: scaleY(1) translateY(0),
10.5: scaleY(1) translateY(0),
10.6: scaleY(0.3) translateY(0),
10.7: scaleY(1) translateY(0),
);
$k-right-eye: $k-left-eye;
$k-tongue: (
7: translateY(0),
8: translateY(100%) rotate(10deg),
11: translateY(100%) rotate(10deg),
12: translateY(0)
);
$k-mouth-cover-left: (
6: rotate(0),
9: rotate(90deg),
11: rotate(90deg),
13: rotate(0)
);
$k-mouth-cover-right: (
6: rotate(0),
9: rotate(-90deg),
11: rotate(-90deg),
13: rotate(0)
);
$k-tail: (
1: rotate(0),
1.5: rotate(30deg),
2: rotate(0),
3: rotate(0),
4: rotate(30deg),
7: rotate(30deg),
7.25: rotate(0),
);
$tail-wags: 14;
$tail-interval: (11 - 7.5) / $tail-wags;
@for $i from 1 through $tail-wags {
$k-tail: map-merge($k-tail, (
(($i - 1) * $tail-interval + 7.5): rotate(28deg),
(($i - 0.5) * $tail-interval + 7.5): rotate(0)
)) !global;
}
$k-left-ear: (
0: rotate(6deg),
1: rotate(6deg),
2: rotate(15deg),
4: rotate(15deg),
5: rotate(30deg),
6: rotate(30deg),
7: rotate(0deg),
8: rotate(0deg),
9: rotate(15deg),
12: rotate(15deg),
14: rotate(6deg),
$total-kf: rotateZ(6deg)
);
$k-right-ear: (
0: rotateZ(-16deg),
1: rotateZ(-16deg),
2: rotateZ(-19deg),
4: rotateZ(-19deg),
5: rotateZ(-30deg),
5.5: rotateZ(-19deg),
5.6: rotateZ(-30deg),
5.7: rotateZ(-19deg),
6: rotateZ(-19deg),
6.1: rotateZ(-30deg),
6.2: rotateZ(-19deg),
7: rotateZ(-9deg),
8: rotateZ(-9deg),
9: rotateZ(-19deg),
9.1: rotateZ(-30deg),
9.2: rotateZ(-19deg),
9.4: rotateZ(-19deg),
9.5: rotateZ(-30deg),
9.6: rotateZ(-19deg),
12: rotateZ(-19deg),
14: rotateZ(-16deg),
$total-kf: rotateZ(-16deg)
);
@each $i, $prop in $k-right-ear {
$k-right-ear: map-merge($k-right-ear, (
$i: $prop + ' ' + rotateY(180deg)
));
}
@mixin effect($name, $kf) {
@keyframes #{$name} {
@each $interval, $transform in $kf {
#{percentage($interval/$total-kf)} {
transform: $transform;
}
}
}
}
@include effect('head', $k-head);
@include effect('mouth', $k-mouth);
@include effect('nose', $k-nose);
@include effect('body', $k-body);
@include effect('mane', $k-mane);
@include effect('face', $k-face);
@include effect('left-eye', $k-left-eye);
@include effect('right-eye', $k-right-eye);
@include effect('tongue', $k-tongue);
@include effect('mouth-cover-left', $k-mouth-cover-left);
@include effect('mouth-cover-right', $k-mouth-cover-right);
@include effect('tail', $k-tail);
@include effect('left-ear', $k-left-ear);
@include effect('right-ear', $k-right-ear);
*, *:before, *:after {
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.husky {
animation: squiggly-anim 0.3s infinite;
height: 60vmin;
width: 84vmin;
@media screen and (max-width: 400px) {
// Chrome for Android chokes
animation: none;
}
&:before {
width: 90%;
height: 0.5vmin;
background: $color-primary;
border-radius: 0.5vmin;
top: 100%;
left: 5%;
z-index: 2;
}
&:after {
width: 100%;
height: 10%;
top: calc(100% + 0.5vmin);
z-index: 3;
background: $color-bg;
}
}
div:before, div:after {
content: '';
display: block;
position: absolute;
}
.head {
animation: head $duration none infinite;
position: absolute;
height: 45%;
width: 58%;
left: 34%;
top: 5%;
transform-origin: bottom center;
&:before {
background: $color-primary;
border-top-left-radius: 50% 40%;
border-top-right-radius: 50% 40%;
border-bottom-right-radius: 10% 60%;
height: 100%;
width: 100%;
}
}
.face {
animation: face $duration none infinite;
position: absolute;
width: 98%;
height: 62%;
top: 15%;
left: 2%;
&:before {
z-index: 1;
width: 94%;
height: 70%;
left: 3%;
background-color: $color-white;
bottom: 5%;
border-top-left-radius: 40% 50%;
border-top-right-radius: 40% 50%;
border-bottom-left-radius: 30% 50%;
border-bottom-right-radius: 30% 40%;
}
}
.eye {
animation: eyes $duration none infinite;
position: absolute;
width: 30%;
height: 40%;
background-color: $color-white;
right: 45%;
border-top-left-radius: 55% 50%;
border-top-right-radius: 45% 50%;
z-index: 2;
&:before {
animation: left-eye $duration none infinite;
height: 15%;
width: 15%;
border-radius: 100%;
background: $color-dark;
top: 45%;
left: 45%;
transform-origin: center center;
}
+ .eye {
z-index: 1;
right: initial;
left: 48%;
border-top-right-radius: 55% 50%;
border-top-left-radius: 45% 50%;
}
}
.nose {
animation: nose $duration none infinite;
z-index: 2;
position: absolute;
width: 20%;
height: 20%;
top: 29%;
left: 42%;
&:after {
background: $color-primary;
height: 100%;
width: 100%;
border-top-left-radius: 20% 20%;
border-top-right-radius: 30% 20%;
border-bottom-right-radius: 55% 80%;
border-bottom-left-radius: 50% 80%;
}
&:before {
height: 100%;
width: 200%;
background: $color-white;
top: 50%;
left: -50%;
z-index: -1;
border-radius: 50%;
}
}
.ear {
animation: left-ear $duration both infinite;
position: absolute;
top: 3%;
left: -10%;
width: 48%;
height: 30%;
border-bottom-left-radius: 100% 90%;
border-top-left-radius: 10%;
transform-origin: 80% center;
overflow: hidden;
background: $color-primary;
&:before {
width: 70%;
height: 55%;
border: 2px solid $color-primary;
background: $color-ear;
top: 20%;
left: 15%;
transform-origin: top left;
transform:
skewX(30deg)
rotate(-5deg);
}
&:after {
width: 70%;
height: 100%;
border-top-left-radius: 100%;
background: $color-primary;
left: 32%;
transform-origin: top left;
transform: rotate(-5deg);
}
+ .ear {
animation: right-ear $duration both infinite;
background-color: $color-dark;
left: 15%;
top: 5%;
z-index: -1;
transform-origin: right center;
&:before {
border-color: $color-dark;
}
&:after {
background: $color-dark;
}
}
}
.mouth {
z-index: 1;
animation: mouth $duration none infinite;
position: absolute;
width: 48%;
height: 55%;
bottom: -5%;
left: 28%;
overflow: hidden;
&:before, &:after {
animation: mouth-cover-left $duration none infinite;
width: 28%;
height: 100%;
background: $color-white;
top: -50%;
left: 0;
z-index: 3;
transform-origin: right top;
}
&:after {
animation: mouth-cover-right $duration none infinite;
left: initial;
right: 0;
transform-origin: left top;
}
}
.lips {
z-index: 2;
height: 35%;
width: 100%;
&:before, &:after {
background: $color-white;
width: calc(50% + 1.5px);
border-color: $color-light;
border-width: 3px;
border-style: solid;
height: 100%;
border-bottom-left-radius: 65% 100%;
border-bottom-right-radius: 35% 50%;
border-top-right-radius: 50%;
// border-right-width: 0;
border-right-color: transparent;
border-top-color: transparent;
}
&:after {
transform: rotateY(180deg);
left: initial;
right: 0;
}
}
.tongue {
animation: tongue $duration none infinite;
position: absolute;
height: 100%;
width: 44%;
background: $color-tongue;
left: 25%;
bottom: 100%;
z-index: 1;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}
.body {
animation: body $duration none infinite;
width: 45%;
height: 100%;
position: absolute;
left: 25%;
}
.torso {
position: absolute;
height: 55%;
width: 100%;
bottom: 0;
&:before {
background: $color-primary;
height: 100%;
width: 50%;
transform:
translateX(-20%)
skewX(-30deg);
transform-origin: left bottom;
border-radius: 0 30% 0 60%;
}
&:after {
background: $color-primary;
height: 100%;
width: 60%;
top: 0;
right: 0;
border-radius: 10% 40% 60% 0;
}
}
.mane {
animation: mane $duration none infinite;
z-index: 2;
position: absolute;
width: 31.5%;
height: 30%;
top: 44%;
left: 37%;
&:before {
background: $color-white;
height: 40%;
width: 100%;
border-top-left-radius: 10% 50%;
border-top-right-radius: 20% 100%;
border-bottom-left-radius: 10% 50%;
}
&:after {
background: $color-white;
top: 25%;
height: 76%;
width: 30%;
right: 23%;
border-top-right-radius: 100% 80%;
transform: rotate(47deg);
transform-origin: bottom right;
}
}
.coat {
position: absolute;
width: 50%;
height: 50%;
background: $color-white;
transform-origin: bottom right;
left: 10%;
top: 21%;
transform: rotate(25deg) skewX(-30deg) ;
}
.legs {
background-color: $color-primary;
position: absolute;
height: 30%;
width: 42%;
left: 23%;
bottom: 0;
border-top-left-radius: 20% 37%;
border-bottom-left-radius: 10% 37%;
border-top-right-radius: 50%;
z-index: 1;
}
.front-legs {
position: absolute;
width: 55%;
height: 117%;
bottom: 0;
right: -12%;
&:before {
width: 4%;
height: 6%;
background: transparent;
bottom: 0;
left: 47%;
box-shadow:
-1.3vmin 0 0 $color-light,
-2.8vmin 0 0 $color-light,
1.3vmin 0 0 $color-bg,
2.8vmin 0 0 $color-bg
;
z-index: 2;
}
> .leg {
width: 51%;
height: 100%;
position: absolute;
bottom: 0;
right: 50%;
overflow: hidden;
&:before {
background: $color-lighter;
height: 100%;
width: 100%;
transform: skewY(-30deg) skewX(10deg);
transform-origin: top right;
}
+ .leg {
right: 0;
transform: rotateY(180deg);
&:before {
background: $color-light;
}
}
}
}
.hind-leg {
position: absolute;
background: $color-light;
width: 35%;
height: 25%;
border-top-left-radius: 35% 100%;
border-top-right-radius: 40% 100%;
bottom: 0%;
right: 45%;
&:before {
width: 6%;
height: 20%;
background: transparent;
bottom: 0;
left: 70%;
box-shadow:
-0.8vmin 0 0 $color-bg,
0.8vmin 0 0 $color-bg;
}
}
.tail {
position: absolute;
width: 15%;
height: 6%;
bottom: 0;
right: 72%;
background: $color-dark;
z-index: 0;
> .tail {
animation: tail $duration none infinite;
height: 100%;
width: 4vmin;
right: 26%;
transform-origin: center right;
border-top-left-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
transform: rotate(26deg);
transform: rotate(0deg);
}
.husky > & {
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.husky > & > & {
right: 88%;
}
}
@keyframes squiggly-anim {
0% {
filter: url('#squiggly-0');
}
25% {
filter: url('#squiggly-1');
}
50% {
filter: url('#squiggly-2');
}
75% {
filter: url('#squiggly-3');
}
100% {
filter: url('#squiggly-4');
}
}
html, body {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: $color-bg;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}"🐶 ♥️"
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.