JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="30px" xml:space="preserve">
  <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#d65900" stroke-width="3" class="st0" d="M0.5,10 c 5,0, 5,3, 10,3 s 5,-3,10,-3 c 5,0, 5,3, 10,3 s 5,-3,10,-3" />
            
</svg>

CSS

.st0 {
    animation: shift 0.6s linear infinite;
    width: 25px;
    height: 30px;
}

@keyframes shift {
    from {
        transform: translateX(-20px);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .st0 {
        animation: none;
    }
}