Rorschach effect and morphing using filter elements

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<div>
  <div style='margin-left:85%; width: 15%'>
    <button id='button' style="padding:20px; background-color:#C52A42; color:rgb(240,240,230); border:none; margin:0 auto; font-weight:bold; width:100%; font-size:1.5rem"> click me 
    </button>
  </div>
  <div>
    <div style='filter:url(#goo)'>
      <svg  id='canvas' width='100%' height='300px' viewBox="0 0 100 100">
      </svg>
  </div>

<div width="100%" id='text' style='color:#C52A42; border:none; padding:30px; margin:0 auto; font-weight:bold; font-size:1.5rem; text-align:center'>Happy happy happy</div>
    <svg xmlns="https://www.w3.org/2000/svg" version="1.1" width='0px'>
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"/>
          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" /> 
        </filter>
      </defs>
    </svg>
  </div>
</div>

<body>
  <script>
function heart(el)
{
	datain = [{"x":[23.450855352939705,12.126068702110878,32.63889019305889,14.262820512820513,30.288461538461537,42.89530044946915,50.16025641025641,61.69871794871795,50.37393031976162,47.59615384615385,72.59615384615384,53.36538461538461,62.12606968023838,81.78419064252805,64.04914269080528,37.980769230769226,25.16025641025641,15.33119592911158,17.895298493214142,29.220086122170475,38.19444314027444,49.519230769230774,44.17735173152043,33.920941475110176,20.2457271478115,2.51068359766251,14.903846153846153,6.143162556183643,59.98931493514623,59.98931493514623,39.90384615384615,52.72435897435898,71.10042474208734,70.88675474509215,73.87820512820514,82.8525641025641,96.52778038611778,83.70726756560497,71.10042474208734,58.920941475110176,82.42521628355368,94.60470346304086,90.97221961388222,42.040596986428284,83.06624192457933,32.8525641025641,26.869657467573116,45.24572519155649,8.707264631222456,4.006410256410256,2.51068359766251,8.920940496982672,12.339743589743591,22.809829711914062,33.06623801206931,36.91239185822316,44.17735173152043,54.64743589743589,60.416666666666664,75.58760422926683,88.62179487179486,96.74145038311298,96.31410256410257,87.98076923076923,77.51068115234375,65.33119397285657,55.28846153846154,50.37393031976162,43.32264826847957,38.83546878130008,28.365384615384613,21.955128205128204,65.97221961388222,74.30555294721555,63.19444314027444,70.03205128205127,79.86111371945113,88.40811704977965,76.22862987029247,64.04914269080528,64.04914269080528,68.32265218098958,56.356838911007614,51.86965942382813,48.66453121869992,45.032051282051285,36.91239185822316,24.091880993965344,18.963675865760216,9.134615384615383,27.083333333333332,14.049145625187801,21.955128205128204,33.06623801206931,40.331197885366585,43.108974358974365,35.41666666666667,52.51068506485377],"y":[91.57372995506984,81.9083021168184,76.20817876340206,66.54274865618562,47.707557458390276,24.163569595628577,4.089219470029451,23.172240638213566,17.719944986220973,47.45972748800151,47.45972748800151,33.33332841724251,72.49070424895574,63.07311091902306,61.58612202083052,65.55142423670061,62.3296164699268,52.168524152967855,39.28128854794261,27.385372824472405,38.042129620138844,62.08178196160805,82.40396432656092,94.79553885632616,76.70384097314457,74.47335762585577,93.80421330235863,59.10780416522299,86.61710105074974,39.529118518331366,54.89467197896415,76.20817876340206,95.53903330542242,82.65179656591467,64.31226530889683,91.57372995506984,73.97769541611326,41.0161074165239,27.633207332791148,51.17719973348284,73.234198698052,57.3729852966417,85.87360660165348,16.728625104665937,52.168524152967855,87.11276326049226,37.79429964975009,73.234198698052,89.0954143684273,81.9083021168184,65.55142423670061,51.67285967426035,45.22924414071272,33.33332841724251,22.180911680798555,17.719944986220973,8.550186164607036,9.045846105384554,15.24163620647341,31.598514086591212,47.211892979682766,63.56877085980057,80.66914545797964,91.82156219442359,96.28252775451868,93.80421330235863,85.13011215255723,80.9169754283684,87.11276326049226,91.32589771571608,96.28252775451868,95.78686554477616,21.685251740021037,87.360595499846,81.4126399070759,71.49937982947073,81.16480766772214,70.01239093127819,40.52044293781639,33.828997433880005,46.468398530586505,55.88599639844918,70.50805540998569,53.15984857245289,70.01239093127819,64.80792978760435,81.16480766772214,82.65179656591467,85.13011215255723,72.24287427856699,71.0037153507632,60.099133122638,47.211892979682766,59.35563867354173,45.22924414071272,37.54646514143134,29.368030739302426,26.146218434598623],"trace":0}]

// var canvas = d3.select("#canvas");
	var canvas = d3.select(el)

var color = 'black';

var message = d3.select("#text");
	message.style('visibility', 'hidden')

update()

function update(){
		var circ = canvas.selectAll(".circle")
			.data(data, function(d){return d.key});

circ.enter().append("circle").attr("class","circle")
			.attr('cx', function(d){ return d.x})
			.attr('cy', function(d) {return d.y})
			.attr('r', function(d) {return 5})
			.attr('fill', color)
			// .on("mouseover", function(){console.log("HAPPY VALENTINE'S DAY <3")})
			.on("mouseover", function(){
				if(toggle == 1) {message.style('visibility', 'visible')}
			})
			// .on("mouseout", function(){message.style('visibility', 'hidden')})

circ.transition().ease(d3.easeCubicInOut).duration(1000)
			.attr('cx', function(d){ return d.x})
			.attr('cy', function(d) {return d.y})
			.attr('r', function(d) {return 5})
			.attr('fill', color)
		}

var button = document.getElementById('button')
	button.addEventListener('click', dataswap)

heart('#canvas')

</script>
</body>

https://d3js.org/d3.v4.min.js