パーツ番号 10-04-09 ・ CSSのみ

ルート線描画

SVGパスの経路が始点から終点へ描かれます。表示されると再生。アクセスルートの図解に。

mapcsssvg

プレビュー

ソースコード

HTML

<svg class="d10-04-09-svg" viewBox="0 0 300 240" preserveAspectRatio="xMidYMid meet">
          <rect width="300" height="240" fill="#eaeef0"/>
          <g stroke="#dbe1e5" stroke-width="1">
            <line x1="0" y1="60" x2="300" y2="60"/><line x1="0" y1="120" x2="300" y2="120"/><line x1="0" y1="180" x2="300" y2="180"/>
            <line x1="75" y1="0" x2="75" y2="240"/><line x1="150" y1="0" x2="150" y2="240"/><line x1="225" y1="0" x2="225" y2="240"/>
          </g>
          <path class="d10-04-09-path" d="M40,190 C90,150 90,110 150,110 S220,80 260,50" fill="none" stroke="#2f7fef" stroke-width="4" stroke-linecap="round"/>
          <circle cx="40" cy="190" r="7" fill="#5a6b7a"/>
          <circle cx="260" cy="50" r="7" fill="#e2504a"/>
        </svg>

CSS

.d10-04-09{padding:0}
        .d10-04-09-svg{width:100%;height:100%;display:block}
        .d10-04-09-path{stroke-dasharray:420;stroke-dashoffset:420}
        .io-reveal.is-visible .d10-04-09-path{animation:d289draw 1.8s ease forwards}
        @keyframes d289draw{to{stroke-dashoffset:0}}

クラス名 .d10-04-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。