.bg {
  background:#799d4b;
  text-align:center;
  padding:50px;
}

.zigzag {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: zigzag 4s linear forwards infinite;
}
@keyframes zigzag {
  from {
    stroke-dashoffset: 980;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.dash {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: month 4s linear backwards infinite;
  &:nth-child(1) {
    animation-delay: 0s;
  }
  &:nth-child(2) {
    animation-delay: 0.05s;
  }
  &:nth-child(3) {
    animation-delay: 0.10s;
  }
  &:nth-child(4) {
    animation-delay: 0.15s;
  }
  &:nth-child(5) {
    animation-delay: 0.20s;
  }
  &:nth-child(6) {
    animation-delay: 0.25s;
  }
  &:nth-child(7) {
    animation-delay: 0.30s;
  }
  &:nth-child(8) {
    animation-delay: 0.35s;
  }
  &:nth-child(9) {
    animation-delay: 0.40s;
  }
  &:nth-child(10) {
    animation-delay: 0.45s;
  }
}
@keyframes month {
  from {
    stroke-dashoffset: 380;
  }
  to {
    stroke-dashoffset: 0;
  }
}