JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Left drawing is made using erode and dilate -->
<!-- Right one is made by Illustrator's Offset Path -->
    
<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <filter id="dilate">
      <feMorphology operator="dilate" in="SourceGraphic" radius="10" />
    </filter>
      <path id="original_path" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"/>
    <path id="curve" d="M21.552,74.438c2.531-28.879,73.668-52.734,102.629-53.971
        c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.236-59.594-109.5-29.5c-23.367,27.833,55.4,142.969,55.4,142.969
        S18.109,113.708,21.552,74.438z"/>

    </defs>

  <use x="10" y="10" xlink:href="#curve" style="fill:#f00;stroke:black;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:10" filter="url(#dilate)"></use>    
  <use x="10" y="10"  xlink:href="#curve" style="fill:#5555FF;stroke:black;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:10"></use>
  <use x="10" y="10"  xlink:href="#curve" style="fill:#1CFF00;stroke:black;stroke-width:1;" filter="url(#erode)"></use>    



<g transform="translate(210,10)">
    <path fill="#FF0000" stroke="#231F20" d="M126.273,201.917c-1.188-0.766-29.407-19.044-57.679-42.532c-41.739-34.676-60.31-60.754-58.441-82.068
       ...