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: translate(180px, 135px) scale(0.1);
    opacity: 0;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: translate(100px, 75px) scale(0.5);
    opacity: 1;
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0;
    box-shadow: 0px 10px 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, 40).attr({
    id: 'circle-1',
    fill: {
      radialGradient: {
        cx: 0.5,
        cy: 0.5,
        r: 0.5
      },
      stops: [
        [0, 'none'],
        [0.5, 'rgba(0,0,0,0)'],
        [0.5, 'rgba(255,255,255,0.5)'],
        [1, 'rgba(0,0,0,0)']
      ]
    },
    stroke: 'black',
    'stroke-width': 1
  }).add();

}