Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 500px"></div>

CSS

body {
  background-color: black;
}
#circle-1 {
  display: block;
  width: 40px;
  height: 40px;
  
  border-radius: 40px;
  opacity: 0;
  animation-name: scale;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes scale {
  0% {
    transform: scale(0.1);
    opacity: 0;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(0.5);
    opacity: 1;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}

JavaScript

var renderer;
$(function () {
    renderer = new Highcharts.Renderer(
        $('#container')[0],
        400,
        300
    );
    drawCircle();
});
function drawCircle(){
	renderer.circle(200, 150, 20).attr({
  			id:'circle-1',
        fill: '#FCFFC5',
        stroke: 'black',
        'stroke-width': 1
    }).add();
}