title: Scale SVG while keeping some points fixed
body: <p>I want to display an svg shape on an html page where certain points should have a fixed position.</p>
  <p>In the images below, the red circles represent points that should keep their exact position. Beyond the green points, on the left and right side, is where points are not fixed and can scale. How could this be achieved?</p>
  <p>I tried various forms of scaling, as well as experimenting with the viewbox and preserveAspectRatio attributes, but none have had the desired effect.</p>
  <p><a href="https://i.stack.imgur.com/PMUVC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMUVC.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/4Cl3V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Cl3V.png" alt="enter image description here" /></a></p>
  <h3>EDIT</h3>
  <p>here is the svg definition. I'm not sure the order of the points, but the top left is <code>13,-12</code>. I tried changing these to percentages, but doing so in my svg editor, inkscape, deletes the point and several others around it.</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot; fill=&quot;none&quot;&gt;
    &lt;path d=&quot;m 32.043776,21.922259 c -4.3888,32.42227 33.58333,44.38479 62.94249,61.98573 64.330284,22.939391 72.648644,69.263531 22.383804,131.433121 -25.509995,25.04202 -103.692494,7.65258 -127.798134,-15.30517 -20.8697,-57.14796 -21.34432,-171.108891 -20.66205,-174.861331 8.03521,-44.19367 13,-12 47.82864,-18.5575098 8.45282,0 15.30525,6.8523498 15.30525,15.3051598 z&quot; fill=&quot;#f9fdfd&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>