<svg viewBox="0 0 64 64">
  <path
     d="m 10.833204,16.877034 c -0.0362,-2.862494 2.14101,-4.664803 5.43488,-4.075813 3.29386,0.588991 4.04674,4.75904 1.8822,6.950082 -2.94095,2.94495 -9.3639801,2.94495 -12.2343501,-0.706789 -5.14077998,-6.361091 1.494,-16.2561214 10.9403301,-15.4315354 6.32893,0.567787 11.03445,7.3859334 10.57566,13.6645674 -0.31409,4.240727 -1.85868,8.787729 -3.99969,12.957778 -2.57627,5.018194 -7.17592,9.470959 -12.94018,9.659436 -3.2938601,0.107079 -6.8935901,-2.355961 -6.3524501,-5.8899 0.69877,-4.594122 5.7642602,-6.9972 9.9992301,-7.421272 8.23466,-0.821053 16.46931,0.941205 24.70397,-0.01885 7.10534,-0.831654 16.586961,-3.934453 20.469011,-11.273268 1.68222,-3.192326 2.39981,-7.1974574 -1.03873,-9.9303714 -3.42328,-2.721132 -9.328691,-0.954163 -12.352001,1.17798 -5.18783,3.6870784 -7.78763,10.3544444 -9.64631,16.4917194 -3.19976,10.590038 -6.23482,21.557031 -12.94018,30.627483 -2.82331,3.840205 -7.64647,7.291665 -12.94018,6.125485 -3.1762301,-0.69854 -6.8230001,-5.206665 -5.9642501,-8.269415 1.18815,-4.240729 4.82316,-5.029974 8.9404901,-5.477605 6.58773,-0.703255 14.35184,3.510377 19.05735,7.385935 4.09381,3.427915 9.164,7.515505 15.29294,6.478875 7.399431,-1.24865 11.999081,-8.599245 12.940201,-15.313727 0.7364,-5.300909 -1.82341,-11.249707 -7.17593,-12.957779 -7.234741,-2.30884 -15.292941,2.603337 -16.469321,9.659436 -0.66936,3.899113 2.81154,7.032539 6.47009,7.656868 4.34084,0.749196 8.505221,-3.180545 7.881731,-7.421273 -0.46348,-3.180546 -7.658221,-3.863773 -7.752331,0.957699 -0.12588,6.467108 -8.32877,8.999771 -13.41073,8.022041 -9.05813,-1.766967 -16.23404,-12.250988 -16.82224,-21.792625 -0.99992,-13.782366 10.58742,-28.03592036 28.11548,-21.9104254 2.88213,1.008351 6.25835,4.3349664 6.91712,6.7851644 1.41166,5.206671 0.75524,8.457894 1.55282,12.015393 1.176381,5.253791 3.176231,7.468394 4.199671,6.997202 1.01992,-0.464124 1.30579,-1.884768 1.25874,-4.65302 -0.0741,-4.264288 -0.92111,-4.228948 -2.88214,-4.13471 -2.588021,0.126044 -8.128791,0.706788 -15.763491,0.91529 -2.83508,0.07669 -2.54098,2.037906 -2.79979,2.061465 -6.03482,0.348681 -11.28148,0.451166 -13.99891,0.756263 l 0.28938,0.587812 c 6.29364,-0.517134 10.63448,-0.646711 13.64601,-0.812806 0.13529,4.817939 1.38813,6.054818 4.57612,6.278633 2.341,0.117209 4.9055,-0.914112 5.90543,-2.556215 2.22335,-3.651739 1.23519,-5.489385 3.81147,-5.512948 1.75281,-0.01779 3.587961,5.560065 4.776101,8.505014 1.08932,2.709356 3.52913,5.842781 1.99984,8.669933 -1.29402,2.391299 -7.999381,0.742128 -7.999381,0.742128 0,0 1.27049,3.887332 -0.2588,3.887332 -2.82331,-0.0068 -8.58757,0.353395 -10.11687,-4.122928 1.64693,4.405644 7.29356,4.122928 10.11687,4.122928 1.17637,1.12e-4 0.50819,0.824586 1.29402,5.30091 0.41409,2.35596 0.67171,4.782585 -1.11757,6.007685 -5.89366,4.04047 -16.35168,-1.64917 -20.82192,-4.405635 -4.37613,-2.67401 -8.81108,-5.901675 -11.7638,-10.484017 -1.51753,-2.36774 0.76465,-5.430488 1.64693,-6.007697 -3.64677,2.944948 -4.88197,-3.062749 -5.64662,-6.007698 -0.9505101,-3.651738 0.2294,-9.282481 6.11718,-8.128062 3.76441,0.73506 3.88205,7.974925 6.58772,8.363658 3.29387,0.478259 2.79979,-6.584909 1.5293,-9.070445 -1.494,-2.933171 -3.74089,-6.584908 -2.35276,-9.895032 1.31754,-3.1098668 5.52898,-2.544437 8.35229,-2.120363 4.11734,0.614906 9.34046,2.780031 13.64601,1.133216 3.76441,-1.448915 -2.82331,-6.5495664 -8.23466,-7.5979694 -4.94079,-0.930606 -13.17545,-2.603336 -21.76302,2.179263 -5.3290101,2.9685076 -8.7169801,8.4814544 -9.5286801,14.4891524 -1.22344,9.070444 2.44687,17.080708 9.4110401,22.028223 6.35245,4.711919 17.17514,4.358525 14.35183,-7.774667 -2.35276,-10.012829 -17.41042,-10.837416 -17.52806,-18.494286 z"
     id="face-monogram" />
</svg>

$ease:     ease-in-out;
$speed:             8s;
$stroke-width:     0.3; 

$path-length:    944.6;
$monogram-start:  .000;
$monogram-end:    .447;
$face-start:      .542;
$face-end:        .946;

@mixin line($start, $end) {
  $offset:   $start * -$path-length;
  $stroke:   $end * $path-length + $offset;
  $gap:      $path-length - $stroke;
  
  stroke-dashoffset: $offset;
  stroke-dasharray: $stroke $gap;
}

@keyframes monogram-loop {
  000% { @include line($monogram-start,   $monogram-end  )}
  050% { @include line($face-start,       $face-end      )}
  100% { @include line($monogram-start+1, $monogram-end+1)}
}

svg {
  background: #FFF;
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  #face-monogram {
    stroke-width: $stroke-width;
    fill-opacity: 0;
    stroke: #444;
    animation: monogram-loop $speed infinite $ease; 
  }
}