JSFiddle - React, Tailwind, and code Playground

by Curry

HTML

<div></div>
<svg>
    <polyline points="20,20 800,200 950,500 0,800 0,0"></polyline>    
</svg>

CSS

polyline {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke: rgba(0,0,0,0.5);
}
svg {
    width:100%;
    min-height:1000px;
}
div {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    -webkit-animation-name: Player1;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
}
@-webkit-keyframes Player1 {
    0% {
        background:red;
        left:20px;
        top:20px;
    }
    25% {
        background:yellow;
        left:800px;
        top:200px;
    }
    50% {
        background:blue;
        left:950px;
        top:500px;
    }
    75% {
        background:green;
        left:0px;
        top:800px;
    }
    100% {
        background:red;
        left:0px;
        top:0px;
    }
}