Skip to content

Instantly share code, notes, and snippets.

@cherdarchuk
Last active June 4, 2016 16:05
Show Gist options
  • Save cherdarchuk/822ba3ead00a0ffdbcfd4a144e763e31 to your computer and use it in GitHub Desktop.
Save cherdarchuk/822ba3ead00a0ffdbcfd4a144e763e31 to your computer and use it in GitHub Desktop.
Pulse Animations
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background-color:black }
svg { width:100%; height: 100% }
@-webkit-keyframes pulse
{
0% {-webkit-transform: scale(1.0); opacity: 1;}
100% {-webkit-transform: scale(2); opacity: 0;}
}
.pulse
{
/* Giving Animation Function */
-webkit-animation: pulse 2s linear infinite;
}
.blur {
-webkit-filter: blur(10px);
}
.shadow {
-webkit-filter: drop-shadow( 0px 0px 5px white );
filter: drop-shadow( 0px 0px 5px #000 ); /* Same syntax as box-shadow */
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
var node1 = d3.select("body").append("div")
.style("top","0px")
.style("left","20px")
.style("position","absolute")
.append("div").attr("draggable", true).style("overflow",'visible')
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"})
.style("overflow",'visible');
node1.append("defs").append("filter")
.attr("id",'blurred')
.attr({"x":"-50%", "y":"-50%", "width":"200%", "height":"200%"})
.append("feGaussianBlur").attr("stdDeviation", 12);
node1.append("circle")
.attr('r',30)
.style({'stroke': null, 'fill': '#49c3b1', 'opacity':'.8'})
.attr('filter', 'url(#blurred)')
node1.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'});
var node2 = d3.select("body").append("div").classed("node", true)
.style("top","100px")
.style("left","120px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"}).style("overflow",'visible');
node2.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'})
node2.append("circle").classed("pulse",true)
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': null});
var node3 = d3.select("body").append("div").classed("node", true)
.style("top","100px")
.style("left","20px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node3.append("circle")
.attr('r',15).classed("pulse",true)
.style({'stroke': '#49c3b1', 'stroke-width': 8, 'fill': null})
node3.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'});
var node4 = d3.select("body").append("div").classed("node", true)
.style("top","0px")
.style("left","120px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node4.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 8, 'fill': null})
.node().animate([
{ transform: 'scale(1)', opacity: 1},
{ transform: 'scale(1.5)', opacity: .5 }
], {
duration: 2000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'alternate', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node4.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'})
.classed("shadow",true);
var node5 = d3.select("body").append("div").classed("node", true)
.style("top","100px")
.style("left","220px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node5.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([
{ r: 15, opacity: 1},
{ r:35, opacity: 0 }
], {
duration: 2000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node5.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'})
.classed("shadow",true);
var node6 = d3.select("body").append("div").classed("node", true)
.style("top","0px")
.style("left","220px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 0, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 500, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 1000, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([
{ r: 15, opacity: 1},
{ r:45, opacity: 0 }
], {
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 1500, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 2000, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 2500, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 3000, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([
{ r: 15, opacity: 1},
{ r:45, opacity: 0 }
], {
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 3500, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node6.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': 'white'})
////////////////////////////
var node7 = d3.select("body").append("div").classed("node", true)
.style("top","0px")
.style("left","420px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node7.append("circle")
.attr('cx',15)
.attr('cy',15)
.attr('r',3)
.style({'stroke': '#ffffff', 'stroke-width': 2, 'fill': '#49c3b1'})
.node().animate([
{ transform: 'rotate(359deg)'},
{ transform: 'rotate(0deg)'}
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node7.append("circle")
.attr('cx',-15)
.attr('cy',15)
.attr('r',3)
.style({'stroke': '#ffffff', 'stroke-width': 2, 'fill': '#49c3b1'})
.node().animate([
{ transform: 'rotate(359deg)'},
{ transform: 'rotate(0deg)'}
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node7.append("circle")
.attr('cx',-15)
.attr('cy',-15)
.attr('r',3)
.style({'stroke': '#ffffff', 'stroke-width': 2, 'fill': '#49c3b1'})
.node().animate([
{ transform: 'rotate(359deg)'},
{ transform: 'rotate(0deg)'}
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node7.append("circle")
.attr('cx',15)
.attr('cy',-15)
.attr('r',3)
.style({'stroke': '#ffffff', 'stroke-width': 2, 'fill': '#49c3b1'})
.node().animate([
{ transform: 'rotate(359deg)'},
{ transform: 'rotate(0deg)'}
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node7.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'})
.classed("shadow",true);
var node8 = d3.select("body").append("div")
.style("top","200px")
.style("left","20px")
.style("position","absolute")
.append("div").attr("draggable", true).style("overflow",'visible')
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"})
.style("overflow",'visible');
node8.append("defs").append("filter").attr("id",'blurred')
.append("feGaussianBlur").attr("stdDeviation", 7);
node8.append("circle")
.attr('r',25)
.style({'stroke': null, 'fill': '#fff'})
.attr('filter', 'url(#blurred)')
.node().animate([
{ r: 15, opacity: 1},
{ r:45, opacity: 0 }
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node8.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'});
var node9 = d3.select("body").append("div")
.style("top","200px")
.style("left","120px")
.style("position","absolute")
.append("div").attr("draggable", true).style("overflow",'visible')
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"})
.style("overflow",'visible');
node9.append("defs").append("filter").attr("id",'blurred')
.append("feGaussianBlur").attr("stdDeviation", 7);
node9.append("circle")
.attr('r',25)
.style({'stroke': null, 'fill': '#fff'})
.attr('filter', 'url(#blurred)')
.node().animate([
{ r: 15, opacity: 1},
{ r:25, opacity: 1 },
{ r:15, opacity: 1 }
], {
duration: 4000, //milliseconds
easing: 'linear', //'linear', a bezier curve, etc.
delay: 10, //milliseconds
iterations: Infinity, //or a number
direction: 'normal', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node9.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': '#fff'});
// vibrating
var node10 = d3.select("body").append("div").classed("node", true)
.style("top","200px")
.style("left","220px")
.style("position","absolute")
.append("div").attr("draggable", true)
.append("svg").style({"height": "0px", "width": "0px", "padding": "50px"});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 3500, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 3000, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 2500, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([
{ r: 15, opacity: 1},
{ r:45, opacity: 0 }
], {
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 2000, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 1500, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 1000, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([{ r: 15, opacity: 1},{ r:45, opacity: 0 }],
{
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 500, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.style({'stroke': '#49c3b1', 'stroke-width': 2, 'fill': null, 'fill-opacity': 0})
.node().animate([
{ r: 15, opacity: 1},
{ r:45, opacity: 0 }
], {
duration: 4000, //milliseconds
easing: 'ease-in-out', //'linear', a bezier curve, etc.
delay: 0, //milliseconds
iterations: Infinity, //or a number
direction: 'reverse', //'normal', 'reverse', etc.
fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});
node10.append("circle")
.attr('r',15)
.style({'stroke': '#49c3b1', 'stroke-width': 5, 'fill': 'white'})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment