Math for scaling an object

by Richard Hunter

HTML

<svg height="40" width="40">
  <defs>
    <clipPath id="clock" clipPathUnits="objectBoundingBox">
      <path id="foo"/>
    </clipPath>
  </defs>
</svg>
<div class="container"><div id="foo"></div></div>

<input id="bleedInput" min="0" max="0.1" type="range" value="0" step="any"/>

CSS

.container {
  background: orange;
  display: inline-block;
  padding: 10px;
}

#foo {
  width: 200px;
  height: 200px;
  background: lightblue;
  clip-path: url(#clock);
}

JavaScript

function applyBleed(bleed) {

  function a(arr) {
    return arr.map(num => {
      return (num * ((bleed * 2) + 1)) - bleed;
    });
  }

  function b(arr) {
    return arr.map(num => {
      return (num * ((bleed * 2) + 1));
    });
  }

  const arr1 = a([0.75, 0.63]);
  const arr2 = b([-0.25, -0.41]);
  const arr3 = b([-0.17]);
  const arr4 = b([0.03]);
  const arr5 = b([0.01, 0.00, 0.03, -0.01, 0.03, -0.03]);
  const arr6 = b([-0.01, -0.03, -0.03, -0.03]);
  const arr7 = b([-0.25]);
  const arr8 = b([-0.01, 0.00, -0.03, 0.01, -0.03, 0.03]);
  const arr9 = b([0.01, 0.03, 0.03, 0.03]);
  const arr10 = b([0.03]);
  const arr11 = b([0.17]);
  const arr12 = b([-0.25, 0.41]);
  const arr13 = b([-0.06, 0.09, -0.01, 0.17, 0.10, 0.17]);
  const arr14 = b([0.50]);
  const arr15 = b([0.11, 0.00, 0.15, -0.08, 0.10, -0.17]);
  const arr16 = a([0.19, 0.50]);
  const arr17 = b([0.16, -0.27]);
  const arr18 = b([-0.18]);
  const arr19 = b([0.10]);
  const arr20 = b([0.18]);
  const arr21 = b([0.16, 0.27]);
  const arr22 = b([-0.42]);

  const path1 = arr1.join(','); //`0.75 0.63`;
  const path2 = arr2.join(','); //`-0.25 -0.41`;
  const path3 = arr3.join(','); //`-0.17`;
  const path4 = arr4.join(','); //`0.03`;
  const path5 = arr5.join(','); //`0.01 0.00 0.03 -0.01 0.03 -0.03`;
  const path6 = arr6.join(','); //`-0.01 -0.03 -0.03 -0.03`;
  const path7 = arr7.join(','); //`-0.25`;
  const path8 = arr8.join(','); // `-0.01 0.00 -0.03 0.01 -0.03 0.03`;
  const path9 = arr9.join(','); //`0.01 0.03 0.03 0.03`;
  const path10 = arr10.join(','); //`0.03`;
  const path11 = arr11.join(','); //`0.17`;
  const path12 = arr12.join(','); //`-0.25 0.41`;
  const path13 = arr13.join(','); //`-0.06 0.09 -0.01 0.17 0.10 0.17`;
  const path14 = arr14.join(','); //`0.50`;
  const path15 = arr15.join(','); //`0.11 0.00 0.15 -0.08 0.10 -0.17`;
  const path16 = arr16.join(',') //`0.19 0.50`;
  const path17 = arr17.join(','); //`0.16 -0.27`;
  const path18 = arr18.join(','); //`-0.18`;
  const...