JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<canvas id="stage"></canvas>

<svg width="0" height="0" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- <image xlink:href="https://i.imgur.com/ZCgLs6k.png" x="0" y="0" width="1348" height="601" filter="url(#ink)" /> -->
  
  <filter id="ink">
    <feGaussianBlur id="filter-blur" in="SourceGraphic" stdDeviation="100" result="blur" />
    <feColorMatrix id="filter-matrix" in="blur" mode="matrix" values="
      1 0 0 0 0
      0 1 0 0 0
      0 0 1 0 0
      0 0 0 18 -7"/>
  </filter>
</svg>

Babel + JSX

/**
 * Ink in demo
 */

Math.linearTween = function(t, b, c, d){
  return c*t/d + b;
};

Math.easeIn = function(t, b, c, d){
  t /= d;
  return c*t*t*t + b;
};

Math.easeOut = function(t, b, c, d){
  t /= d;
  t--;
  return c*(t*t*t + 1) + b;
};

Math.easeInOut = function(t, b, c, d){
  t /= d/2;
  if (t < 1){
    return c/2*t*t*t + b;
  }
  t -= 2;
  return c/2*(t*t*t + 2) + b;
};

let img_src = 'https://i.imgur.com/ZCgLs6k.png';
let img_size = [1348, 601];

let canvas = document.getElementById('stage');
canvas.width = window.innerWidth;
canvas.height = window.innerWidth * (img_size[1] / img_size[0]);

let ctx = canvas.getContext('2d');

let img = new Image();
img.onload = function(){
	ink_update();
};
img.crossOrigin = '';
img.src = img_src;
function render(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.filter = 'url(#ink)';
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

let ink_val = [80, 0];
let matrix_val1 = [25, 1];
let matrix_val2 = [-5, 0];
let duration = 1500;
let blur_filter = document.getElementById('filter-blur');
let matrix_filter = document.getElementById('filter-matrix');
let start = new Date().getTime();
let ink_update = function(){
	
  let current = new Date().getTime() - start;
  let u_ink = Math.easeOut(current, ink_val[0], ink_val[1] - ink_val[0], duration);
  let u_matrix1 = Math.easeOut(current, matrix_val1[0], matrix_val1[1] - matrix_val1[0], duration);
  let u_matrix2 = Math.easeOut(current, matrix_val2[0], matrix_val2[1] - matrix_val2[0], duration);
  //let u_matrix1 = matrix_val1[0];
  //let u_matrix2 = matrix_val2[0];
      
  if(current >= duration){
    blur_filter.setAttribute('stdDeviation', 0);
    matrix_filter.setAttribute('values', `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0`);
    render();
  	return true;
  }
  
  blur_filter.setAttribute('stdDeviation', u_ink);
  matrix_filter.setAttribute('values', `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${u_matrix1} ${u_matrix2}`);
  render();
  
 ...