SVGで文字を直線や円弧やベジェ曲線に沿って表示しJavascriptでアニメーション

SVGで文字を直線や円弧やベジェ曲線に沿って表示しJavascriptでアニメーション

SVGで文字を直線や円弧やベジェ曲線に沿って表示しJavascriptでアニメーションを行う

直線のアニメーション

アニメーションします
<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>

			
			
			
			

Mam's WebSite