SVG Filters

index.html

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg">
  <filter id="reshape">
    <feGaussianBlur stdDeviation="30"/>
    <feComponentTransfer>
    <feFuncA type="linear" slope="30.0" intercept="-10"/>
    </feComponentTransfer>
  </filter>
  
  <g id="targetGroup" style="filter: url(#reshape);">
    
    <circle cx="25%" cy="25%" r="6%" fill="hsl(0, 38%, 50%)" />
    <circle cx="25%" cy="75%" r="6%" fill="hsl(90, 38%, 50%)" />
    <circle id="target" cx="75%" cy="25%" r="6%" fill="hsl(180, 38%, 50%)" />
<!--     <rect x="25%" y="35%" width="50%" height="30%" fill="hsl(250, 38%, 50%)" /> -->
  </g >
</svg>

script.js

const group = document.getElementById('targetGroup')

window.addEventListener('mousemove', e => {
  const x = e.offsetX;
  const y = e.offsetY;
  
  target.setAttribute('cx', x)
  target.setAttribute('cy', y)
  
  console.log(x)
});

let start, previousTimeStamp;

const n = 10;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // Math.min() is used here to make sure the element stops at exactly 200px
    const count = Math.min(0.1 * elapsed, 200);
    //element.style.transform = 'translateX(' + count + 'px)';
    
    
  }

  if (elapsed < 2000) { // Stop the animation after 2 seconds
    previousTimeStamp = timestamp
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

style.css

html,body{
  height:100%;
}

svg-filters.markdown

SVG Filters

A Pen by George Polevoy on CodePen.

License.