Layering an animated SVG outline (path) exactly over an animated (animateTransform) SVG clip-path applied to divs?

Question

I eventually got there (almost), but I had some trouble trying to put this demo (Code Sandbox link) together, where there are basically two divs that use SVG clipPath + CSS clip-path and CSS mix-blend-mode to create dynamic/animated overlays on a background image. Animation is done using SVG's animateTransform.

I wanted then to layer a stroke over each of those two divs, so that the animated & clipped overlays would be outlined with a consistent stroke. I could not figure out how to do this with the native SVG stroke and match the geometry and animation at the same time, which resulted in much banging of my head against the nearest wall.

To get some semblance of the effect I was going for, I decided to import the clipping path SVGs into a vector editor and outline the stroke, and then layer that outlined stroke as two more divs using SVG clipPath & CSS clip-path that just clip a black background—which has the final effect of layering on a stroke-like SVG object on top of the other divs with CSS mix-blend-mode. However, the animation of the objects creates some distortion in the stroke geometry, which I don't really understand. When I was applying a scale transform using animateTransform, I understood this to be messing with the consistent thickness of the outlined stroke, but I removed it (you can see it's commented out), and there are only translation and rotation transforms acting on the objects now, so I can't figure out why it's still getting deformed. Is there some stretching going on because of the viewBox?

Anyway, I am posting here because the outline stroke is obviously a hack, and I wanted to see if anyone could help me figure out how to achieve this effect using actual stroked SVG paths.

Thanks!

View on Code Sandbox

#screen,
.blob {
  background-image: url(https://i.imgur.com/X8wKbjO.png);
  background-repeat: none;
  background-size: cover;
  overflow: hidden;
  position: relative;
  transform-origin: center;
}

#screen {
  width: 375px;
  height: 667px;
}

.blob {
  height: 667px;
  width: 667px;
}

.blob-stroke {
  width: 667px;
  height: 667px;
  overflow: hidden;
  position: relative;
  transform-origin: center;
  z-index: 2;
}

.bg-color {
  height: 100%;
  width: 100%;
  mix-blend-mode: hard-light;
  position: relative;
}

#bg-color {
  background-color: #d9eef2;
  z-index: 1;
}

.blob {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}

#shape-1 {
  clip-path: url(#blob1);
  -webkit-clip-path: url(#blob1);
}

#shape-1-bg {
  background-color: #ff4c79;
}

#shape-2 {
  clip-path: url(#blob2);
  -webkit-clip-path: url(#blob2);
}

#shape-1-stroke {
  clip-path: url(#blob1Stroke);
  -webkit-clip-path: url(#blob1Stroke);
}

#shape-2-stroke {
  clip-path: url(#blob2Stroke);
  -webkit-clip-path: url(#blob2Stroke);
}

#shape-2-bg {
  background-color: #f0f075;
}

#shape-1-stroke-bg,
#shape-2-stroke-bg {
  background-color: #000;
}

<div id="screen">
  <div id="bg-color" class="bg-color"></div>
  <div id="shape-1" class="blob">
    <div id="shape-1-bg" class="bg-color"></div>
  </div>
  <div id="shape-1-stroke" class="blob blob-stroke">
    <div id="shape-1-stroke-bg" class="bg-color"></div>
  </div>
  <div id="shape-2" class="blob">
    <div id="shape-2-bg" class="bg-color"></div>
  </div>
  <div id="shape-2-stroke" class="blob blob-stroke">
    <div id="shape-2-stroke-bg" class="bg-color"></div>
  </div>
</div>
<svg id="blob1Geometry" width="0" height="0">
  <clipPath id="blob1" clipPathUnits="objectBoundingBox">
    <path
      d="M0.218,-0.388 C0.268,-0.324,0.284,-0.235,0.345,-0.15 C0.406,-0.065,0.511,0.014,0.513,0.086 C0.515,0.158,0.415,0.223,0.337,0.297 C0.259,0.371,0.204,0.454,0.129,0.49 C0.053,0.526,-0.043,0.514,-0.139,0.489 C-0.234,0.464,-0.329,0.426,-0.389,0.355 C-0.45,0.284,-0.475,0.18,-0.484,0.077 C-0.492,-0.026,-0.484,-0.128,-0.441,-0.207 C-0.399,-0.287,-0.321,-0.345,-0.242,-0.394 C-0.163,-0.444,-0.082,-0.485,0.001,-0.487 C0.084,-0.489,0.167,-0.451,0.218,-0.388"
      transform="translate(1, 0.5), rotate(180)"
    >
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob1"
        type="rotate"
        from="0 375 333"
        to="360 375 333"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob1"
        type="translate"
        values="0 0;-100 -333;0 0"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
    </path>
  </clipPath>
</svg>
<svg id="blob1StrokeGeometry" width="0" height="0">
  <clipPath id="blob1Stroke" clipPathUnits="objectBoundingBox">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M0.702821 0.100434C0.652287 0.0380227 0.569995 0.000337954 0.487714 0.00232065C0.405399 0.00430413 0.324867 0.0449854 0.24591 0.094958L0.245892 0.0949693C0.166933 0.143944 0.0894178 0.201666 0.0477322 0.281067L0.0477158 0.281098L0.0477156 0.281098C0.00504041 0.359501 -0.0029932 0.460949 0.00499288 0.563785C0.0139818 0.666645 0.0389282 0.770025 0.0994348 0.84045L0.0994472 0.840465C0.158957 0.910885 0.253348 0.948736 0.348251 0.97371C0.444207 0.998699 0.539471 1.01047 0.614654 0.974859C0.651745 0.957053 0.683998 0.927571 0.716835 0.893111C0.727845 0.881557 0.738932 0.869429 0.750284 0.857011C0.77269 0.832502 0.796129 0.806864 0.822044 0.782277C0.839814 0.765418 0.858721 0.749028 0.877261 0.732955C0.879114 0.731349 0.880964 0.729745 0.882809 0.728145C0.903126 0.710515 0.922817 0.693254 0.94 0.67607C0.974489 0.641581 0.998284 0.607964 0.997314 0.573043C0.99683 0.555591 0.990094 0.537549 0.979121 0.518868C0.968152 0.500194 0.953044 0.481041 0.936011 0.461388C0.925097 0.448795 0.913378 0.435984 0.901482 0.422982C0.876381 0.395544 0.850498 0.367251 0.829753 0.338344C0.799091 0.295619 0.779755 0.251907 0.761885 0.211042L0.760882 0.208748C0.743367 0.168687 0.727135 0.131561 0.702821 0.100434ZM0.487601 -0.00236549C0.571311 -0.00438261 0.655011 0.0339251 0.706479 0.0975029L0.706504 0.0975344C0.731193 0.129136 0.747634 0.166744 0.765059 0.206602L0.766179 0.209164C0.784059 0.250048 0.803223 0.293336 0.833561 0.335611C0.854146 0.364295 0.879693 0.392217 0.904689 0.419537C0.916637 0.432596 0.928459 0.445517 0.939553 0.458318C0.956646 0.47804 0.971975 0.497448 0.983162 0.516494C0.994345 0.535531 1.00148 0.554364 1.002 0.572913C1.00303 0.609991 0.977826 0.644874 0.943314 0.679385C0.925998 0.696702 0.906188 0.714065 0.885881 0.731685C0.884038 0.733284 0.882191 0.734885 0.880341 0.736489C0.861787 0.752574 0.84296 0.768895 0.82527 0.785678C0.799467 0.810158 0.776243 0.835564 0.753909 0.859996C0.742525 0.872449 0.731373 0.884649 0.720229 0.896344C0.687319 0.930881 0.654576 0.960897 0.616671 0.979091L0.61666 0.979096C0.539844 1.01548 0.443109 1.00326 0.347066 0.978246L0.347061 0.978244C0.251968 0.95322 0.156363 0.915073 0.0958731 0.843498C0.0343864 0.771926 0.00933378 0.667314 0.000322177 0.564182L0.00032021 0.564159L0.000320318 0.564159C-0.00769164 0.461005 0.00027411 0.358464 0.0435901 0.278872C0.0859048 0.198285 0.16438 0.140012 0.243413 0.0909912C0.322453 0.0409665 0.403919 -0.000349058 0.487601 -0.00236549Z"
      transform="translate(1.487, .988), rotate(180)"
    >
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob1Stroke"
        type="rotate"
        from="0 375 333"
        to="360 375 333"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob1Stroke"
        type="translate"
        values="0 0;-100 -333;0 0"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
    </path>
  </clipPath>
</svg>
<svg id="blob2Geometry" width="0" height="0">
  <clipPath id="blob2" clipPathUnits="objectBoundingBox">
    <path
      d="M0.248,-0.366 C0.306,-0.322,0.328,-0.234,0.343,-0.158 C0.358,-0.081,0.366,-0.016,0.406,0.087 C0.446,0.19,0.516,0.33,0.491,0.435 C0.464,0.541,0.341,0.612,0.227,0.584 C0.113,0.556,0.008,0.428,-0.128,0.395 C-0.265,0.362,-0.435,0.422,-0.486,0.381 C-0.536,0.34,-0.468,0.196,-0.442,0.085 C-0.414,-0.027,-0.428,-0.107,-0.407,-0.18 C-0.385,-0.254,-0.327,-0.32,-0.253,-0.358 C-0.179,-0.396,-0.09,-0.405,0.002,-0.408 C0.095,-0.412,0.19,-0.411,0.248,-0.366"
      transform="translate(0 1.2), rotate(180)"
      cx="0"
      cy="0"
    />
    <!--<animateTransform
      attributeType="XML"
      attributeName="transform"
      href="#blob2"
      type="scale"
      values="1;2;1"
      dur="30s"
      repeatCount="indefinite"
      additive="sum"
      fill="freeze"
    />//-->
    <animateTransform
      attributeType="XML"
      attributeName="transform"
      href="#blob2"
      type="translate"
      values="0 0;0 -667;0 0"
      dur="60s"
      repeatCount="indefinite"
      additive="sum"
      fill="freeze"
    />
    <animateTransform
      attributeType="XML"
      attributeName="transform"
      href="#blob2"
      type="rotate"
      from="0 0 667"
      to="360 0 667"
      dur="60s"
      repeatCount="indefinite"
      additive="sum"
      fill="freeze"
    />
  </clipPath>
</svg>
<svg id="blob2StrokeGeometry" width="0" height="0">
  <clipPath id="blob2Stroke" clipPathUnits="objectBoundingBox">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M0.648943 0.00806086C0.606527 0.00271226 0.559695 0.00345283 0.513212 0.00545212L0.513188 0.00545304C0.421217 0.00845209 0.33268 0.0174532 0.259182 0.0551954C0.185684 0.0929377 0.128159 0.158457 0.106361 0.231768C0.0965855 0.265754 0.094451 0.301292 0.0920494 0.341275C0.0918933 0.343874 0.0917361 0.346491 0.0915756 0.349128C0.0889494 0.392273 0.0854409 0.440448 0.0713892 0.496662C0.0648676 0.5245 0.0557198 0.554383 0.0464743 0.584119C0.0457485 0.586453 0.0450222 0.588786 0.0442964 0.591118C0.0357648 0.618524 0.0273166 0.645662 0.0208825 0.670939C0.0138957 0.698387 0.00933354 0.723459 0.0095798 0.744145C0.00982632 0.764853 0.0148797 0.780683 0.0265869 0.79029C0.0386905 0.800015 0.0581789 0.803957 0.0833596 0.804611C0.108449 0.805263 0.138616 0.802654 0.171658 0.799776L0.172399 0.799711C0.238154 0.793982 0.31498 0.787289 0.38366 0.803832L0.383664 0.803833C0.452146 0.82045 0.512734 0.86096 0.570191 0.900556C0.57277 0.902333 0.575343 0.904108 0.577909 0.905879C0.632696 0.943687 0.68471 0.979581 0.73867 0.992834C0.851516 1.02055 0.973169 0.950195 0.999836 0.84555C1.01218 0.793698 1.0011 0.732968 0.981752 0.67207C0.968419 0.63009 0.951256 0.588297 0.935306 0.549457C0.928112 0.531939 0.921164 0.515021 0.914926 0.498959C0.88127 0.412293 0.870201 0.3524 0.858652 0.289908C0.856443 0.277957 0.854217 0.265911 0.851812 0.253564C0.844316 0.215586 0.835099 0.174762 0.820557 0.137972C0.806011 0.101172 0.786216 0.0686144 0.757695 0.0469778L0.757675 0.0469623C0.729147 0.0248286 0.691372 0.0134112 0.648943 0.00806086ZM0.76054 0.0432523C0.731069 0.0203903 0.692346 0.00880936 0.649529 0.00341019C0.606699 -0.00199073 0.559535 -0.0012319 0.513023 0.000768429C0.420998 0.00376977 0.331539 0.0127695 0.257041 0.0510256C0.182542 0.0892816 0.124068 0.155758 0.101865 0.230443L0.101859 0.230463C0.0919322 0.264969 0.0897697 0.301006 0.0873792 0.340842C0.0872202 0.343492 0.0870602 0.346159 0.0868968 0.348843C0.0842733 0.391944 0.0807822 0.439763 0.0668374 0.495542L0.0668292 0.495576C0.0603511 0.523233 0.0512508 0.552969 0.0419982 0.582727C0.0412704 0.585068 0.0405416 0.587409 0.0398131 0.589749C0.0312905 0.617125 0.0228059 0.64438 0.0163399 0.669782C0.0093267 0.697334 0.00463889 0.722887 0.00489263 0.744201C0.00514603 0.765487 0.0103398 0.783029 0.0236251 0.793923L0.0236427 0.793937C0.0370397 0.804707 0.0579236 0.808639 0.0832378 0.809297C0.108648 0.809958 0.139106 0.807317 0.172065 0.804445L0.172431 0.804413C0.238428 0.798664 0.314624 0.792025 0.382559 0.808388C0.450077 0.824771 0.509989 0.864761 0.567531 0.904415C0.570211 0.906262 0.572886 0.908109 0.575557 0.909952C0.630053 0.947565 0.682727 0.983921 0.737552 0.997387C0.852701 1.02567 0.97704 0.954034 1.00438 0.846689L1.00439 0.846653C1.01704 0.793509 1.00563 0.731746 0.98622 0.670651C0.972827 0.628486 0.955534 0.586372 0.93955 0.547448C0.932378 0.529983 0.92547 0.513159 0.919296 0.497262C0.885808 0.411031 0.874817 0.351565 0.863273 0.289111C0.86106 0.277141 0.858827 0.265061 0.856412 0.252662L0.856411 0.252657C0.848906 0.214635 0.839624 0.173459 0.824916 0.136249C0.810214 0.0990538 0.790012 0.0656156 0.76054 0.0432523Z"
      transform="translate(0.51, 1.61), rotate(180)"
      cx="0"
      cy="0"
    >
      <!--<animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob2Stroke"
        type="scale"
        values="1;2;1"
        dur="30s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />//-->
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob2Stroke"
        type="translate"
        values="0 0;0 -667;0 0"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        href="#blob2Stroke"
        type="rotate"
        from="0 0 667"
        to="360 0 667"
        dur="60s"
        repeatCount="indefinite"
        additive="sum"
        fill="freeze"
      />
    </path>
  </clipPath>
</svg>