case

The markdown SVG animation doesn’t seem to show. Let me describe the effect. The following pattern spreads from the middle to the sides using datAV effects

Realize the principle of

  1. First draw a static pattern
  <svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.999999999999999997,8 300,8" stroke="#3f96a5">
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90, 210, 32" stroke="#3f96a5">
    </polyline>
  </svg>
Copy the code
  1. Add animation:
    • Labels used:<animate>
    • Attributes used:stroke-dasharray
    • Principle: Let attributesstroke-dasharrayfrom0 whidth/2 0 width/2become0 0 width 0Due to thestroke-dasharrayThe attribute change used to draw the dotted line can be understood as: content (used for space), blank, content (the actual content of this case), and blank. The process of change is to gradually replace the blank on both sides with the actual content, so that is the effect we achieved above
<svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.999999999999999997,8 300,8" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 157.52079728939617, 0, 157.52079728939617"
        to="0, 0, 0, 315.04159457879234," dur="1.2 s" begin="0s" calcMode="spline" keyTimes="0; 1"
        keySplines="0.4, 1,0.49, 0.98" repeatCount="indefinite"></animate>
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90, 210, 32" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 60, 0, 60" to="0, 0, 0, 120," dur="1.2 s"
        begin="0s" calcMode="spline" keyTimes="0; 1" keySplines=". 4, 1, 49,. 98" repeatCount="indefinite"></animate>
    </polyline>
  </svg>
Copy the code