エンジニアの岡村です。
今日は下記のサイトで使った点線箇所の部分についてです。
https://think-local.dmdepart.jp/
コーディングで点線を引くって、実は結構大変です。というのもcssだけでは、点線の間隔を自由に決められないからです。
また演出を入れる際も入れづらく、小回りが効きづらいです。
mdn web docs border-style
そこで、今回は、svgのstrokeで上記サイトの点線部分を作りました。
svgにすることのメリットは、

• 点線の間隔を自由に決められる
• 演出もある程度小回りがきく
• domの形によらない自由な線を書くことができる

ためです。

準備1

svgは以下の特徴を持っています。

• svgのviewBoxはpathのdの数値のときの数値になります。
• svgのwidth,heightは実際に描画する時の大きさです。

今回は、わかりやすくbody全体の大きさをviewBox,width,height共に設定します。

<svg class=“dot-svg”></svg>

const svg = document.querySelector(‘.dot-svg’);
svg.setAttribute(“width”, document.body.clientWidth);
svg.setAttribute(“height”,document.body.clientHeight);
svg.setAttribute(“viewBox”,`0 0 ${document.body.clientWidth} ${document.body.clientHeight}`);

重要なのは、widthとheightとviewBoxの値を揃えることです。ここがズレた値だと、計算が面倒になります。。。

pathを書いていこう！

svgのタグは色々あるのですが、ここではpathタグを使って自由な線を書いていきます。

<svg class=“dot-svg”>
　<path class=“dot-svg-path”/>
</svg>

pathはdという普段聞きなれないアトリビュートを持っています。
dには、次のように書いていきます。

<path d=“M0 0L100 0”/>

上記は、0 0の位置から、100 0の位置に直線を引いたことになります。
下記にwebで使えるpathのコマンドが書いてあります。
mdn web docs paths
慣れれば、普段のcanvas2dと同じような感覚で色々書けると思います。
https://think-local.dmdepart.jp/
では、各必要な座標をgetBoundingBoxで取得し、それぞれコマンドを入れて行ってます。
実際に出力されたコード

<path class=“dot-line” d=“M0,846.9921875L692.9140625,846.9921875M992.078125,846.9921875
L1382.5,846.9921875
a40,40,90,0,1,40,40
L1422.5,2021.375
a40,40,90,0,1,-40,40L1040.8515625,2061.375M644.140625,2061.375
L302.5,2061.375
a40,40,90,0,0,-40,40
L262.5,3605.359375
a40,40,90,0,0,40,40L662.09375,3645.359375M1022.90625,3645.359375
L1382.5,3645.359375
a40,40,90,0,1,40,40
L1422.5,4454.953125
a40,40,90,0,1,-40,40L1058.703125,4494.953125M626.2890625,4494.953125
L302.5,4494.953125
a40,40,90,0,0,-40,40
L262.5,5204.21875
a40,40,90,0,0,40,40
L591.4453125,5244.21875M1093.5546875,5244.21875
L1382.5,5244.21875
a40,40,90,0,1,40,40
L1422.5,6019.1484375
”></path>

点線にしてみよう！

ここまできてようやくcssの登場です。
点線にするには、下記のcssを当てるだけです

.dot-svg-path{
    stroke: #221613; //線の色
    stroke-dasharray: 0 0 0 6;　//点線の間隔
    stroke-linecap: round;　//点線の形
    stroke-width: 2px; // 線の幅
    fill: none;　//塗りつぶしの色、noneだと塗りつぶさない
}

線が描かれるアニメーションを書いてみよう！

svgのstrokeは描かれたようなアニメーションを付けることができます。
下記は有料プランですが、gsapでのdrawsvgプラグインを使ってアニメーションしています。（この案件でも使っています。）
gsap draw svg
このライブラリがしていることは実際には、stroke-dasharrayとstroke-dashoffsetの値をアニメーションさせて線が描かれているようなアニメーションを実現しています。
ただし、点線では、stroke-dasharrayはすでに点線部分で使っているので別アプローチが必要になります。

maskを利用しよう！

svgのmaskは、色が黒だと何も表示されず、色が白だとmask側の白い部分にmaskされたものが表示されます。
書き方は下記です。

<svg class=“dot-svg”>
　<mask id=“dot-svg-mask”>
   <path />
  </mask>
　<path class=“dot-svg-path” mask=“url(#dot-svg-mask)“/>
</svg>

最終的にはこのタグの中身のpathをstroke-dasharrayとstroke-dashoffsetを使ってアニメーションさせることで、マスクされた点線が描かれるようなアニメーションが実装できます。

最後に

下記から簡単な動作例とコードを確認できます。(typesctiptです）。mocではgsapの有料プランを使わない方法で実装しているので、参考までにどうぞ

動作例

コード