Catalyst / admin/SAynapse-Horizon 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / SAynapse-Horizon

public

Self Hosted Cyber Threat Intelligence Hub

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
SAynapse-Horizon / Synapse-Horizon-v2 / src / components / RadarMark.jsx 2044 B · main 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Compact animated radar brandmark. Sized by its container (the header uses ~40px).
// Sweep + contact pings are CSS-driven so `prefers-reduced-motion` can freeze them
// (see the rm-* rules in index.css). Contacts use a single blue ramp.
export default function RadarMark({ className = '' }) {
  return (
    <svg
      viewBox="0 0 48 48"
      className={className}
      width="100%"
      height="100%"
      role="img"
      aria-label="Synapse-Horizon radar"
    >
      <defs>
        <linearGradient id="rmSweep" gradientUnits="userSpaceOnUse" x1="45" y1="24" x2="36" y2="6.8">
          <stop offset="0" stopColor="#38bdf8" stopOpacity="0.55" />
          <stop offset="1" stopColor="#38bdf8" stopOpacity="0" />
        </linearGradient>
      </defs>

      <circle cx="24" cy="24" r="21" fill="#0c1524" />
      <circle cx="24" cy="24" r="21" fill="none" stroke="#243347" strokeWidth="1" />
      <circle cx="24" cy="24" r="13.5" fill="none" stroke="#1c2838" strokeWidth="0.75" />
      <circle cx="24" cy="24" r="6" fill="none" stroke="#1c2838" strokeWidth="0.75" />
      <line x1="3" y1="24" x2="45" y2="24" stroke="#1a2434" strokeWidth="0.6" />
      <line x1="24" y1="3" x2="24" y2="45" stroke="#1a2434" strokeWidth="0.6" />

      <g className="rm-sweep">
        <path d="M24,24 L45,24 A21,21 0 0 0 36.04,6.8 Z" fill="url(#rmSweep)" />
        <line x1="24" y1="24" x2="45" y2="24" stroke="#38bdf8" strokeWidth="1.4" strokeLinecap="round" />
      </g>

      <circle cx="15" cy="15.5" r="2" fill="#7dd3fc" />
      <circle className="rm-ping" cx="15" cy="15.5" r="2" fill="none" stroke="#7dd3fc" strokeWidth="1" />
      <circle cx="33" cy="30" r="2" fill="#38bdf8" />
      <circle className="rm-ping" style={{ animationDelay: '1.3s' }} cx="33" cy="30" r="2" fill="none" stroke="#38bdf8" strokeWidth="1" />

      <circle cx="24" cy="24" r="2.4" fill="#38bdf8" />
      <circle className="rm-ping" style={{ animationDelay: '0.6s' }} cx="24" cy="24" r="2.4" fill="none" stroke="#38bdf8" strokeWidth="1" />
    </svg>
  )
}