body {
  background: #ff837b;
}

#container {
  width: 600px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-53%, -60%);
}
#container.fin .path-1,
#container.fin .path-2,
#container.fin .path-3 {
  stroke-dashoffset: 0;
}
#container.fin .path-4 {
  stroke-width: 18px;
}

.path {
  fill: none;
  stroke: #362f3c;
  stroke-width: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-1 {
  stroke-dasharray: 1850 2000;
  stroke-dashoffset: 1851;
  transition: 5s linear;
}

.path-2 {
  stroke-dasharray: 260 1000;
  stroke-dashoffset: 261;
  transition: 1.2s linear 5.2s;
}

.path-3 {
  stroke-dasharray: 100 1000;
  stroke-dashoffset: 101;
  transition: 1s linear 6.5s;
}

.path-4 {
  stroke-width: 0;
  transition: 0.1s linear 7.5s;
}