JSFiddle - React, Tailwind, and code Playground

HTML

<div>X</div><div>A</div><div>C</div><div>T</div>

CSS

div {
    font-size:100px; 
    border:2px; 
    background: linear-gradient(135deg, red 0%, red 40%, black 40%, black 100%), white;
    -webkit-background-clip: text, border; 
    color: transparent;
    width:100px;
    float:left;
}

JavaScript

function lg_spin(rot) {
    var elements = document.getElementsByTagName('div');
    for (i=0; i<elements.length; i++) {
         elements[i].style.background = "linear-gradient(" + ((rot+135)%360) + "deg, red 0%, red 40%, black 40%, black 100%), white";
        elements[i].style.webkitBackgroundClip = "text, border";
    }
    
    if (rot > 0) {
        setTimeout(function() { lg_spin(rot-1) }, 25);
    }
}

setTimeout(function() { lg_spin(359) }, 25);