飞星动画

效果图

飞线1.gif
代码

<template>
    <div class="fly-box-container">
        <svg width="400" height="400">
            <defs>
                <path
                    id="fly-box-path"
                    d="M5 5 L395 5 L395 395 L5 395 Z"
                    fill="none"
                ></path>
                <mask id="fly-box-mask">
                    <circle r="150" cx="0" cy="0" fill="white">
                        <animateMotion
                            dur="3s"
                            path="M5 5 L395 5 L395 395 L5 395 Z"
                            rotate="auto"
                            repeatCount="indefinite"
                         />
                    </circle>
                </mask>
            </defs>
            <use 
            href="#fly-box-path"
            stroke-width="1"
            stroke="#235fa7"
             />
             <use 
            href="#fly-box-path"
            stroke-width="3"
            stroke="#4fd2dd"
            mask="url(#fly-box-mask)"
             />
        </svg>
    </div>
</template>
<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
    
})
</script>
<style scoped>
</style>