SOURCE

<div class="shield"></div>
<div class="outer"></div>
<div class="inner"></div>
<div class="centre"></div>
<div class="star"></div>

html, body {
  width: 100%;
  height: 100%;
  background: radial-gradient(white, #ddd);
}

@-webkit-keyframes scaleShield {
  to {
    width: 500px;
    height: 500px;
  }
}

@keyframes scaleShield {
  to {
    width: 500px;
    height: 500px;
  }
}
@-webkit-keyframes scaleOuter {
  to {
    width: 400px;
    height: 400px;
  }
}
@keyframes scaleOuter {
  to {
    width: 400px;
    height: 400px;
  }
}
@-webkit-keyframes scaleInner {
  to {
    width: 300px;
    height: 300px;
  }
}
@keyframes scaleInner {
  to {
    width: 300px;
    height: 300px;
  }
}
.shield {
  width: 0;
  height: 0;
  border-radius: 50%;
  z-index: 0;
  -webkit-animation: scaleShield .25s .1s forwards ease;
          animation: scaleShield .25s .1s forwards ease;
  -webkit-filter: sepia(40%) hue-rotate(160deg) invert(100%) brightness(130%) saturate(450%);
          filter: sepia(40%) hue-rotate(160deg) invert(100%) brightness(130%) saturate(450%);
}

.outer {
  width: 0;
  height: 0;
  z-index: 1;
  -webkit-animation: scaleOuter .25s .05s forwards ease;
          animation: scaleOuter .25s .05s forwards ease;
  -webkit-filter: invert(1) brightness(300%);
          filter: invert(1) brightness(300%);
}

.inner {
  width: 0;
  height: 0;
  z-index: 2;
  -webkit-animation: scaleInner .25s forwards ease;
          animation: scaleInner .25s forwards ease;
  -webkit-filter: sepia(40%) hue-rotate(160deg) invert(100%) brightness(130%) saturate(450%);
          filter: sepia(40%) hue-rotate(160deg) invert(100%) brightness(130%) saturate(450%);
}

.centre {
  width: 190px;
  height: 190px;
  z-index: 3;
  -webkit-filter: sepia(40%) hue-rotate(10deg) invert(100%) brightness(130%) saturate(450%);
          filter: sepia(40%) hue-rotate(10deg) invert(100%) brightness(130%) saturate(450%);
}

.star {
  width: 190px;
  height: 190px;
  z-index: 4;
  -webkit-filter: invert(1) brightness(450%);
          filter: invert(1) brightness(450%);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.shield,
.outer,
.inner,
.star,
.centre {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);
          transform: translateX(-50%) translateY(-50%) scale(0.6);
  border-radius: 50%;
  background-image: -webkit-radial-gradient(50% 0%, 8% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(50% 100%, 12% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 7%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 5%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0.1) 3.5%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.2) 2.2%), -webkit-radial-gradient(50% 50%, 200% 50%, #cccccc 5%, #d9d9d9 30%, #999999 100%);
}
.shield:before, .shield:after,
.outer:before,
.outer:after,
.inner:before,
.inner:after,
.star:before,
.star:after,
.centre:before,
.centre:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background-image: -webkit-radial-gradient(50% 0%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(50% 100%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 10%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 6%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
.shield:before,
.outer:before,
.inner:before,
.star:before,
.centre:before {
  -webkit-transform: rotate(65deg);
          transform: rotate(65deg);
}
.shield:after,
.outer:after,
.inner:after,
.star:after,
.centre:after {
  -webkit-transform: rotate(-65deg);
          transform: rotate(-65deg);
}