<style>
  .bg-line-rand {
    margin-top: 20px;
    width: 480px;
    height: 60px;
    background-color: #eee;
    background-image: linear-gradient(90deg, #fb3 11px, transparent 0),
      linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655
          41px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }
  .bg-dot-rand {
    margin-top: 20px;
    width: 200px;
    height: 200px;
    background-color: #eee;
    background-image: radial-gradient(circle, #fb3 5px, transparent 0),
      radial-gradient(circle, #ab4 13px, transparent 0), radial-gradient(circle, #655
          31px, transparent 0);
    background-repeat: no-repeat;
    background-size: 101px 203px, 147px 60px, 373px 201px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }
  .animate1 {
    animation: move 4s linear infinite;
  }
  .animate2 {
    animation: move2 4s linear infinite;
  }
  @keyframes move {
    0% {
      background-position: 0 0, 0 0, 0 0;
    }
    50% {
      background-position: -10px 0, 20px 0, 30px 0;
    }
    100% {
      background-position: 0 0, 30px 0, 10px 0;
    }
  }
  @keyframes move2 {
    0% {
      background-position: 0 0, 0 0, 0 0;
    }
    50% {
      background-position: -10px 30px, 20px 0, -40px 80px;
    }
    100% {
      background-position: 0 20px, 60px -20px, 10px 30px;
    }
  }
</style>
<div class="bg-line-rand black-theme"></div>
<div class="bg-line-rand black-theme animate1"></div>
<div class="bg-dot-rand black-theme animate2"></div>