body {
  background: #000;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.elegantthemes {
  fill: #FFF;
  width: 60px;
  stroke: #FFF;
  stroke-width: 2px;
  stroke-dashoffset: 0;
  -webkit-animation: animate 4s;
          animation: animate 4s;
}

@-webkit-keyframes animate {
  0% {
    transform-origin: center;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transform: scale(1.2);
    transform-origin: center;
  }
  30% {
    fill: none;
    transform: scale(1.2);
  }
  60% {
    fill: #FFF;
    transform: scale(1);
  }
  80% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1000;
  }
}

@keyframes animate {
  0% {
    transform-origin: center;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transform: scale(1.2);
    transform-origin: center;
  }
  30% {
    fill: none;
    transform: scale(1.2);
  }
  60% {
    fill: #FFF;
    transform: scale(1);
  }
  80% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1000;
  }
}