Skip to content

Instantly share code, notes, and snippets.

@tigercosmos
Last active April 3, 2018 05:00
Show Gist options
  • Save tigercosmos/c5dfde1d3b22434fe9c696de79fc180a to your computer and use it in GitHub Desktop.
Save tigercosmos/c5dfde1d3b22434fe9c696de79fc180a to your computer and use it in GitHub Desktop.
Bubble Effects
<!DOCTYPE html>
<html>
<head>
<title>Bubbles</title>
<style>
#A1 {
margin: 0;
background: #0f0f0f;
max-width: 600px;
}
#A2 {
margin: 0;
background: #1c1c1c;
max-width: 600px;
}
#A3 {
margin: 0;
background: #292929;
max-width: 600px;
}
rect {
fill: none;
pointer-events: all;
}
circle {
fill: none;
stroke-width: 2.5px;
}
path{
stroke-width: 2.5px;
fill: none;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="A1"></div>
<div id="A2"></div>
<div id="A3"></div>
<script>
$(document).ready(function(){
var width = 600,
height = 200;
var i = 0;
var svg = d3.select("#A1").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);
function particle() {
var m = d3.mouse(this);
svg.insert("circle", "rect")
.attr("cx", m[0])
.attr("cy", m[1])
.attr("r", 1e-6)
.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
.style("stroke-opacity", 1)
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("r", 100)
.style("stroke-opacity", 1e-6)
.remove();
d3.event.preventDefault();
}
});
$(document).ready(function(){
var width = 600,
height = 200;
var i = 0;
var svg = d3.select("#A2").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);
function particle() {
var m = d3.mouse(this);
var line = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y;})
.interpolate('linear-closed');
var data1 = [
{x:m[0],y:m[1]+1e-6},
{x:m[0]-(1e-6)*1.73,y:m[1]+(1e-6)*0.5},
{x:m[0]+(1e-6)*1.73,y:m[1]+(1e-6)*0.5}
];
var data2 = [
{x:m[0],y:m[1]+150},
{x:m[0]-130,y:m[1]-75},
{x:m[0]+130,y:m[1]-75}
];
svg.insert("path", "rect")
.attr("d", line(data1))
.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
.style("stroke-opacity", 1)
.transition()
.duration(2000)
.attrTween("transform", function() { return d3.interpolateString('rotate('+ 0 +','+m[0]+','+m[1]+')', 'rotate('+ 90 +','+m[0]+','+m[1]+')'); })
.ease(Math.sqrt)
.attr('d', line(data2))
.style("stroke-opacity", 1e-6)
.remove();
d3.event.preventDefault();
}
});
$(document).ready(function(){
var width = 600,
height = 200;
var i = 0;
var svg = d3.select("#A3").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);
function particle() {
var m = d3.mouse(this);
var line = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y;})
.interpolate('linear');
var x, y;
var data1 = [];
var data2 = [];
for (var j = 0; j < 350; j++) {
t = j*0.1;
x = 16 * Math.pow(Math.sin(t),3);
y = 13 * Math.cos(t) - 5* Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)
data1.push({'x': m[0]+ x/10000, 'y': m[1]+y/10000 });
data2.push({'x': m[0]+ x*7, 'y': m[1]+y*7 });
}
svg.insert("path", "rect")
.attr("d", line(data1))
.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
.style("stroke-opacity", 1)
.transition()
.duration(3000)
.attrTween("transform", function() { return d3.interpolateString('rotate(160,'+m[0]+','+m[1]+')', 'rotate(180,'+m[0]+','+m[1]+')'); })
.ease(Math.sqrt)
.attr('d', line(data2))
.style("stroke-opacity", 1e-6)
.remove();
d3.event.preventDefault();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment