Conic Rays

1<template>
2  <div class="rays"><div class="spin"></div><div class="veil"></div><div class="core"></div></div>
3</template>
4<script>
5export default {}
6</script>
7<style>
8.rays{position:relative;width:440px;height:260px;border-radius:20px;overflow:hidden;background:#08080f}
9.spin{position:absolute;top:50%;left:50%;width:700px;height:700px;transform:translate(-50%,-50%);opacity:.9;
10  background:conic-gradient(from 0deg,
11    #8b5cf6 0 6deg,transparent 6deg 30deg,
12    #06b6d4 30deg 36deg,transparent 36deg 60deg,
13    #d946ef 60deg 66deg,transparent 66deg 90deg,
14    #8b5cf6 90deg 96deg,transparent 96deg 120deg,
15    #06b6d4 120deg 126deg,transparent 126deg 150deg,
16    #d946ef 150deg 156deg,transparent 156deg 180deg,
17    #8b5cf6 180deg 186deg,transparent 186deg 210deg,
18    #06b6d4 210deg 216deg,transparent 216deg 240deg,
19    #d946ef 240deg 246deg,transparent 246deg 270deg,
20    #8b5cf6 270deg 276deg,transparent 276deg 300deg,
21    #06b6d4 300deg 306deg,transparent 306deg 330deg,
22    #d946ef 330deg 336deg,transparent 336deg 360deg);
23  filter:blur(1px);animation:spin 18s linear infinite}
24.veil{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 8%,rgba(8,8,15,.4) 45%,#08080f 82%)}
25.core{position:absolute;top:50%;left:50%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;
26  background:radial-gradient(circle,#fff,#a78bfa 40%,transparent 70%);opacity:.9;filter:blur(2px)}
27@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
28</style>