-var x = ["322", "307", "292", "277", "262", "247", "232", "217", "202", "187", "172", "157", "142", "127", "112", "97", "82", "67", "52", "37", "22", "7", "652", "637", "622", "607", "592", "577", "562", "532", "547", "517", "487", "472", "457", "442", "427", "412", "397", "382", "367", "352", "337", "982", "967", "952", "937", "922", "907", "892", "877", "862", "847", "832", "817", "802", "787", "772", "757", "742", "727", "712", "697", "682", "667", "1222", "1207", "1192", "1177", "1162", "1147", "1132", "1117", "1102", "1087", "1072", "1057", "1042", "1027", "1012", "997"];
-var y = [[654,639,624,609,594,579,564,549,534,519,504,489,474,459,444,429,414,399,354,294,279,264,249,234,219,204,189,174,159,144,129,114,99,69,54,39],[519,504,489,474,459,444,429,414,399,354,294,279,264,249,234,219,129,114,99,84,69,54,39],[474,459,444,429,414,399,384,369,339,324,309,294,279,264,249,234,219,129,114,99,84,69,54,39],[444,429,384,369,309,294,279,264,249,234,219,144,129,114,99,84,69,54],[369,354,309,294,279,264,249,234,219,204,144,129,114,99,84,69,54],[369,354,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,69,54],[354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,99,84],[354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114],[339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[219,204,189,174,159,144,129,114,99],[204,189,174,159,144,129,114],[189,174,159,144,129],[174,159,144,129],[174,159,144,129],[174,159,144,129,114],[189,174,159,144,129,114],[189,174,159,144,129,114],[189,174,159,144,129,114],[204,174,159,144,129],[519,504,489,474,459,444,429,414,399,384,369,354,339,324,309,294,264,204,189,174,159,144,129,114,534],[519,534,504,489,474,459,444,429,414,399,384,369,354,339,324,309,294,249,234,219,204,189,174,159,144,129],[504,489,474,459,444,429,414,399,384,369,354,339,324,309,294,234,219,204,189,174],[474,459,444,429,414,399,384,369,354,339,324,309,294,234,219,204,189,159,144],[459,429,414,399,384,369,354,339,324,309,294,219,204,189,159,144,129,114],[384,369,354,339,324,309,294,279,234,219,204,189,174,159,144,129,114],[369,354,339,324,309,294,279,249,234,219,204,189],[369,354,339,324,309,294,279,264,249,174,159,144],[369,354,339,324,309,294,279,264,249,234,174,159,144,129],[354,339,324,309,294,174,159],[114],[129,114,99,84,69,54],[114,99,84,69,54,39],[459,129,114,99,84,69,54,39,24],[504,489,474,459,159,144,129,114,99,84,69,54,39,24,9],[519,504,489,474,459,444,159,144,129,114,99,84,69,54,39,24,9],[549,534,519,504,489,474,459,444,144,129,114,99,84,69,54,39,24],[549,534,519,504,489,474,459,444,429,234,219,114,99,84,69,54,39,24],[579,564,549,534,519,504,489,474,459,444,429,234,219,204,189,144,54,39,24],[579,564,549,534,519,504,489,474,459,444,429,414,234,219,204,189,174,159,144,129,114,54,39,594],[639,624,609,594,579,564,549,534,519,504,489,474,459,444,429,414,399,234,219,204,189,174,159,144,129,114,54,39],[459,444,429,414,384,369,354,339,279,264,249,234,219,204,189,174,159,144,129,114,99,84],[459,444,429,414,384,369,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[429,414,384,354,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[414,354,339,324,309,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[384,369,354,339,324,309,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[384,369,354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[369,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[369,354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84,69],[339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84],[324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84],[309,294,279,264,249,234,219,204,189,174,159,144,129,114,99],[309,294,279,264,249,234,219,204,189,174,159,144,129,114,69,54],[324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,69,54],[339,324,309,294,279,264,219,204,189,174,159,144,129,114,99,84,69,54],[354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99,84],[489,474,459,384,369,354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114,99],[489,414,399,384,369,354,339,324,309,294,279,264,249,234,219,204,189,174,159,144,129,114],[444,429,414,399,384,369,354,339,324,309,294,249,234,219,204,189,174,159,144,129,114],[519,504,489,474,459,444,429,414,399,384,369,354,339,324,309,294,264,249,204,189,174,159,144,129,114],[564],[579,564,549],[594,579,144,129,114,99,84],[504,489,144,129,114,99,84],[489,144,129,114,99],[144,129,114,99],[549,534,519,489,159,144,129,114,99],[564,549,534,519,489,459,189,174,159,129,114,99],[549,534,519,504,489,474,459,144,129,114,99],[534,519,504,489,474,444,144,129,114,99,549],[534,519,504,489,444,144,129,114,99,549],[534,519,504,489,474,444,219,144,129,114,99,84,549],[534,519,504,489,264,249,234,219,204,189,174,159,144,129,114,99,84,549],[534,519,504,489,429,414,279,264,219,204,189,174,159,144,129,114,99,84,549],[534,519,504,429,414,279,219,204,189,174,159,144,129,114,99,84,549],[534,549,519,429,414,369,249,234,219,204,189,174,159,144,129,114,99,84]];
section
  .b-header
    svg(xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", version="1.1", x="0px", y="0px", viewBox="0 0 1229 662", enable-background="new 0 0 1229 662", xml:space="preserve", class="b-header__map")
      - for (var i = 0; i < x.length; i++)
        - for (var j = 0; j < y[i].length; j++)
          circle(cx = x[i], cy = y[i][j], r = "6")
View Compiled 
@import "nib"

html
body
  height 100vh
  width 100vw
  padding 0
  margin 0
section
  width 100%
  height 100%
  background-image linear-gradient(-135deg,#203B4B 30%,#1F703D 70%)
  text-align center
  & .b-header
    background-image linear-gradient(-135deg,#2ecc71 30%,#3498db 70%)
    position relative
    height 100%
    width 100%
    &__map
      position absolute
      margin auto
      top 0
      right 0
      bottom 0
      left 0
      height 100%
      width 100%
      & circle
        fill rgba(255, 255, 255, 0.15) !important
        stroke none !important
        &.active
          stroke #fff !important
          stroke-opacity .9
          stroke-width 1px
          fill #fff !important
          fill-opacity .75
          animation pulse 3s ease infinite
        &.active-first
          stroke #fff !important
          stroke-opacity .9
          fill #fff !important
          fill-opacity .4
          animation pulse-first 3s ease infinite
        &.active-second
          stroke #fff !important
          stroke-opacity .9
          fill #fff !important
          fill-opacity .3
          animation pulse-second 3s ease infinite
        &.active-third
          stroke #fff !important
          stroke-opacity .9
          fill #fff !important
          fill-opacity .25
          animation pulse-third 3s ease infinite
@keyframes pulse
  0%
    opacity 0
  25%
    opacity .5
  50%
    opacity .9
  75%
    opacity .5
  100%
    opacity 0
@keyframes pulse-first
  0%
    opacity 0
    stroke-width 0px
  25%
    opacity .1
  50%
    stroke-width 12px
    opacity .2
  75%
    opacity .1
  100%
    stroke-width 0px
    opacity 0
@keyframes pulse-second
  0%
    opacity 0
    stroke-width 0px
  25%
    opacity .1
  50%
    stroke-width 16px
    opacity .2
  75%
    opacity .1
  100%
    stroke-width 0px
    opacity 0
@keyframes pulse-third
  0%
    opacity 0
    stroke-width 0px
  25%
    opacity .2
  50%
    stroke-width 20px
    opacity .4
  75%
    opacity .2
  100%
    stroke-width 0px
    opacity 0
View Compiled 
window.onload = function() {
    var mapLength = document.getElementsByTagName('circle').length - 1;
    var currentCircle = "";
    var previousCircle = "";

    function rnd(a, z) {
        return Math.floor(Math.random() * (z - a) + a);
    }


    var randomCircle = rnd(0, mapLength);
    currentCircle = randomCircle;
    var a = document.getElementsByTagName('circle')[currentCircle];
    previousCircle = currentCircle;

    var circleCloneFirst = a.cloneNode(true);
    var circleCloneSecond = a.cloneNode(true);
    var circleCloneThird = a.cloneNode(true);
    a.classList.add("active");
    circleCloneFirst.classList.add("active-first");
    circleCloneSecond.classList.add("active-second");
    circleCloneThird.classList.add("active-third");
    circleCloneFirst.classList.remove("active");
    circleCloneSecond.classList.remove("active");
    circleCloneThird.classList.remove("active");
    circleCloneFirst.setAttribute('r', 10);
    circleCloneSecond.setAttribute('r', 14);
    circleCloneThird.setAttribute('r', 18);
    document.getElementsByClassName('b-header__map')[0].appendChild(circleCloneFirst);
    document.getElementsByClassName('b-header__map')[0].appendChild(circleCloneSecond);
    document.getElementsByClassName('b-header__map')[0].appendChild(circleCloneThird);


    (function(){

        if (previousCircle!="") {
            document.getElementsByTagName('circle')[previousCircle].classList.remove("active");
        }
        var randomCircle = rnd(0, mapLength);
        currentCircle = randomCircle;
        var a = document.getElementsByTagName('circle')[currentCircle];
        a.classList.add("active");

        circleCloneFirst.setAttribute('cx', a.getAttribute('cx'));
        circleCloneSecond.setAttribute('cx', a.getAttribute('cx'));
        circleCloneThird.setAttribute('cx', a.getAttribute('cx'));
        circleCloneFirst.setAttribute('cy', a.getAttribute('cy'));
        circleCloneSecond.setAttribute('cy', a.getAttribute('cy'));
        circleCloneThird.setAttribute('cy', a.getAttribute('cy'));

        previousCircle = currentCircle;
        setTimeout(arguments.callee, 3000);
    })();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.