Радиальный градиент фона

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgba(0,0,0,1);">
  <div class='halftone' height='100px'></div>
  <div class='halftone2' height='100px'></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
  }
  div {
    height: 100%;
    background-color: 0;
  }
  .halftone {
    /*
      size progressively decreasing 
    */
    background-image: radial-gradient(circle, dodgerblue 85%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 20%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em 1em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone2 {
    /*
      size progressively increasing 
    */
    background-image: radial-gradient(circle, dodgerblue 20%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 85%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em .8em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone {
    animation: rt 4s infinite;
    animation-direction: alternate;
  }
  .halftone2 {
    animation: rt2 4s infinite;
    animation-direction: alternate;
  }
  @keyframes rt {
    0% {
      opacity: 0;
      transform: rotateY(0deg);
    }
    25% {
      opacity: 1
    }
    50% {
      opacity: 0;
      transform: rotateY(180deg);
    }
    75% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: rotateY(360deg);
    }
  }
  @keyframes rt2 {
    0% {
      opacity: 1;
      transform: rotateY(0deg) translateY(-405px);
    }
    25% {
      opacity: 0
    }
    50% {
      opacity: 1;
      transform: rotateY(180deg) translateY(-405px);
    }
    75% {
      opacity: 0
    }
    100% {
      opacity: 1;
      transform: rotateY(360deg) translateY(-405px);
    }
  }
</style>