svgで線を描いてみる。

四角い点線

サンプルコード
html,cssのみで記述しています。
hoverしたら、点線がぐるぐるまわります。

html

<svg viewBox="0 0 200 200">
    <polygon points="20,20 20,100 120,100, 120,20"/>
</svg>

css

svg {
    stroke: #09d;
    stroke-width: 2;
    stroke-dashoffset: 0;
    stroke-dasharray: 5;
    fill: none;
    -webkit-transition: all 2s ease-in-out;
}

svg:hover {
    stroke-dashoffset: 100;
    stroke-width: 1;
    stroke-dasharray: 3;    
}