| <html> | |
| <body style="margin:0; display:flex; justify-content:center; align-items:center; height:100vh; background:#fff"> | |
| <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <radialGradient id="g" cx="50%" cy="50%"> | |
| <stop offset="0%" style="stop-color:#667eea;stop-opacity:1"/> | |
| <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3"/> | |
| </radialGradient> | |
| </defs> | |
| </svg> | |
| <script> | |
| const svg = document.querySelector('svg'); | |
| const r = 120; | |
| let path = ''; | |
| for(let i = 0; i < 24; i += 2) { | |
| let a1 = i * Math.PI / 12; | |
| let a2 = (i + 1) * Math.PI / 12; | |
| let x2 = 200 + Math.cos(a2) * r; | |
| let y2 = 200 + Math.sin(a2) * r; | |
| let x3 = 200 + Math.cos(a2) * (r - 90); | |
| let y3 = 200 + Math.sin(a2) * (r - 90); | |
| path += `M${x2},${y2} L${x3},${y3} `; | |
| } | |
| svg.innerHTML += `<path d="${path}" stroke="url(#g)" stroke-width="6" stroke-linecap="round" fill="none"/>`; | |
| svg.innerHTML += `<path d="M200,-12 L212,0 L200,12 L188,0 Z" transform="translate(0,200)" fill="#000"/>`; | |
| </script> | |
| </body> | |
| </html> |