直線のアニメーション
<div>
<!-- 直線(L) の アニメーション-->
<svg style="width:100%;max-width:800px;" viewBox="0 0 240 60">
<path id="path_animationL" d="M10,50 l50,-10 m10,0 l50,-10 m10,0 l50,-10" style="fill:none;stroke:#f00;stroke-width:2px;" />
<text style="font-size:10px;stroke:#000;letter-spacing:0.3em;stroke:#0ff;opacity:0.8;" dy="-4" text-anchor="middle">
<textpath xlink:href="#path_animationL" startOffset="50%">アニメーションします</textpath>
</text>
</svg>
</div>
<script>
var xyl=10,vl=-1;
window.addEventListener("load",function(){
setInterval(function(){
xyl+=vl;
if(xyl>20||xyl<0){vl=-vl;xyl+=vl;}
let elm=document.getElementById("path_animationL");
elm.setAttribute("d","M"+xyl+",50 l50,-10 m"+xyl+",0 l50,-10 m"+xyl+",0 l50,-10");
},33);
});
</script>
円弧のアニメーション
<div>
<!-- 円弧(A) の アニメーション-->
<svg style="width:100%;max-width:400px;" viewBox="0 0 120 120">
<path id="path_animationA" d="M10,110 a100,100 45,0,1 100,-100" style="fill:none;stroke:#f00;stroke-width:2px;" />
<text style="font-size:10px;stroke:#000;letter-spacing:0.3em;stroke:#0ff;" dy="10">
<textpath xlink:href="#path_animationA">アニメーションします</textpath>
</text>
</svg>
</div>
<script>
var xya=100,va=-4;
window.addEventListener("load",function(){
setInterval(function(){
xya+=va;
if(xya>160||xya<80){va=-va;xya+=va;}
let elm=document.getElementById("path_animationA");
elm.setAttribute("d","M10,110 a"+xya+","+xya+" "+(-Math.atan(100/-100)*180/Math.PI)+",0,1 100,-100");
},33);
});
</script>
2次ベジェ曲線のアニメーション
<div>
<!-- 2次ベジェ曲線(Q) の アニメーション-->
<svg style="width:100%;max-width:400px;" viewBox="0 0 120 120">
<path id="path_animationQ" d="M10,60 q50,-80 100,0" style="fill:none;stroke:#f00;stroke-width:2px;" />
<text style="font-size:10px;stroke:#000;letter-spacing:0.3em;stroke:#0ff;opacity:0.5;" dy="10" text-anchor="middle">
<textpath xlink:href="#path_animationQ" startOffset="50%">アニメーションします</textpath>
</text>
</svg>
</div>
<script>
var xyq=-80,vq=-4;
window.addEventListener("load",function(){
setInterval(function(){
xyq+=vq;
if(xyq>80||xyq<-80){vq=-vq;xyq+=vq;}
let elm=document.getElementById("path_animationQ");
elm.setAttribute("d","M10,60 q50,"+xyq+" 100,0");
},33);
});
</script>
