流星雨动画 svg

春天的晚上感觉还挺凉爽，不过已经不那么冷了，晚上在窗前又能看看星星了。

因此搞了这，看起来还是挺放松的。放到网站上看起来还挺好的。 逻辑还是比较简单的，就是控制svg的线段运动，在视窗内滑动显示。 代码也比较简单，如下： 采用vue+tailwindcss

<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";

interface Lines {
  x1: number
  y1: number
  x2: number
  y2: number
  tx1: number
  ty1: number
  tx2: number
  ty2: number
  dur: number
}

const position: Ref<Lines[]> = ref([])

onMounted(() => {
  let ps:Lines[] = []
  let w = 300
  let h = 150
  for(let i = 0; i < 20; i++) {
    let length = Math.random() * 50 + 4
    let mlen = Math.max(w,h)
    let x = Math.random() * mlen - mlen
    let y = Math.random() * mlen - mlen
    let distance = Math.max(w-x, h-y)
    let ex = x + distance
    let ey = y + distance
    ps.push({
      x1: x,
      y1: y,
      x2: x + length,
      y2: y + length,
      tx1: ex,
      ty1: ey,
      tx2: ex + length,
      ty2: ey + length,
      dur: distance / mlen * (4 + Math.random())
    })
  }
  position.value = ps
})
</script>

<template>
  <svg class="w-[300px] h-[150px] bg-slate-800" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <line v-for="(p, i) in position" 
      :x1="p.x1" :y1="p.y1" :x2="p.x2" :y2="p.y2"
      style="stroke:rgb(99,99,99); stroke-width:1">
      <animate attributeName="x1" attributeType="XML" 
              :from="p.x1"  :to="p.tx1" 
              begin="0s" :dur="p.dur" 
              repeatCount="indefinite"/>
      <animate attributeName="y1" attributeType="XML" 
              :from="p.y1"  :to="p.ty1" 
              begin="0s" :dur="p.dur" 
              repeatCount="indefinite"/>
      <animate attributeName="x2" attributeType="XML" 
              :from="p.x2"  :to="p.tx2"  
              begin="0s" :dur="p.dur" 
              repeatCount="indefinite"/>
      <animate attributeName="y2" attributeType="XML" 
              :from="p.y2"  :to="p.ty2"
              begin="0s" :dur="p.dur" 
              repeatCount="indefinite"/>
    </line>
  </svg>
</template>