SOURCE

console 命令行工具 X clear

                    
>
console
<svg width="1200" height="1200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <defs>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <!-- 使用高斯模糊来创建扩散效果 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="coloredBlur">
        <!-- 动画:stdDeviation从0增加到15 -->
        <!-- <animate attributeName="stdDeviation" from="0" to="15" dur="5s" repeatCount="indefinite"/> -->
      </feGaussianBlur>
      <!-- 合并原始图形和模糊后的图形 -->
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- 原始路径 -->
  <path id="motionPath" d="M10,90 h80 a8,8 0 0 1 8,8 v74 a8,8 0 0 0 8,8 h80"
        stroke="#ddd" fill="none" stroke-width="2"/>

  <!-- 原始路径 -->
  <path id="motionPath2" d="M10,90 h170"
        stroke="#ddd" fill="none" stroke-width="2"/>

  <!-- 追光动画的光源 -->
  <rect x="-6" y="-2" width="12" height="4" fill="orange" filter="url(#glow)">
    <!-- 动画沿路径运动,并且自动旋转 -->
    <animateMotion dur="2s" repeatCount="indefinite" rotate="auto">
      <!-- 路径引用 -->
      <mpath href="#motionPath"/>
    </animateMotion>
    
    <!-- 改变透明度的动画 -->
    <!-- <animate attributeName="opacity" from="1" to="0.2" dur="5s" repeatCount="indefinite" /> -->
  </rect>
  <!-- 追光动画的光源 -->
  <rect x="-6" y="-2" width="12" height="4" fill="orange" filter="url(#glow)">
    <!-- 动画沿路径运动,并且自动旋转 -->
    <animateMotion dur="2s" repeatCount="indefinite" rotate="auto">
      <!-- 路径引用 -->
      <mpath href="#motionPath2"/>
    </animateMotion>
    
    <!-- 改变透明度的动画 -->
    <!-- <animate attributeName="opacity" from="1" to="0.2" dur="5s" repeatCount="indefinite" /> -->
  </rect>
</svg>