SCSS

by maya tominaga

HTML

<div>
  <svg
    version="1.0"
    xmlns="http://www.w3.org/2000/svg"
    height="600pt"
    viewBox="0 0 600 200"
    preserveAspectRatio="xMidYMid meet"
  >
    <g transform="translate(0,400.000000) scale(0.1,-0.1)" fill="red">
      <path
        class="a"
        d="M3374 3067 c-3 -8 -4 -34 -2 -58 2 -36 7 -44 23 -44 18 0 20 7 20 55
  0 44 -3 55 -18 58 -9 2 -20 -3 -23 -11z"
      />
      <path
        class="a"
        d="M3794 3046 c-16 -12 -20 -31 -24 -133 -7 -148 -4 -163 25 -163 26 0
  38 24 34 68 -4 36 7 52 35 52 35 0 86 57 86 96 0 66 -102 119 -156 80z m84
  -52 c27 -19 28 -38 2 -64 -34 -34 -50 -26 -50 23 0 60 9 68 48 41z"
      />
      <path
        class="a"
        d="M4572 3037 c-12 -13 -22 -33 -22 -45 0 -11 -11 -32 -25 -46 -31 -31
  -31 -34 -2 -45 22 -8 23 -14 19 -70 -5 -71 3 -111 23 -111 19 0 27 30 25 98
  -2 81 -2 82 19 82 24 0 45 25 37 45 -3 8 -14 15 -25 15 -44 0 -24 39 27 55 36
  11 24 39 -18 43 -27 2 -41 -3 -58 -21z"
      />
      <path
        class="a"
        d="M4897 3053 c-2 -4 -4 -74 -4 -155 l0 -148 23 0 c26 0 25 -10 29 268
  0 30 -4 38 -22 40 -11 2 -23 0 -26 -5z"
      />
      <path
        class="a"
        d="M2528 3038 c-9 -8 -18 -36 -21 -67 -4 -29 -10 -58 -15 -65 -5 -6 -15
  -39 -22 -74 -12 -57 -11 -65 4 -80 16 -16 18 -16 32 2 8 11 14 36 14 56 0 43
  28 89 41 69 5 -8 9 -31 9 -52 0 -48 15 -77 39 -77 18 0 34 40 51 123 3 15 9
  29 14 30 10 2 35 -83 36 -119 0 -27 21 -46 39 -35 13 8 8 45 -18 146 -6 22
  -11 60 -11 85 0 49 -13 70 -41 70 -13 0 -19 -12 -24 -42 -12 -72 -31 -139 -40
  -141 -11 -3 -33 61 -34 100 -1 37 -17 83 -29 83 -4 0 -15 -6 -24 -12z"
      />
      <path
        class="a"
        d="M4995 3030 c-9 -27 10 -49 36 -43 27 7 32 19 17 43 -16 26 -45 26
  -53 0z"
      />
      <path
        class="a"
        d="M4370 2996 c0 -13 -10 -30 -22 -39 l-23 -15 26 -26 c25 -23 26 -29
  22 -89 -5 -59 -4 -66 16 -77 39 -20 54 3 46 71 -8 72 -1 95 31 103 31 8 27 28
  -7 36 -17 4 -25 14 -27 33 -3 22 -8 27 -33 27 -24 0 -29 -4 -29 -24z"
      />
...

SCSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

svg {
  position: absolute;
  top: 0;
  right: 50vw;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  
  .a {
    stroke: #fbe6db;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: stroke-reveal 2s ease infinite;    
  }
}

@keyframes stroke-reveal {
  from {
    stroke-dashoffset: 250;
    fill: rgba(250, 205, 198, 0);
    stroke-width: 1cm;
    stroke-opacity: 0.6;
  }
  to {
    stroke-dashoffset: 0;
    fill: rgba(250, 205, 198, 1);
    stroke-width: 0;
    stroke-opacity: 0;
  }
}