svg {
    width: 100%;
    max-width: 900px;
    height: auto;
  margin: auto;
  display: block;
}

svg * {
  transform-box: fill-box;
}

.line {
  fill: none;
  stroke: #a08970;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: 3s line-draw cubic-bezier(.5,.3,.5,1) forwards;
}

.heart {
  fill: #fab4b4;
  stroke-width: 0;
  opacity: 0;
  scale: .5;
  transform-origin: 50% 50%;
  
  &.heart--is-large {
    transform-origin: 25% 100%;
    animation: 1s heart-grow 1.33s cubic-bezier(.5,.3,.1,1) forwards;
  }
  
  &.heart--is-small {
    transform-origin: 4% 100%;
    animation: .75s heart-grow 1.66s cubic-bezier(.3,.3,.2,1) forwards;
  }
}


@keyframes line-draw {
  100% { 
    stroke-dashoffset: 0;
  }
}


@keyframes heart-grow {
  100% { 
    opacity: .5;
    scale: 1;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 50%;
  pointer-events: none;
   }