SVG
Scrapbox上でSVGを動かす
/villagepump/コードブロック記法に書いたsvgを表示する
https://svg-hosting.vercel.app/scrapbox.io/Rund3/SVG/animation.svg
code:animation.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path d="M 25 175 L 25 25" stroke="black" stroke-dasharray="2"/>
<path d="M 175 25 L 175 175" stroke="black" stroke-dasharray="2"/>
<path d="M 25 25 L 175 25" stroke="black" stroke-dasharray="2"/>
<path d="M 25 175 Q 25 25 175 25" stroke="black" stroke-dasharray="2" fill="none"/>
<path d="M 25 25 Q 175 25 175 175" stroke="black" stroke-dasharray="2" fill="none"/>
<path d="M 25 175 C 25 25 175 25 175 175" stroke="blue" fill="none"/>
<path stroke="red">
<animate attributeName="d" calcMode="linear" from="M 25 175 L 25 25" to="M 25 25 L 175 25" begin="0s" dur="6s" repeatCount="indefinite"/>
</path>
<path stroke="red">
<animate attributeName="d" calcMode="linear" from="M 25 25 L 175 25" to="M 175 25 L 175 175" begin="0s" dur="6s" repeatCount="indefinite"/>
</path>
<circle fill="red" r="5">
<animateMotion path="M 25 175 Q 25 25 175 25" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle fill="orange" r="5">
<animateMotion path="M 25 25 Q 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle fill="red" r="5">
<animateMotion path="M 25 175 C 25 25 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
</circle>
</svg>