// Sample trigonometric funcs are copied from https://unindented.org/articles/trigonometry-in-sass/
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
@function fact($number) {
$value: 1;
@if $number > 0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
}
@function pi() {
@return 3.14159265359;
}
@function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
// If the angle has 'deg' as unit, convert to radians.
@if $unit==deg {
$unitless: $unitless / 180 * pi();
}
@return $unitless;
}
@function sin($angle) {
$sin: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
@return $sin;
}
@function cos($angle) {
$cos: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
}
@return $cos;
}
@function tan($angle) {
@return sin($angle) / cos($angle);
}
@mixin drawOnCircle($color: green, $offset: 0, $startAngle: 0deg, $endAngle: 15deg, $step: 1) {
$draw: 0 0 transparent;
$startAngle: $startAngle + 0deg;
$endAngle: $endAngle + 0deg;
@if $step < 1 {
$step: 1;
}
@for $i from $startAngle through $step * $endAngle {
$x: cos(rad($i / $step)) * $offset - $offset;
$y: sin(rad($i / $step)) * $offset;
$draw: #{$draw},
$x $y;
}
color: $color;
box-shadow: $draw;
}
// Varibles
$backgorund-color: #E8DDE0;
$stroke-color: #393D46;
$cat-body-color: #EBA763;
$cat-body-color-light: #F1C28F;
$cat-jj-color: #C48344;
$cat-mouth-color: #D06257;
$cat-size: 16px; // Make a bigger cat!
$stroke-width: 1em;
$inner-width: 10em;
$outer-width: 20em;
$cat-width: $outer-width - $inner-width;
$leg-width: 3.6em;
$jj-width: 3em;
$cat-inner-leg-start: $inner-width;
$cat-inner-leg-center: $cat-inner-leg-start + $leg-width / 2;
$cat-jj-start: $cat-inner-leg-start + $leg-width - .05em;
$cat-jj-center: $cat-jj-start + $jj-width / 2;
$cat-outer-leg-start: $outer-width - $leg-width + .025em;
$cat-outer-leg-center: $cat-outer-leg-start + $leg-width / 2;
$anim-duration: 4s;
.cat-loader {
font-size: $cat-size;
width: 50em;
height: 50em;
margin: 5em;
position: relative;
z-index: 1;
}
.cat-lower {
animation: donut-rotate $anim-duration infinite cubic-bezier(.76, 0, .59, 1);
}
.cat-upper {
animation: donut-rotate $anim-duration infinite cubic-bezier(.4, 0, .56, 1);
}
.cat-lower,
.cat-upper {
trasnform-origin: 50% 50%;
}
@keyframes donut-rotate {
6% {
transform: rotate(0);
}
100% {
transform: rotate(-720deg);
}
}
@keyframes stretch-body-upper {
0%, 100% {
transform: rotate(180deg);
}
65% {
transform: rotate(280deg);
}
}
@keyframes stretch-body-lower {
0%, 100% {
transform: rotate(180deg);
}
70% {
transform: rotate(20deg);
}
}
@keyframes mouth-open {
0%, 100% {
padding: 0em .2em;
}
40%, 70% {
padding: .55em .2em;
}
}
@keyframes jj-stretch {
10%, 100% {
transform: rotate(115deg);
}
60%, 80% {
transform: rotate(122deg);
}
}
.bkg-stretch {
position: absolute;
overflow: hidden;
padding: ($outer-width + 1em) / 2 $outer-width + 1em;
margin: 0 -1 * ($outer-width + 1em);
transform-origin: 50% 50%;
z-index: -1;
& > div {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
transform: rotate(180deg);
overflow: hidden;
transform-origin: 50% 0%;
&:after {
content: '';
position: absolute;
box-shadow: 0 0 0 $stroke-width $stroke-color, 0 0 0 $leg-width - $stroke-width $cat-body-color, 0 0 0 $cat-width - $leg-width + $stroke-width $cat-body-color-light, 0 0 0 $cat-width - $stroke-width $cat-body-color, 0 0 0 $cat-width $stroke-color;
border-radius: 100em;
padding: $inner-width;
top: 0;
left: 50%;
margin: -$inner-width;
transform-origin: 50% 50%;
}
}
}
.cat-upper {
position: absolute;
width: 100%;
height: 100%;
padding-left: 50%;
z-index: 3;
.wrapper {
width: 50%;
position: absolute;
top: 50%;
transform-origin: 0% 50%;
&.cat-face {
transform: rotate(35deg);
}
&.inner-leg {
transform: rotate(101deg);
}
&.outer-leg {
transform: rotate(93deg);
}
&.body {
transform: rotate(91deg);
}
&.bkg-stretch {
transform: rotate(60deg);
transform-origin: 50% 0;
& > div {
animation: stretch-body-upper $anim-duration infinite;
}
}
&.body {
&:after {
content: '';
position: absolute;
background-color: $cat-body-color-light;
padding: ($cat-width - 2 * $leg-width + 2 * $stroke-width) / 2 - .25em;
margin-top: -($cat-width - 2 * $leg-width + 2 * $stroke-width) / 2;
margin-left: $inner-width + $leg-width - $stroke-width;
border-radius: 10em;
position: absolute;
// @include drawOnCircle($cat-body-color-light, $inner-width + ($cat-width) / 2, 0, -10);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #F1C28F, -0.00228em -0.26179em 0 0 #F1C28F, -0.00914em -0.52349em 0 0 #F1C28F, -0.02056em -0.78504em 0 0 #F1C28F, -0.03654em -1.04635em 0 0 #F1C28F, -0.05708em -1.30734em 0 0 #F1C28F, -0.08217em -1.56793em 0 0 #F1C28F, -0.11181em -1.82804em 0 0 #F1C28F, -0.14598em -2.0876em 0 0 #F1C28F, -0.18467em -2.34652em 0 0 #F1C28F, -0.22788em -2.60472em 0 0 #F1C28F;
}
}
&.inner-leg .cat-leg div {
// @include drawOnCircle($cat-body-color, $cat-inner-leg-center, 0, -33);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.0018em -0.20594em 0 0 #EBA763, -0.00719em -0.41181em 0 0 #EBA763, -0.01617em -0.61756em 0 0 #EBA763, -0.02874em -0.82313em 0 0 #EBA763, -0.0449em -1.02844em 0 0 #EBA763, -0.06464em -1.23344em 0 0 #EBA763, -0.08796em -1.43806em 0 0 #EBA763, -0.11484em -1.64224em 0 0 #EBA763, -0.14528em -1.84593em 0 0 #EBA763, -0.17927em -2.04905em 0 0 #EBA763, -0.2168em -2.25155em 0 0 #EBA763, -0.25786em -2.45336em 0 0 #EBA763, -0.30243em -2.65442em 0 0 #EBA763, -0.35051em -2.85468em 0 0 #EBA763, -0.40208em -3.05406em 0 0 #EBA763, -0.45711em -3.25252em 0 0 #EBA763, -0.5156em -3.44999em 0 0 #EBA763, -0.57753em -3.6464em 0 0 #EBA763, -0.64288em -3.8417em 0 0 #EBA763, -0.71163em -4.03584em 0 0 #EBA763, -0.78375em -4.22874em 0 0 #EBA763, -0.85923em -4.42036em 0 0 #EBA763, -0.93804em -4.61063em 0 0 #EBA763, -1.02016em -4.79949em 0 0 #EBA763, -1.10557em -4.9869em 0 0 #EBA763, -1.19423em -5.17278em 0 0 #EBA763, -1.28612em -5.35709em 0 0 #EBA763, -1.38122em -5.53976em 0 0 #EBA763, -1.47949em -5.72075em 0 0 #EBA763, -1.5809em -5.9em 0 0 #EBA763, -1.68543em -6.07745em 0 0 #EBA763, -1.79303em -6.25305em 0 0 #EBA763, -1.90369em -6.42674em 0 0 #EBA763;
&:before {
// @include drawOnCircle($stroke-color, $cat-inner-leg-start + $stroke-width / 2 , 0, -33);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.0016em -0.18325em 0 0 #393D46, -0.0064em -0.36644em 0 0 #393D46, -0.01439em -0.54953em 0 0 #393D46, -0.02558em -0.73244em 0 0 #393D46, -0.03996em -0.91514em 0 0 #393D46, -0.05752em -1.09755em 0 0 #393D46, -0.07827em -1.27963em 0 0 #393D46, -0.10219em -1.46132em 0 0 #393D46, -0.12927em -1.64256em 0 0 #393D46, -0.15952em -1.82331em 0 0 #393D46, -0.19291em -2.00349em 0 0 #393D46, -0.22945em -2.18307em 0 0 #393D46, -0.26911em -2.36199em 0 0 #393D46, -0.31189em -2.54018em 0 0 #393D46, -0.35778em -2.7176em 0 0 #393D46, -0.40675em -2.89419em 0 0 #393D46, -0.4588em -3.0699em 0 0 #393D46, -0.51391em -3.24468em 0 0 #393D46, -0.57205em -3.41847em 0 0 #393D46, -0.63323em -3.59121em 0 0 #393D46, -0.69741em -3.76286em 0 0 #393D46, -0.76457em -3.93337em 0 0 #393D46, -0.8347em -4.10268em 0 0 #393D46, -0.90777em -4.27073em 0 0 #393D46, -0.98377em -4.43749em 0 0 #393D46, -1.06266em -4.6029em 0 0 #393D46, -1.14443em -4.7669em 0 0 #393D46, -1.22905em -4.92945em 0 0 #393D46, -1.31649em -5.0905em 0 0 #393D46, -1.40673em -5.25em 0 0 #393D46, -1.49974em -5.4079em 0 0 #393D46, -1.59549em -5.56415em 0 0 #393D46, -1.69396em -5.71871em 0 0 #393D46;
}
&:after {
// @include drawOnCircle($stroke-color, $cat-inner-leg-start + $leg-width - $stroke-width / 2 , 0, -19);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.002em -0.22863em 0 0 #393D46, -0.00798em -0.45718em 0 0 #393D46, -0.01795em -0.6856em 0 0 #393D46, -0.03191em -0.91381em 0 0 #393D46, -0.04985em -1.14174em 0 0 #393D46, -0.07176em -1.36932em 0 0 #393D46, -0.09765em -1.59649em 0 0 #393D46, -0.12749em -1.82317em 0 0 #393D46, -0.16128em -2.04929em 0 0 #393D46, -0.19902em -2.27479em 0 0 #393D46, -0.24068em -2.4996em 0 0 #393D46, -0.28627em -2.72364em 0 0 #393D46, -0.33575em -2.94686em 0 0 #393D46, -0.38913em -3.16918em 0 0 #393D46, -0.44637em -3.39053em 0 0 #393D46, -0.50747em -3.61085em 0 0 #393D46, -0.57241em -3.83007em 0 0 #393D46, -0.64116em -4.04812em 0 0 #393D46, -0.71371em -4.26494em 0 0 #393D46;
}
}
&.outer-leg .cat-leg {
left: $cat-outer-leg-start - $inner-width;
}
&.outer-leg .cat-leg div {
// @include drawOnCircle($cat-body-color, $cat-outer-leg-center, 0, -30, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.00069em -0.15882em 0 0 #EBA763, -0.00277em -0.31763em 0 0 #EBA763, -0.00624em -0.47642em 0 0 #EBA763, -0.01109em -0.63517em 0 0 #EBA763, -0.01732em -0.79387em 0 0 #EBA763, -0.02494em -0.95251em 0 0 #EBA763, -0.03395em -1.11108em 0 0 #EBA763, -0.04433em -1.26957em 0 0 #EBA763, -0.0561em -1.42796em 0 0 #EBA763, -0.06926em -1.58623em 0 0 #EBA763, -0.08379em -1.74439em 0 0 #EBA763, -0.0997em -1.90242em 0 0 #EBA763, -0.11699em -2.0603em 0 0 #EBA763, -0.13566em -2.21802em 0 0 #EBA763, -0.1557em -2.37558em 0 0 #EBA763, -0.17712em -2.53295em 0 0 #EBA763, -0.19991em -2.69013em 0 0 #EBA763, -0.22407em -2.84711em 0 0 #EBA763, -0.2496em -3.00387em 0 0 #EBA763, -0.2765em -3.1604em 0 0 #EBA763, -0.30476em -3.31669em 0 0 #EBA763, -0.33439em -3.47272em 0 0 #EBA763, -0.36537em -3.6285em 0 0 #EBA763, -0.39771em -3.78399em 0 0 #EBA763, -0.43141em -3.9392em 0 0 #EBA763, -0.46646em -4.09411em 0 0 #EBA763, -0.50287em -4.24871em 0 0 #EBA763, -0.54062em -4.40298em 0 0 #EBA763, -0.57971em -4.55692em 0 0 #EBA763, -0.62015em -4.71051em 0 0 #EBA763, -0.66193em -4.86374em 0 0 #EBA763, -0.70504em -5.0166em 0 0 #EBA763, -0.74948em -5.16908em 0 0 #EBA763, -0.79525em -5.32117em 0 0 #EBA763, -0.84235em -5.47285em 0 0 #EBA763, -0.89077em -5.62411em 0 0 #EBA763, -0.94051em -5.77494em 0 0 #EBA763, -0.99156em -5.92534em 0 0 #EBA763, -1.04392em -6.07528em 0 0 #EBA763, -1.09759em -6.22477em 0 0 #EBA763, -1.15257em -6.37377em 0 0 #EBA763, -1.20884em -6.5223em 0 0 #EBA763, -1.2664em -6.67032em 0 0 #EBA763, -1.32525em -6.81784em 0 0 #EBA763, -1.38539em -6.96484em 0 0 #EBA763, -1.44681em -7.11131em 0 0 #EBA763, -1.50951em -7.25723em 0 0 #EBA763, -1.57347em -7.40261em 0 0 #EBA763, -1.6387em -7.54742em 0 0 #EBA763, -1.7052em -7.69165em 0 0 #EBA763, -1.77295em -7.8353em 0 0 #EBA763, -1.84195em -7.97835em 0 0 #EBA763, -1.91219em -8.1208em 0 0 #EBA763, -1.98368em -8.26263em 0 0 #EBA763, -2.0564em -8.40382em 0 0 #EBA763, -2.13035em -8.54438em 0 0 #EBA763, -2.20553em -8.68429em 0 0 #EBA763, -2.28192em -8.82354em 0 0 #EBA763, -2.35953em -8.96211em 0 0 #EBA763, -2.43834em -9.1em 0 0 #EBA763;
&:before {
// @include drawOnCircle($stroke-color, $cat-outer-leg-start + $stroke-width / 2 , 0, -10, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00064em -0.14748em 0 0 #393D46, -0.00257em -0.29495em 0 0 #393D46, -0.00579em -0.44239em 0 0 #393D46, -0.0103em -0.5898em 0 0 #393D46, -0.01609em -0.73717em 0 0 #393D46, -0.02316em -0.88448em 0 0 #393D46, -0.03152em -1.03172em 0 0 #393D46, -0.04117em -1.17888em 0 0 #393D46, -0.0521em -1.32596em 0 0 #393D46, -0.06431em -1.47293em 0 0 #393D46, -0.0778em -1.61979em 0 0 #393D46, -0.09258em -1.76653em 0 0 #393D46, -0.10864em -1.91313em 0 0 #393D46, -0.12597em -2.05959em 0 0 #393D46, -0.14458em -2.20589em 0 0 #393D46, -0.16447em -2.35203em 0 0 #393D46, -0.18563em -2.49798em 0 0 #393D46, -0.20807em -2.64374em 0 0 #393D46, -0.23177em -2.7893em 0 0 #393D46, -0.25675em -2.93465em 0 0 #393D46;
}
&:after {
// @include drawOnCircle($stroke-color, $cat-outer-leg-start + $leg-width - $stroke-width / 2 , 0, -30, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00074em -0.17017em 0 0 #393D46, -0.00297em -0.34032em 0 0 #393D46, -0.00668em -0.51045em 0 0 #393D46, -0.01188em -0.68054em 0 0 #393D46, -0.01856em -0.85058em 0 0 #393D46, -0.02672em -1.02055em 0 0 #393D46, -0.03637em -1.19045em 0 0 #393D46, -0.0475em -1.36025em 0 0 #393D46, -0.06011em -1.52995em 0 0 #393D46, -0.0742em -1.69954em 0 0 #393D46, -0.08977em -1.86899em 0 0 #393D46, -0.10682em -2.03831em 0 0 #393D46, -0.12535em -2.20746em 0 0 #393D46, -0.14535em -2.37645em 0 0 #393D46, -0.16683em -2.54526em 0 0 #393D46, -0.18977em -2.71388em 0 0 #393D46, -0.21419em -2.88228em 0 0 #393D46, -0.24008em -3.05047em 0 0 #393D46, -0.26743em -3.21843em 0 0 #393D46, -0.29625em -3.38614em 0 0 #393D46, -0.32653em -3.55359em 0 0 #393D46, -0.35827em -3.72078em 0 0 #393D46, -0.39147em -3.88767em 0 0 #393D46, -0.42612em -4.05428em 0 0 #393D46, -0.46223em -4.22057em 0 0 #393D46, -0.49978em -4.38655em 0 0 #393D46, -0.53879em -4.55218em 0 0 #393D46, -0.57923em -4.71748em 0 0 #393D46, -0.62112em -4.88241em 0 0 #393D46, -0.66445em -5.04697em 0 0 #393D46, -0.70921em -5.21115em 0 0 #393D46, -0.7554em -5.37493em 0 0 #393D46, -0.80302em -5.5383em 0 0 #393D46, -0.85206em -5.70125em 0 0 #393D46, -0.90252em -5.86376em 0 0 #393D46, -0.9544em -6.02583em 0 0 #393D46, -1.00769em -6.18744em 0 0 #393D46, -1.06239em -6.34858em 0 0 #393D46, -1.11849em -6.50923em 0 0 #393D46, -1.17599em -6.66939em 0 0 #393D46, -1.23489em -6.82904em 0 0 #393D46, -1.29518em -6.98818em 0 0 #393D46, -1.35686em -7.14677em 0 0 #393D46, -1.41991em -7.30483em 0 0 #393D46, -1.48435em -7.46233em 0 0 #393D46, -1.55016em -7.61926em 0 0 #393D46, -1.61733em -7.77561em 0 0 #393D46, -1.68586em -7.93136em 0 0 #393D46, -1.75576em -8.08652em 0 0 #393D46, -1.827em -8.24106em 0 0 #393D46, -1.89959em -8.39497em 0 0 #393D46, -1.97352em -8.54824em 0 0 #393D46, -2.04878em -8.70086em 0 0 #393D46, -2.12537em -8.85281em 0 0 #393D46, -2.20329em -9.0041em 0 0 #393D46, -2.28252em -9.1547em 0 0 #393D46, -2.36307em -9.3046em 0 0 #393D46, -2.44492em -9.45379em 0 0 #393D46, -2.52806em -9.60226em 0 0 #393D46, -2.6125em -9.75em 0 0 #393D46;
}
}
&.cat-face {
position: absolute;
bottom: 0;
transform-origin: 0 0;
&:before,
&:after {
content: '';
position: absolute;
padding: $stroke-width / 2;
background-color: $stroke-color;
border-radius: 10em;
margin-top: -$stroke-width / 2;
top: 0;
}
&:before {
left: $inner-width;
// @include drawOnCircle($stroke-color, $inner-width + $stroke-width / 2, 0, 45);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.0016em 0.18325em 0 0 #393D46, -0.0064em 0.36644em 0 0 #393D46, -0.01439em 0.54953em 0 0 #393D46, -0.02558em 0.73244em 0 0 #393D46, -0.03996em 0.91514em 0 0 #393D46, -0.05752em 1.09755em 0 0 #393D46, -0.07827em 1.27963em 0 0 #393D46, -0.10219em 1.46132em 0 0 #393D46, -0.12927em 1.64256em 0 0 #393D46, -0.15952em 1.82331em 0 0 #393D46, -0.19291em 2.00349em 0 0 #393D46, -0.22945em 2.18307em 0 0 #393D46, -0.26911em 2.36199em 0 0 #393D46, -0.31189em 2.54018em 0 0 #393D46, -0.35778em 2.7176em 0 0 #393D46, -0.40675em 2.89419em 0 0 #393D46, -0.4588em 3.0699em 0 0 #393D46, -0.51391em 3.24468em 0 0 #393D46, -0.57205em 3.41847em 0 0 #393D46, -0.63323em 3.59121em 0 0 #393D46, -0.69741em 3.76286em 0 0 #393D46, -0.76457em 3.93337em 0 0 #393D46, -0.8347em 4.10268em 0 0 #393D46, -0.90777em 4.27073em 0 0 #393D46, -0.98377em 4.43749em 0 0 #393D46, -1.06266em 4.6029em 0 0 #393D46, -1.14443em 4.7669em 0 0 #393D46, -1.22905em 4.92945em 0 0 #393D46, -1.31649em 5.0905em 0 0 #393D46, -1.40673em 5.25em 0 0 #393D46, -1.49974em 5.4079em 0 0 #393D46, -1.59549em 5.56415em 0 0 #393D46, -1.69396em 5.71871em 0 0 #393D46, -1.79511em 5.87153em 0 0 #393D46, -1.8989em 6.02255em 0 0 #393D46, -2.00532em 6.17175em 0 0 #393D46, -2.11433em 6.31906em 0 0 #393D46, -2.22589em 6.46445em 0 0 #393D46, -2.33997em 6.60786em 0 0 #393D46, -2.45653em 6.74927em 0 0 #393D46, -2.57555em 6.88862em 0 0 #393D46, -2.69698em 7.02587em 0 0 #393D46, -2.82079em 7.16098em 0 0 #393D46, -2.94693em 7.29391em 0 0 #393D46, -3.07538em 7.42462em 0 0 #393D46;
}
&:after {
left: $outer-width - $stroke-width;
// @include drawOnCircle($stroke-color, $outer-width - $stroke-width / 2, 0, 45, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00074em 0.17017em 0 0 #393D46, -0.00297em 0.34032em 0 0 #393D46, -0.00668em 0.51045em 0 0 #393D46, -0.01188em 0.68054em 0 0 #393D46, -0.01856em 0.85058em 0 0 #393D46, -0.02672em 1.02055em 0 0 #393D46, -0.03637em 1.19045em 0 0 #393D46, -0.0475em 1.36025em 0 0 #393D46, -0.06011em 1.52995em 0 0 #393D46, -0.0742em 1.69954em 0 0 #393D46, -0.08977em 1.86899em 0 0 #393D46, -0.10682em 2.03831em 0 0 #393D46, -0.12535em 2.20746em 0 0 #393D46, -0.14535em 2.37645em 0 0 #393D46, -0.16683em 2.54526em 0 0 #393D46, -0.18977em 2.71388em 0 0 #393D46, -0.21419em 2.88228em 0 0 #393D46, -0.24008em 3.05047em 0 0 #393D46, -0.26743em 3.21843em 0 0 #393D46, -0.29625em 3.38614em 0 0 #393D46, -0.32653em 3.55359em 0 0 #393D46, -0.35827em 3.72078em 0 0 #393D46, -0.39147em 3.88767em 0 0 #393D46, -0.42612em 4.05428em 0 0 #393D46, -0.46223em 4.22057em 0 0 #393D46, -0.49978em 4.38655em 0 0 #393D46, -0.53879em 4.55218em 0 0 #393D46, -0.57923em 4.71748em 0 0 #393D46, -0.62112em 4.88241em 0 0 #393D46, -0.66445em 5.04697em 0 0 #393D46, -0.70921em 5.21115em 0 0 #393D46, -0.7554em 5.37493em 0 0 #393D46, -0.80302em 5.5383em 0 0 #393D46, -0.85206em 5.70125em 0 0 #393D46, -0.90252em 5.86376em 0 0 #393D46, -0.9544em 6.02583em 0 0 #393D46, -1.00769em 6.18744em 0 0 #393D46, -1.06239em 6.34858em 0 0 #393D46, -1.11849em 6.50923em 0 0 #393D46, -1.17599em 6.66939em 0 0 #393D46, -1.23489em 6.82904em 0 0 #393D46, -1.29518em 6.98818em 0 0 #393D46, -1.35686em 7.14677em 0 0 #393D46, -1.41991em 7.30483em 0 0 #393D46, -1.48435em 7.46233em 0 0 #393D46, -1.55016em 7.61926em 0 0 #393D46, -1.61733em 7.77561em 0 0 #393D46, -1.68586em 7.93136em 0 0 #393D46, -1.75576em 8.08652em 0 0 #393D46, -1.827em 8.24106em 0 0 #393D46, -1.89959em 8.39497em 0 0 #393D46, -1.97352em 8.54824em 0 0 #393D46, -2.04878em 8.70086em 0 0 #393D46, -2.12537em 8.85281em 0 0 #393D46, -2.20329em 9.0041em 0 0 #393D46, -2.28252em 9.1547em 0 0 #393D46, -2.36307em 9.3046em 0 0 #393D46, -2.44492em 9.45379em 0 0 #393D46, -2.52806em 9.60226em 0 0 #393D46, -2.6125em 9.75em 0 0 #393D46, -2.69823em 9.897em 0 0 #393D46, -2.78524em 10.04324em 0 0 #393D46, -2.87352em 10.18872em 0 0 #393D46, -2.96306em 10.33343em 0 0 #393D46, -3.05387em 10.47734em 0 0 #393D46, -3.14592em 10.62046em 0 0 #393D46, -3.23923em 10.76277em 0 0 #393D46, -3.33377em 10.90426em 0 0 #393D46, -3.42954em 11.04492em 0 0 #393D46, -3.52654em 11.18474em 0 0 #393D46, -3.62475em 11.32371em 0 0 #393D46, -3.72417em 11.46181em 0 0 #393D46, -3.82479em 11.59904em 0 0 #393D46, -3.92661em 11.73539em 0 0 #393D46, -4.02961em 11.87085em 0 0 #393D46, -4.13379em 12.0054em 0 0 #393D46, -4.23914em 12.13904em 0 0 #393D46, -4.34565em 12.27175em 0 0 #393D46, -4.45332em 12.40353em 0 0 #393D46, -4.56213em 12.53436em 0 0 #393D46, -4.67208em 12.66424em 0 0 #393D46, -4.78316em 12.79315em 0 0 #393D46, -4.89536em 12.92109em 0 0 #393D46, -5.00868em 13.04805em 0 0 #393D46, -5.12309em 13.17401em 0 0 #393D46, -5.2386em 13.29897em 0 0 #393D46, -5.3552em 13.42291em 0 0 #393D46, -5.47287em 13.54584em 0 0 #393D46, -5.59162em 13.66773em 0 0 #393D46, -5.71142em 13.78858em 0 0 #393D46;
}
.mouth {
position: absolute;
width: $outer-width;
padding-left: $inner-width;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-right: .4em;
padding-top: 4.8em;
& > div:first-child {
position: relative;
display: flex;
transform: scaleX(.9);
& > div {
border-radius: 5em 5em 10em 10em;
overflow: hidden;
display: flex;
height: .7em;
margin: 0 -.18 * $stroke-width;
box-shadow: inset 0 -.5 * $stroke-width 0 0 $stroke-color;
div {
padding: .18em;
background-color: $cat-body-color;
border-radius: 0 0 10em 10em;
transform: translateY(-.3 * $stroke-width);
border: $cat-body-color 1px solid;
}
&:before,
&:after {
content: '';
display: inline-block;
height: 100%;
padding: .18 * $stroke-width;
background-color: $stroke-color;
border-radius: 10em 10em 0 0;
}
}
}
& > div:last-child {
padding: .55em .2em;
border: red 1px solid;
border-radius: 100%;
background-color: $cat-mouth-color;
border-color: $stroke-color;
border-style: solid;
border-width: 0 .36 * $stroke-width .36 * $stroke-width .36 * $stroke-width;
margin-top: -.6em;
animation: mouth-open $anim-duration infinite;
}
}
.wisker {
position: absolute;
height: 5em;
padding-left: $inner-width - 1.5 * $stroke-width;
width: $inner-width + $cat-width + $stroke-width;
display: flex;
justify-content: space-between;
align-items: center;
transform-origin: 0 0;
transform: rotate(11deg);
div {
width: 3em;
height: .55 * $stroke-width;
background-color: $stroke-color;
display: inline-block;
border-radius: 10em;
position: relative;
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: $stroke-color;
border-radius: 10em;
}
&:before {
transform: rotate(6deg) translateY(-.9em) translateX(-.1em);
}
&:after {
transform: rotate(-6deg) translateY(.9em) translateX(-.1em);
}
& + div {
&:before {
transform: rotate(-6deg) translateY(-.9em) translateX(.1em);
}
&:after {
transform: rotate(6deg) translateY(.9em) translateX(.1em);
}
}
}
}
.eyes {
position: absolute;
height: 7em;
top: 0;
width: $cat-width;
margin-left: $inner-width;
display: flex;
justify-content: space-between;
padding: 0 2.4em 0 2.1em;
align-items: center;
&:before,
&:after {
content: '';
display: inline-block;
background-color: $stroke-color;
border-radius: 10em;
padding: .45 * $stroke-width;
box-shadow: inset 0 0 0 1em $stroke-color;
}
&:before {
margin-bottom: .5em;
}
}
.ears {
position: absolute;
height: 3em;
top: 0;
margin-top: -$stroke-width;
margin-left: $inner-width + $stroke-width / 2;
width: $cat-width - $stroke-width;
z-index: -1;
&:before,
&:after {
content: '';
position: absolute;
padding: $stroke-width $stroke-width * 1.6;
background-color: $cat-body-color;
box-shadow: inset 0 $stroke-width 0 0 $stroke-color;
}
&:before {
left: 0;
transform-origin: 0 0;
border-radius: 1.5 * $stroke-width 0 0 100%;
transform: rotate(40deg) translate(.1em, -.25em);
}
&:after {
right: 0;
border-radius: 0 1.5 * $stroke-width 100% 0;
transform-origin: 100% 0;
transform: rotate(-40deg) translate(-.1em, -.25em);
}
}
.face-shape {
width: 100%;
height: 100%;
position: absolute;
& > div {
position: absolute;
width: 100%;
top: .8em;
bottom: 0;
overflow: hidden;
z-index: -1;
&:before,
&:after {
content: '';
position: absolute;
}
&:before {
background-color: $cat-body-color;
padding: ($cat-width - $stroke-width) / 2;
margin-left: $inner-width + $stroke-width / 2;
border-radius: 10em;
margin-top: -($cat-width - $stroke-width) / 2 - 1.1em;
// @include drawOnCircle($cat-body-color, $inner-width + $cat-width / 2, 0, 45);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.00228em 0.26179em 0 0 #EBA763, -0.00914em 0.52349em 0 0 #EBA763, -0.02056em 0.78504em 0 0 #EBA763, -0.03654em 1.04635em 0 0 #EBA763, -0.05708em 1.30734em 0 0 #EBA763, -0.08217em 1.56793em 0 0 #EBA763, -0.11181em 1.82804em 0 0 #EBA763, -0.14598em 2.0876em 0 0 #EBA763, -0.18467em 2.34652em 0 0 #EBA763, -0.22788em 2.60472em 0 0 #EBA763, -0.27559em 2.86213em 0 0 #EBA763, -0.32779em 3.11868em 0 0 #EBA763, -0.38445em 3.37427em 0 0 #EBA763, -0.44556em 3.62883em 0 0 #EBA763, -0.51111em 3.88229em 0 0 #EBA763, -0.58107em 4.13456em 0 0 #EBA763, -0.65543em 4.38558em 0 0 #EBA763, -0.73415em 4.63525em 0 0 #EBA763, -0.81722em 4.88352em 0 0 #EBA763, -0.90461em 5.1303em 0 0 #EBA763, -0.99629em 5.37552em 0 0 #EBA763, -1.09224em 5.6191em 0 0 #EBA763, -1.19243em 5.86097em 0 0 #EBA763, -1.29682em 6.10105em 0 0 #EBA763, -1.40538em 6.33927em 0 0 #EBA763, -1.51809em 6.57557em 0 0 #EBA763, -1.6349em 6.80986em 0 0 #EBA763, -1.75579em 7.04207em 0 0 #EBA763, -1.8807em 7.27214em 0 0 #EBA763, -2.00962em 7.5em 0 0 #EBA763, -2.14249em 7.72557em 0 0 #EBA763, -2.27928em 7.94879em 0 0 #EBA763, -2.41994em 8.16959em 0 0 #EBA763, -2.56444em 8.38789em 0 0 #EBA763, -2.71272em 8.60365em 0 0 #EBA763, -2.86475em 8.81678em 0 0 #EBA763, -3.02047em 9.02723em 0 0 #EBA763, -3.17984em 9.23492em 0 0 #EBA763, -3.34281em 9.43981em 0 0 #EBA763, -3.50933em 9.64181em 0 0 #EBA763, -3.67936em 9.84089em 0 0 #EBA763, -3.85283em 10.03696em 0 0 #EBA763, -4.02969em 10.22998em 0 0 #EBA763, -4.2099em 10.41988em 0 0 #EBA763, -4.3934em 10.6066em 0 0 #EBA763;
}
&:after {
height: $stroke-width;
width: 5.3em;
background-color: $stroke-color;
margin-left: $inner-width + 2.35em;
z-index: 2;
border-radius: 10em;
}
}
}
}
}
}
.cat-lower {
position: absolute;
width: 100%;
height: 100%;
padding-left: 50%;
z-index: 2;
.wrapper {
width: 50%;
position: absolute;
top: 50%;
transform-origin: 0% 50%;
&.inner-leg {
transform: rotate(133deg);
}
&.outer-leg {
transform: rotate(130deg);
}
&.cat-ass {
transform: rotate(122deg);
}
&.cat-jj {
transform: rotate(115deg);
z-index: -1;
animation: jj-stretch $anim-duration infinite;
}
&.bkg {
transform: rotate(100deg)
}
&.bkg-stretch {
transform: rotate(-75deg);
transform-origin: 50% 0;
& > div {
animation: stretch-body-lower $anim-duration infinite;
}
}
&.cat-ass {
& > div {
position: absolute;
width: $jj-width + $stroke-width;
height: 2 * $stroke-width;
margin-left: $cat-jj-start - $stroke-width / 2;
overflow: hidden;
margin-top: -$stroke-width;
&:before,
&:after {
content: '';
position: absolute;
width: 160%;
height: 120%;
margin-left: -30%;
border-radius: 100%;
}
&:before {
bottom: 0;
background-color: $stroke-color;
}
&:after {
bottom: $stroke-width;
background-color: $cat-body-color;
}
}
}
&.bkg {
& > div {
background-color: $cat-body-color-light;
padding: ($cat-width - 2 * $leg-width + 2 * $stroke-width) / 2;
margin-top: -($cat-width - 2 * $leg-width + 2 * $stroke-width) / 2;
margin-left: $inner-width + $leg-width - $stroke-width;
border-radius: 10em;
position: absolute;
// @include drawOnCircle($cat-body-color-light, $inner-width + ($cat-width) / 2, 0, -15);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #F1C28F, -0.00228em -0.26179em 0 0 #F1C28F, -0.00914em -0.52349em 0 0 #F1C28F, -0.02056em -0.78504em 0 0 #F1C28F, -0.03654em -1.04635em 0 0 #F1C28F, -0.05708em -1.30734em 0 0 #F1C28F, -0.08217em -1.56793em 0 0 #F1C28F, -0.11181em -1.82804em 0 0 #F1C28F, -0.14598em -2.0876em 0 0 #F1C28F, -0.18467em -2.34652em 0 0 #F1C28F, -0.22788em -2.60472em 0 0 #F1C28F, -0.27559em -2.86213em 0 0 #F1C28F, -0.32779em -3.11868em 0 0 #F1C28F, -0.38445em -3.37427em 0 0 #F1C28F, -0.44556em -3.62883em 0 0 #F1C28F, -0.51111em -3.88229em 0 0 #F1C28F;
&:before {
content: '';
position: absolute;
background-color: $cat-body-color;
border: $cat-body-color $stroke-width solid;
height: 100%;
width: 100%;
left: 0;
top: 0;
margin: -$stroke-width;
border-radius: 10em;
z-index: -1;
// @include drawOnCircle($cat-body-color, $inner-width + $cat-width / 2, 0, 11);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.00228em 0.26179em 0 0 #EBA763, -0.00914em 0.52349em 0 0 #EBA763, -0.02056em 0.78504em 0 0 #EBA763, -0.03654em 1.04635em 0 0 #EBA763, -0.05708em 1.30734em 0 0 #EBA763, -0.08217em 1.56793em 0 0 #EBA763, -0.11181em 1.82804em 0 0 #EBA763, -0.14598em 2.0876em 0 0 #EBA763, -0.18467em 2.34652em 0 0 #EBA763, -0.22788em 2.60472em 0 0 #EBA763, -0.27559em 2.86213em 0 0 #EBA763;
}
}
}
&.inner-leg .cat-leg > div {
// @include drawOnCircle($cat-body-color, $cat-inner-leg-center, 0, -33);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.0018em -0.20594em 0 0 #EBA763, -0.00719em -0.41181em 0 0 #EBA763, -0.01617em -0.61756em 0 0 #EBA763, -0.02874em -0.82313em 0 0 #EBA763, -0.0449em -1.02844em 0 0 #EBA763, -0.06464em -1.23344em 0 0 #EBA763, -0.08796em -1.43806em 0 0 #EBA763, -0.11484em -1.64224em 0 0 #EBA763, -0.14528em -1.84593em 0 0 #EBA763, -0.17927em -2.04905em 0 0 #EBA763, -0.2168em -2.25155em 0 0 #EBA763, -0.25786em -2.45336em 0 0 #EBA763, -0.30243em -2.65442em 0 0 #EBA763, -0.35051em -2.85468em 0 0 #EBA763, -0.40208em -3.05406em 0 0 #EBA763, -0.45711em -3.25252em 0 0 #EBA763, -0.5156em -3.44999em 0 0 #EBA763, -0.57753em -3.6464em 0 0 #EBA763, -0.64288em -3.8417em 0 0 #EBA763, -0.71163em -4.03584em 0 0 #EBA763, -0.78375em -4.22874em 0 0 #EBA763, -0.85923em -4.42036em 0 0 #EBA763, -0.93804em -4.61063em 0 0 #EBA763, -1.02016em -4.79949em 0 0 #EBA763, -1.10557em -4.9869em 0 0 #EBA763, -1.19423em -5.17278em 0 0 #EBA763, -1.28612em -5.35709em 0 0 #EBA763, -1.38122em -5.53976em 0 0 #EBA763, -1.47949em -5.72075em 0 0 #EBA763, -1.5809em -5.9em 0 0 #EBA763, -1.68543em -6.07745em 0 0 #EBA763, -1.79303em -6.25305em 0 0 #EBA763, -1.90369em -6.42674em 0 0 #EBA763;
&:before {
// @include drawOnCircle($stroke-color, $cat-inner-leg-start + $stroke-width / 2 , 0, -33);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.0016em -0.18325em 0 0 #393D46, -0.0064em -0.36644em 0 0 #393D46, -0.01439em -0.54953em 0 0 #393D46, -0.02558em -0.73244em 0 0 #393D46, -0.03996em -0.91514em 0 0 #393D46, -0.05752em -1.09755em 0 0 #393D46, -0.07827em -1.27963em 0 0 #393D46, -0.10219em -1.46132em 0 0 #393D46, -0.12927em -1.64256em 0 0 #393D46, -0.15952em -1.82331em 0 0 #393D46, -0.19291em -2.00349em 0 0 #393D46, -0.22945em -2.18307em 0 0 #393D46, -0.26911em -2.36199em 0 0 #393D46, -0.31189em -2.54018em 0 0 #393D46, -0.35778em -2.7176em 0 0 #393D46, -0.40675em -2.89419em 0 0 #393D46, -0.4588em -3.0699em 0 0 #393D46, -0.51391em -3.24468em 0 0 #393D46, -0.57205em -3.41847em 0 0 #393D46, -0.63323em -3.59121em 0 0 #393D46, -0.69741em -3.76286em 0 0 #393D46, -0.76457em -3.93337em 0 0 #393D46, -0.8347em -4.10268em 0 0 #393D46, -0.90777em -4.27073em 0 0 #393D46, -0.98377em -4.43749em 0 0 #393D46, -1.06266em -4.6029em 0 0 #393D46, -1.14443em -4.7669em 0 0 #393D46, -1.22905em -4.92945em 0 0 #393D46, -1.31649em -5.0905em 0 0 #393D46, -1.40673em -5.25em 0 0 #393D46, -1.49974em -5.4079em 0 0 #393D46, -1.59549em -5.56415em 0 0 #393D46, -1.69396em -5.71871em 0 0 #393D46;
}
&:after {
// @include drawOnCircle($stroke-color, $cat-inner-leg-start + $leg-width - $stroke-width / 2 , 0, -13);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.002em -0.22863em 0 0 #393D46, -0.00798em -0.45718em 0 0 #393D46, -0.01795em -0.6856em 0 0 #393D46, -0.03191em -0.91381em 0 0 #393D46, -0.04985em -1.14174em 0 0 #393D46, -0.07176em -1.36932em 0 0 #393D46, -0.09765em -1.59649em 0 0 #393D46, -0.12749em -1.82317em 0 0 #393D46, -0.16128em -2.04929em 0 0 #393D46, -0.19902em -2.27479em 0 0 #393D46, -0.24068em -2.4996em 0 0 #393D46, -0.28627em -2.72364em 0 0 #393D46, -0.33575em -2.94686em 0 0 #393D46;
}
}
&.outer-leg .cat-leg {
left: $cat-outer-leg-start - $inner-width;
}
&.outer-leg .cat-leg > div {
// @include drawOnCircle($cat-body-color, $cat-outer-leg-center, 0, -45, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #EBA763, -0.00069em -0.15904em 0 0 #EBA763, -0.00278em -0.31807em 0 0 #EBA763, -0.00625em -0.47707em 0 0 #EBA763, -0.0111em -0.63604em 0 0 #EBA763, -0.01735em -0.79496em 0 0 #EBA763, -0.02498em -0.95382em 0 0 #EBA763, -0.03399em -1.11261em 0 0 #EBA763, -0.0444em -1.27131em 0 0 #EBA763, -0.05618em -1.42992em 0 0 #EBA763, -0.06935em -1.58841em 0 0 #EBA763, -0.0839em -1.74679em 0 0 #EBA763, -0.09984em -1.90503em 0 0 #EBA763, -0.11715em -2.06313em 0 0 #EBA763, -0.13585em -2.22107em 0 0 #EBA763, -0.15592em -2.37884em 0 0 #EBA763, -0.17736em -2.53643em 0 0 #EBA763, -0.20019em -2.69383em 0 0 #EBA763, -0.22438em -2.85102em 0 0 #EBA763, -0.24994em -3.00799em 0 0 #EBA763, -0.27688em -3.16474em 0 0 #EBA763, -0.30518em -3.32124em 0 0 #EBA763, -0.33484em -3.47749em 0 0 #EBA763, -0.36587em -3.63348em 0 0 #EBA763, -0.39826em -3.78919em 0 0 #EBA763, -0.43201em -3.94461em 0 0 #EBA763, -0.46711em -4.09973em 0 0 #EBA763, -0.50356em -4.25454em 0 0 #EBA763, -0.54136em -4.40903em 0 0 #EBA763, -0.58051em -4.56318em 0 0 #EBA763, -0.621em -4.71698em 0 0 #EBA763, -0.66283em -4.87042em 0 0 #EBA763, -0.70601em -5.02349em 0 0 #EBA763, -0.75051em -5.17618em 0 0 #EBA763, -0.79635em -5.32847em 0 0 #EBA763, -0.84351em -5.48036em 0 0 #EBA763, -0.89199em -5.63183em 0 0 #EBA763, -0.9418em -5.78288em 0 0 #EBA763, -0.99292em -5.93348em 0 0 #EBA763, -1.04536em -6.08363em 0 0 #EBA763, -1.0991em -6.23332em 0 0 #EBA763, -1.15415em -6.38253em 0 0 #EBA763, -1.2105em -6.53126em 0 0 #EBA763, -1.26814em -6.67948em 0 0 #EBA763, -1.32707em -6.82721em 0 0 #EBA763, -1.3873em -6.97441em 0 0 #EBA763, -1.4488em -7.12107em 0 0 #EBA763, -1.51158em -7.2672em 0 0 #EBA763, -1.57563em -7.41278em 0 0 #EBA763, -1.64096em -7.55778em 0 0 #EBA763, -1.70754em -7.70222em 0 0 #EBA763, -1.77538em -7.84606em 0 0 #EBA763, -1.84448em -7.98931em 0 0 #EBA763, -1.91482em -8.13196em 0 0 #EBA763, -1.98641em -8.27398em 0 0 #EBA763, -2.05923em -8.41537em 0 0 #EBA763, -2.13328em -8.55612em 0 0 #EBA763, -2.20856em -8.69622em 0 0 #EBA763, -2.28506em -8.83566em 0 0 #EBA763, -2.36277em -8.97442em 0 0 #EBA763, -2.44169em -9.1125em 0 0 #EBA763, -2.52181em -9.24989em 0 0 #EBA763, -2.60313em -9.38657em 0 0 #EBA763, -2.68563em -9.52254em 0 0 #EBA763, -2.76932em -9.65778em 0 0 #EBA763, -2.85419em -9.79229em 0 0 #EBA763, -2.94023em -9.92605em 0 0 #EBA763, -3.02743em -10.05905em 0 0 #EBA763, -3.11579em -10.19129em 0 0 #EBA763, -3.2053em -10.32275em 0 0 #EBA763, -3.29595em -10.45343em 0 0 #EBA763, -3.38774em -10.58331em 0 0 #EBA763, -3.48067em -10.71239em 0 0 #EBA763, -3.57471em -10.84065em 0 0 #EBA763, -3.66987em -10.96808em 0 0 #EBA763, -3.76614em -11.09468em 0 0 #EBA763, -3.8635em -11.22043em 0 0 #EBA763, -3.96197em -11.34533em 0 0 #EBA763, -4.06151em -11.46936em 0 0 #EBA763, -4.16214em -11.59253em 0 0 #EBA763, -4.26384em -11.7148em 0 0 #EBA763, -4.3666em -11.83619em 0 0 #EBA763, -4.47042em -11.95668em 0 0 #EBA763, -4.57528em -12.07625em 0 0 #EBA763, -4.68119em -12.19491em 0 0 #EBA763, -4.78812em -12.31263em 0 0 #EBA763, -4.89608em -12.42942em 0 0 #EBA763, -5.00505em -12.54526em 0 0 #EBA763, -5.11503em -12.66015em 0 0 #EBA763, -5.22601em -12.77407em 0 0 #EBA763, -5.33798em -12.88702em 0 0 #EBA763;
&:before {
// @include drawOnCircle($stroke-color, $cat-outer-leg-start + $stroke-width / 2 , 0, -10, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00064em -0.14748em 0 0 #393D46, -0.00257em -0.29495em 0 0 #393D46, -0.00579em -0.44239em 0 0 #393D46, -0.0103em -0.5898em 0 0 #393D46, -0.01609em -0.73717em 0 0 #393D46, -0.02316em -0.88448em 0 0 #393D46, -0.03152em -1.03172em 0 0 #393D46, -0.04117em -1.17888em 0 0 #393D46, -0.0521em -1.32596em 0 0 #393D46, -0.06431em -1.47293em 0 0 #393D46, -0.0778em -1.61979em 0 0 #393D46, -0.09258em -1.76653em 0 0 #393D46, -0.10864em -1.91313em 0 0 #393D46, -0.12597em -2.05959em 0 0 #393D46, -0.14458em -2.20589em 0 0 #393D46, -0.16447em -2.35203em 0 0 #393D46, -0.18563em -2.49798em 0 0 #393D46, -0.20807em -2.64374em 0 0 #393D46, -0.23177em -2.7893em 0 0 #393D46, -0.25675em -2.93465em 0 0 #393D46;
}
&:after {
// @include drawOnCircle($stroke-color, $cat-outer-leg-start + $leg-width - $stroke-width / 2 , 0, -45, 2);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00074em -0.17039em 0 0 #393D46, -0.00297em -0.34076em 0 0 #393D46, -0.00669em -0.5111em 0 0 #393D46, -0.01189em -0.68141em 0 0 #393D46, -0.01858em -0.85167em 0 0 #393D46, -0.02676em -1.02186em 0 0 #393D46, -0.03642em -1.19197em 0 0 #393D46, -0.04756em -1.362em 0 0 #393D46, -0.06019em -1.53191em 0 0 #393D46, -0.0743em -1.70172em 0 0 #393D46, -0.08989em -1.87139em 0 0 #393D46, -0.10696em -2.04092em 0 0 #393D46, -0.12551em -2.21029em 0 0 #393D46, -0.14554em -2.3795em 0 0 #393D46, -0.16704em -2.54852em 0 0 #393D46, -0.19002em -2.71735em 0 0 #393D46, -0.21447em -2.88598em 0 0 #393D46, -0.24039em -3.05438em 0 0 #393D46, -0.26777em -3.22255em 0 0 #393D46, -0.29663em -3.39048em 0 0 #393D46, -0.32695em -3.55815em 0 0 #393D46, -0.35873em -3.72555em 0 0 #393D46, -0.39197em -3.89266em 0 0 #393D46, -0.42667em -4.05948em 0 0 #393D46, -0.46282em -4.22598em 0 0 #393D46, -0.50042em -4.39217em 0 0 #393D46, -0.53948em -4.55802em 0 0 #393D46, -0.57998em -4.72353em 0 0 #393D46, -0.62192em -4.88867em 0 0 #393D46, -0.6653em -5.05344em 0 0 #393D46, -0.71012em -5.21783em 0 0 #393D46, -0.75637em -5.38182em 0 0 #393D46, -0.80404em -5.5454em 0 0 #393D46, -0.85315em -5.70856em 0 0 #393D46, -0.90368em -5.87128em 0 0 #393D46, -0.95562em -6.03356em 0 0 #393D46, -1.00898em -6.19537em 0 0 #393D46, -1.06375em -6.35672em 0 0 #393D46, -1.11992em -6.51758em 0 0 #393D46, -1.1775em -6.67794em 0 0 #393D46, -1.23648em -6.8378em 0 0 #393D46, -1.29684em -6.99713em 0 0 #393D46, -1.3586em -7.15594em 0 0 #393D46, -1.42174em -7.31419em 0 0 #393D46, -1.48625em -7.47189em 0 0 #393D46, -1.55214em -7.62903em 0 0 #393D46, -1.6194em -7.78558em 0 0 #393D46, -1.68802em -7.94153em 0 0 #393D46, -1.75801em -8.09689em 0 0 #393D46, -1.82934em -8.25162em 0 0 #393D46, -1.90202em -8.40573em 0 0 #393D46, -1.97605em -8.5592em 0 0 #393D46, -2.05141em -8.71201em 0 0 #393D46, -2.1281em -8.86416em 0 0 #393D46, -2.20611em -9.01564em 0 0 #393D46, -2.28545em -9.16643em 0 0 #393D46, -2.3661em -9.31652em 0 0 #393D46, -2.44805em -9.46591em 0 0 #393D46, -2.53131em -9.61457em 0 0 #393D46, -2.61585em -9.7625em 0 0 #393D46, -2.70169em -9.90969em 0 0 #393D46, -2.78881em -10.05612em 0 0 #393D46, -2.8772em -10.20178em 0 0 #393D46, -2.96686em -10.34667em 0 0 #393D46, -3.05778em -10.49077em 0 0 #393D46, -3.14996em -10.63408em 0 0 #393D46, -3.24338em -10.77657em 0 0 #393D46, -3.33804em -10.91824em 0 0 #393D46, -3.43394em -11.05908em 0 0 #393D46, -3.53106em -11.19908em 0 0 #393D46, -3.62939em -11.33823em 0 0 #393D46, -3.72894em -11.47651em 0 0 #393D46, -3.82969em -11.61391em 0 0 #393D46, -3.93164em -11.75044em 0 0 #393D46, -4.03478em -11.88607em 0 0 #393D46, -4.13909em -12.02079em 0 0 #393D46, -4.24458em -12.1546em 0 0 #393D46, -4.35123em -12.28748em 0 0 #393D46, -4.45903em -12.41943em 0 0 #393D46, -4.56798em -12.55043em 0 0 #393D46, -4.67807em -12.68047em 0 0 #393D46, -4.7893em -12.80955em 0 0 #393D46, -4.90164em -12.93766em 0 0 #393D46, -5.0151em -13.06478em 0 0 #393D46, -5.12966em -13.1909em 0 0 #393D46, -5.24532em -13.31602em 0 0 #393D46, -5.36207em -13.44012em 0 0 #393D46, -5.47989em -13.5632em 0 0 #393D46, -5.59878em -13.68525em 0 0 #393D46, -5.71874em -13.80626em 0 0 #393D46;
}
}
&.cat-jj {
div {
padding: 1.5em;
margin-top: -1.5em;
margin-left: $cat-jj-start;
background-color: $stroke-color;
border-radius: 10em;
position: absolute;
// @include drawOnCircle($stroke-color, $cat-jj-center, 0, 30);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #393D46, -0.00229em 0.26266em 0 0 #393D46, -0.00917em 0.52524em 0 0 #393D46, -0.02063em 0.78766em 0 0 #393D46, -0.03666em 1.04983em 0 0 #393D46, -0.05727em 1.31169em 0 0 #393D46, -0.08245em 1.57315em 0 0 #393D46, -0.11218em 1.83413em 0 0 #393D46, -0.14647em 2.09456em 0 0 #393D46, -0.18529em 2.35434em 0 0 #393D46, -0.22864em 2.61341em 0 0 #393D46, -0.27651em 2.87168em 0 0 #393D46, -0.32888em 3.12907em 0 0 #393D46, -0.38573em 3.38551em 0 0 #393D46, -0.44705em 3.64092em 0 0 #393D46, -0.51282em 3.89523em 0 0 #393D46, -0.58301em 4.14834em 0 0 #393D46, -0.65761em 4.40019em 0 0 #393D46, -0.7366em 4.65071em 0 0 #393D46, -0.81995em 4.8998em 0 0 #393D46, -0.90763em 5.1474em 0 0 #393D46, -0.99961em 5.39344em 0 0 #393D46, -1.09588em 5.63783em 0 0 #393D46, -1.1964em 5.8805em 0 0 #393D46, -1.30114em 6.12139em 0 0 #393D46, -1.41007em 6.3604em 0 0 #393D46, -1.52315em 6.59749em 0 0 #393D46, -1.64035em 6.83256em 0 0 #393D46, -1.76164em 7.06555em 0 0 #393D46, -1.88697em 7.29638em 0 0 #393D46, -2.01632em 7.525em 0 0 #393D46;
&:before {
content: '';
background-color: $cat-jj-color;
position: absolute;
padding: $stroke-width / 2;
margin: -$stroke-width / 2;
border-radius: 10em;
// @include drawOnCircle($cat-jj-color, $cat-jj-center, 0, 30);
box-shadow: 0 0 0 transparent, 0em 0em 0 0 #C48344, -0.00229em 0.26266em 0 0 #C48344, -0.00917em 0.52524em 0 0 #C48344, -0.02063em 0.78766em 0 0 #C48344, -0.03666em 1.04983em 0 0 #C48344, -0.05727em 1.31169em 0 0 #C48344, -0.08245em 1.57315em 0 0 #C48344, -0.11218em 1.83413em 0 0 #C48344, -0.14647em 2.09456em 0 0 #C48344, -0.18529em 2.35434em 0 0 #C48344, -0.22864em 2.61341em 0 0 #C48344, -0.27651em 2.87168em 0 0 #C48344, -0.32888em 3.12907em 0 0 #C48344, -0.38573em 3.38551em 0 0 #C48344, -0.44705em 3.64092em 0 0 #C48344, -0.51282em 3.89523em 0 0 #C48344, -0.58301em 4.14834em 0 0 #C48344, -0.65761em 4.40019em 0 0 #C48344, -0.7366em 4.65071em 0 0 #C48344, -0.81995em 4.8998em 0 0 #C48344, -0.90763em 5.1474em 0 0 #C48344, -0.99961em 5.39344em 0 0 #C48344, -1.09588em 5.63783em 0 0 #C48344, -1.1964em 5.8805em 0 0 #C48344, -1.30114em 6.12139em 0 0 #C48344, -1.41007em 6.3604em 0 0 #C48344, -1.52315em 6.59749em 0 0 #C48344, -1.64035em 6.83256em 0 0 #C48344, -1.76164em 7.06555em 0 0 #C48344, -1.88697em 7.29638em 0 0 #C48344, -2.01632em 7.525em 0 0 #C48344;
}
}
}
}
}
.cat-leg {
padding: ($leg-width - 2 * $stroke-width) / 2;
margin-top: -$leg-width / 2;
margin-left: $inner-width;
position: absolute;
border-radius: 10em;
background-color: $stroke-color;
border: $stroke-color $stroke-width solid;
& > div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: $cat-body-color;
border-radius: 10em;
&:before,
&:after {
content: '';
padding: $stroke-width / 2;
background-color: $stroke-color;
position: absolute;
top: 50%;
margin-top: -$stroke-width / 2;
border-radius: 10em;
}
&:before {
right: 100%;
}
&:after {
left: 100%;
}
}
}
body {
background-color: $backgorund-color;
height: 100vh;
width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: monospace;
overflow: hidden;
}
* {
box-sizing: border-box;
}
div {
display: inline-block;
}
!
