SVG clip path bleed

by Richard Hunter

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="0" height="0">
  <clipPath id="blah" clipPathUnits="objectBoundingBox">
    <path id="path" fill="red" d="" />
  </clipPath>
</svg>

<div class="container">
  <div id="bar">

  </div>
</div>

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

CSS

#bar {
  width: 200px;
  height: 200px;
  background: blue;
  clip-path: url(#blah);
}

#svg {

}

.container {
  background: crimson;
  display: inline-block;
}

JavaScript

function applyBleed(bleed) {
  const arr = [0.5, 0, 1, 0.5, 0.5, 1, 0, 0.5];
  const path = arr.map(num => {
    return (num * ((bleed * 2) + 1)) - bleed;
  }).join(' ');
  const pathEl = document.getElementById('path');
  pathEl.setAttribute('d', `M${path}Z`);
}

bleedInput.addEventListener('input', (event) => {
  applyBleed(event.target.value)
})

applyBleed(bleedInput.value);