Skip to content

Instantly share code, notes, and snippets.

@IsaKiko

IsaKiko/.block

Created August 31, 2017 13:37
Show Gist options
  • Save IsaKiko/5db6fefa087dcdd4abc895d9ca0a9f20 to your computer and use it in GitHub Desktop.
Save IsaKiko/5db6fefa087dcdd4abc895d9ca0a9f20 to your computer and use it in GitHub Desktop.
Download ZIP
Rorschach effect and morphing using filter elements
Raw
.block
license: mit
Raw
index.html
<!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="http://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 max = 100;
var min = 0;
var dataheart =[]
var datarand =[]
for (var i = 0; i < datain[0].x.length; ++i){
dataheart[i]={
x: datain[0].x[i],
y: 100-datain[0].y[i],
key: i
}
datarand[i]={
x: Math.random() * (max - min) + min,
y: Math.random() * (max - min) + min,
key: i
}
}
data = datarand.map(function(d) {return d})
// 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)
var toggle = 0
function dataswap(){
if (toggle == 0){
data = dataheart.map(function(d) {return d});
toggle = 1;
color = '#C52A42'
update();
}
else {
for (var i = 0; i < datain[0].x.length; ++i){
data[i]={
x: Math.random() * (max - min) + min,
y: Math.random() * (max - min) + min,
key: i
}
}
toggle = 0;
color='black'
update();
}
}
}
heart('#canvas')
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment