svg textPath animation

<style>
g {position:absolute;width:auto;height:100%;transform-origin:50% 50%;}
.rotate{animation:rotation 12s infinite linear}
@keyframes rotation{
from {transform:rotate(0deg)}
to {transform:rotate(359deg)}
}
</style>


<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
    <title>Circular Text Path</title>
    <style>
        text {
            font-size: 76px;
            font-family: Copperplate, Copperplate Gothic, serif;
            font-weight: bold;
            font-variant: small-caps;
            font-variant-ligatures: none;
            stroke: black;
            stroke-width: 1.5px;
            fill: white;
        }
    </style>
<g class="rotate">
    <defs>
        <path id="textcircle"
              d="M250,400
                 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
              transform="rotate(12,250,250)"/>
    </defs>
    <rect width="100%" height="100%" fill="white" />
    <path d="M150,50 250,400 350,50 250,300z" fill="gold" stroke="blue"/>
    <text>
        <textPath xlink:href="#textcircle"
                  aria-label="All for One & One for All"
                  textLength="942"> One for All
                                         for One &</textPath>
    </text>
</g>
</svg>