SVG path 記述テスト / Illustrator / Photoshop で確認

  ◀︎
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#456789" d="m0 25,v100 h20,v-10 h-10,v-90z">
</path>
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#456789" d="m0 25, v100 h20 v-10 h-10 v-90z">
<animate attributeType="XML" attributeName="d" dur="2s" repeatCount="3" values="m0 20, v100 h20 v-10 h-10 v-90z;
m0 25, v100 h20 v-10 h-10 v-90z;
m0 30, v100 h20 v-10 h-10 v-90z;
m0 35, v100 h20 v-10 h-10 v-90z;
m0 40, v100 h20 v-10 h-10 v-90z;
m0 45, v100 h20 v-10 h-10 v-90z;
m0 40, v100 h20 v-10 h-10 v-90z;
m0 35, v100 h20 v-10 h-10 v-90z;
m0 30, v100 h20 v-10 h-10 v-90z;
m0 25, v100 h20 v-10 h-10 v-90z"/>
m0 20, v100 h20 v-10 h-10 v-90z"/>
</path>
</svg>