Cara

by ksbarrientosn

HTML

<body> 
<svg width="1421.9" height="2240.9" version="1.1" viewBox="0 0 2000 2500">
    <path class='face-inner' d="m984.38 965.82 152.28 5.0758 126.9 81.214-35.531 10.152-157.35-60.91-131.97 45.683 131.97 50.758 142.12-25.379-35.531 96.441-137.05-25.379-111.67-76.138v-76.138l192.88-131.97 228.41 40.607-25.379-60.91-213.19-116.74-192.88 60.91 25.379 55.834-91.365 106.59 50.758 131.97-71.062 55.834 25.379 106.59-162.43 111.67 45.683 25.379 116.74-20.303 35.531-50.758 40.607 106.59-50.758 55.834-45.683-15.228 40.607-35.531-20.303-30.455-60.91 5.0759-10.152 35.531-137.05 187.81 65.986 35.531 71.062-10.152 40.607-172.58v162.43l157.35 126.9v35.531l-157.35 71.062-147.2 5.0758 10.152-111.67 142.12 5.0758 86.289 30.455 45.683-15.228-30.455 10.152-101.52-45.683-131.97-10.152-142.12-35.531-121.82 25.379 71.062-10.152 172.58 45.683-15.228 111.67-116.74-20.303-71.062-65.986-91.365-91.365 213.19-76.138 106.59-142.12 5.0758-65.986-55.834 5.0759 30.455-40.607-45.683-15.228-30.455 25.379 30.455 30.455-40.607 40.607-55.834-91.365 45.683-91.365 96.441-101.52-35.531 60.91 81.214 60.91 20.303-365.46-208.11-218.26-258.87 30.455-86.289 60.91 406.07 30.455 101.52 111.67-40.607 71.062-104.4-76.549-129.09-19.892-134.78 29.164-19.653 37.585 164.58-26.142 152.28 40.607-152.28 40.607-146.85-29.931 55.243 65.32 95.36 12.47 94.553-42.905 77.633-14.945" fill="none" stroke-opacity=".92381" stroke-width="10"/>
    <path class='face-outer' d="m87.387 1072.8 35.321-151.88 17.661-148.35 38.853-98.899 56.514-286.1 113.03-148.35 310.83-67.11 243.72 28.257 243.72 35.321 183.67 250.78 21.193 233.12 10.596 144.82-17.66 264.91 24.725-60.046 49.45 31.789-31.789 123.62v74.174l-24.725 162.48v38.853l-35.321-77.706 31.789-98.899 17.661-45.917 21.268-159.81-42.46 71.508-21.193 134.22-31.789 84.771-17.66 38.853 67.11 77.706-42.385 28.257-38.853-70.642-24.725 70.642-70.642 303.76-35.321 81.239-194.27 218.99-183.67 74.174-77.706 7.0642-240.18-49.45-240.18-268.44-63.578-120.09-52.982-685.23-42.385 52.982 7.0642...

CSS

body {
  animation: background .2s linear alternate infinite;
}
svg {
  height: 100vh;
  width: 100vw;
}
.face-inner {
  stroke-dasharray: 1000;
  stroke-dashoffset: 5000;
  animation: dash 3s linear alternate infinite; 
  stroke: green;
}

.face-outer {
  stroke-dasharray: 2000;
  stroke-dashoffset: 5000;
  animation: dash 2s linear alternate infinite; 
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
  0% { stroke: hsl(180, 100%, 90%); } 
  10% { stroke: hsl(198, 100%, 75%); }
  20% { stroke: hsl(216, 100%, 90%); }
  30% { stroke: hsl(234, 100%, 75%); }
  40% { stroke: hsl(252, 100%, 90%); }
  50% { stroke: hsl(270, 100%, 75%); }
  60% { stroke: hsl(288, 100%, 90%); }
  70% { stroke: hsl(306, 100%, 75%); }
  80% { stroke: hsl(324, 100%, 90%); }
  90% { stroke: hsl(342, 100%, 75%); }
  100% { stroke: hsl(360, 100%, 90%); }
}

@keyframes background {
  0% { background-color: #101}
  33% { background-color: #110 }
  67% { background-color: #011 }
  100% { background-color: #101 }
}