.arrow-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw-arrow 2s ease-out forwards;
}
.arrow-head {
    transform: scale(0);
    transform-origin: 160px 490px;
    animation: show-head 0.5s 0.56s forwards;
}
@keyframes draw-arrow {
    to { stroke-dashoffset: 0; }
}
@keyframes show-head {
    to { transform: scale(1); }
}
.scribble-arrow-responsive {
    width: 100%;
    height: 40vh;
    max-width: 600px;
    display: block;
}
@media (max-width: 600px) {
    .scribble-arrow-responsive {
        height: 60vh;
        max-width: 100%;
    }
}