Pulse Animations

forked from cherdarchuk's block: 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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js