Built with blockbuilder.org
forked from cherdarchuk's block: Pulse Animations
Last active
June 4, 2016 16:05
-
-
Save cherdarchuk/822ba3ead00a0ffdbcfd4a144e763e31 to your computer and use it in GitHub Desktop.
Pulse Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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