Orion Constellation Chart
A starfield rendering of the Orion constellation with six labeled star hotspots — Rigel, Betelgeuse, Bellatrix, Alnilam, Saiph, Meissa. Each star pops a card with real astronomical data: Bayer designation, distance, magnitude, luminosity, and a five-star brightness gauge.
Orion Constellation Chart the 15th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="orion-stage">
<div class="orion-chart">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="18" r="0.6" fill="rgba(200,220,255,0.35)"/>
<circle cx="80" cy="10" r="0.7" fill="rgba(200,220,255,0.45)"/>
<circle cx="140" cy="22" r="0.4" fill="rgba(200,220,255,0.25)"/>
<circle cx="170" cy="38" r="0.6" fill="rgba(200,220,255,0.35)"/>
<circle cx="265" cy="18" r="0.7" fill="rgba(200,220,255,0.4)"/>
<circle cx="330" cy="22" r="0.4" fill="rgba(200,220,255,0.22)"/>
<circle cx="360" cy="55" r="0.6" fill="rgba(200,220,255,0.38)"/>
<circle cx="30" cy="80" r="0.4" fill="rgba(200,220,255,0.2)"/>
<circle cx="320" cy="75" r="0.6" fill="rgba(200,220,255,0.32)"/>
<circle cx="55" cy="145" r="0.5" fill="rgba(200,220,255,0.28)"/>
<circle cx="360" cy="150" r="0.5" fill="rgba(200,220,255,0.28)"/>
<circle cx="35" cy="260" r="0.5" fill="rgba(200,220,255,0.3)"/>
<circle cx="380" cy="260" r="0.5" fill="rgba(200,220,255,0.28)"/>
<circle cx="58" cy="360" r="0.4" fill="rgba(200,220,255,0.2)"/>
<circle cx="90" cy="380" r="0.5" fill="rgba(200,220,255,0.28)"/>
<circle cx="340" cy="355" r="0.5" fill="rgba(200,220,255,0.3)"/>
<circle cx="392" cy="360" r="0.6" fill="rgba(200,220,255,0.35)"/>
<line x1="200" y1="48" x2="148" y2="155" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<line x1="200" y1="48" x2="262" y2="142" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<line x1="148" y1="155" x2="168" y2="228" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<line x1="262" y1="142" x2="232" y2="224" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<line x1="168" y1="228" x2="200" y2="230" stroke="rgba(140,160,255,0.22)" stroke-width="0.8"/>
<line x1="200" y1="230" x2="232" y2="224" stroke="rgba(140,160,255,0.22)" stroke-width="0.8"/>
<line x1="168" y1="228" x2="136" y2="342" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<line x1="232" y1="224" x2="278" y2="330" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
<circle cx="200" cy="48" r="6" fill="rgba(160,180,255,0.08)"/>
<circle cx="200" cy="48" r="2.5" fill="#d0daff" opacity="0.85"/>
<circle cx="148" cy="155" r="10" fill="rgba(255,120,60,0.06)"/>
<circle cx="148" cy="155" r="5" fill="#ffb890" opacity="0.9"/>
<circle cx="262" cy="142" r="6" fill="rgba(160,200,255,0.06)"/>
<circle cx="262" cy="142" r="3" fill="#c0d8ff" opacity="0.85"/>
<circle cx="168" cy="228" r="5" fill="rgba(160,180,255,0.06)"/>
<circle cx="168" cy="228" r="2.8" fill="#d0daff" opacity="0.85"/>
<circle cx="200" cy="230" r="5" fill="rgba(160,180,255,0.06)"/>
<circle cx="200" cy="230" r="3" fill="#d0daff" opacity="0.85"/>
<circle cx="232" cy="224" r="5" fill="rgba(160,200,255,0.06)"/>
<circle cx="232" cy="224" r="2.5" fill="#c8d8ff" opacity="0.85"/>
<circle cx="136" cy="342" r="5" fill="rgba(160,200,255,0.06)"/>
<circle cx="136" cy="342" r="2.5" fill="#c0d4ff" opacity="0.8"/>
<circle cx="278" cy="330" r="14" fill="rgba(160,200,255,0.05)"/>
<circle cx="278" cy="330" r="6" fill="#dce8ff" opacity="0.95"/>
</svg>
<div class="orion-spot" style="left:37%;top:38.75%"><div class="orion-hit"></div>
<div class="orion-card">
<div class="orion-top"><div class="orion-bayer">α Orionis</div><div class="orion-name">Betelgeuse</div><div class="orion-const">Orion · Upper left shoulder</div><span class="orion-pill">M1–2 Iaab · Red Supergiant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">700 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">0.42 (variable)</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~126,000 L☉</span></div>
<div class="orion-row"><span class="orion-key">Radius</span><span class="orion-val">~700 R☉</span></div>
<div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star orion-mag-dim">★</span></span></div>
</div>
</div>
</div>
<div class="orion-spot" style="left:69.5%;top:82.5%"><div class="orion-hit"></div>
<div class="orion-card orion-card-left">
<div class="orion-top"><div class="orion-bayer">β Orionis</div><div class="orion-name">Rigel</div><div class="orion-const">Orion · Lower right</div><span class="orion-pill">B8 Ia · Blue Supergiant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">860 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">0.13 (brightest)</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~120,000 L☉</span></div>
<div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">12,100 K</span></div>
<div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span></span></div>
</div>
</div>
</div>
<div class="orion-spot" style="left:65.5%;top:35.5%"><div class="orion-hit"></div>
<div class="orion-card orion-card-left">
<div class="orion-top"><div class="orion-bayer">γ Orionis</div><div class="orion-name">Bellatrix</div><div class="orion-const">Orion · Upper right shoulder</div><span class="orion-pill">B2 III · Blue Giant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">250 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">1.64</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~6,400 L☉</span></div>
<div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">22,000 K</span></div>
<div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star orion-mag-dim">★</span><span class="orion-mag-star orion-mag-dim">★</span></span></div>
</div>
</div>
</div>
<div class="orion-spot" style="left:50%;top:57.5%"><div class="orion-hit"></div>
<div class="orion-card">
<div class="orion-top"><div class="orion-bayer">ε Orionis</div><div class="orion-name">Alnilam</div><div class="orion-const">Orion · Belt, central star</div><span class="orion-pill">B0 Ia · Blue Supergiant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">2,000 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">1.69</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~375,000 L☉</span></div>
<div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">27,500 K</span></div>
</div>
</div>
</div>
<div class="orion-spot" style="left:50%;top:12%"><div class="orion-hit"></div>
<div class="orion-card">
<div class="orion-top"><div class="orion-bayer">λ Orionis</div><div class="orion-name">Meissa</div><div class="orion-const">Orion · Head</div><span class="orion-pill">O8 III · Blue-White Giant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">1,100 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">3.39</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~28,000 L☉</span></div>
<div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">35,000 K</span></div>
</div>
</div>
</div>
<div class="orion-spot" style="left:34%;top:85.5%"><div class="orion-hit"></div>
<div class="orion-card">
<div class="orion-top"><div class="orion-bayer">κ Orionis</div><div class="orion-name">Saiph</div><div class="orion-const">Orion · Lower left</div><span class="orion-pill">B0.5 Ia · Blue Supergiant</span></div>
<div class="orion-data">
<div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">720 ly</span></div>
<div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">2.07</span></div>
<div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~57,500 L☉</span></div>
<div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">26,500 K</span></div>
</div>
</div>
</div>
</div>
</div> .orion-stage {
background: #04060e;
/* Side room — star cards pop to the right (Betelgeuse, Alnilam,
Meissa, Saiph) or left (Rigel, Bellatrix). 260px each side. */
padding: 40px 280px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
display: flex;
align-items: center;
justify-content: center;
}
.orion-chart {
position: relative;
width: 400px;
height: 400px;
flex-shrink: 0;
}
.orion-chart svg { width: 100%; height: 100%; display: block; }
.orion-spot {
position: absolute;
transform: translate(-50%, -50%);
cursor: help;
z-index: 10;
}
.orion-hit {
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
}
.orion-hit::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(180, 200, 255, 0);
transition: background .2s;
}
.orion-spot:hover .orion-hit::after {
background: rgba(180, 200, 255, 0.08);
box-shadow: 0 0 18px 6px rgba(160, 180, 255, 0.12);
}
.orion-card {
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(6px);
z-index: 200;
width: 230px;
background: rgba(8, 12, 28, 0.96);
border: 1px solid rgba(100, 120, 200, 0.2);
border-radius: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow:
0 12px 38px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(100, 120, 200, 0.06);
overflow: hidden;
text-align: left;
}
.orion-spot:hover .orion-card {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
.orion-card-left {
left: auto;
right: calc(100% + 14px);
transform: translateY(-50%) translateX(-6px);
}
.orion-spot:hover .orion-card-left {
transform: translateY(-50%) translateX(0);
}
.orion-top {
padding: 12px 13px 10px;
border-bottom: 1px solid rgba(100, 120, 200, 0.1);
}
.orion-bayer {
font-size: 9px;
color: rgba(140, 160, 255, 0.4);
letter-spacing: 0.1em;
margin-bottom: 3px;
}
.orion-name {
font-size: 15px;
font-weight: 500;
color: rgba(220, 230, 255, 0.92);
margin-bottom: 1px;
}
.orion-const {
font-size: 9.5px;
color: rgba(100, 120, 180, 0.6);
}
.orion-pill {
display: inline-block;
font-size: 8.5px;
padding: 2px 7px;
border-radius: 3px;
margin-top: 6px;
letter-spacing: 0.06em;
border: 1px solid rgba(100, 120, 200, 0.2);
color: rgba(140, 160, 220, 0.7);
}
.orion-data { padding: 10px 13px; }
.orion-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.orion-key {
font-size: 8.5px;
color: rgba(60, 80, 140, 0.7);
letter-spacing: 0.08em;
}
.orion-val {
font-size: 9.5px;
color: rgba(160, 180, 240, 0.75);
}
.orion-mag {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(100, 120, 200, 0.06);
}
.orion-mag-label {
font-size: 7.5px;
color: rgba(60, 80, 140, 0.5);
letter-spacing: 0.08em;
}
.orion-mag-stars {
display: flex;
gap: 2px;
}
.orion-mag-star {
font-size: 9.5px;
color: rgba(255, 220, 80, 0.7);
}
.orion-mag-dim {
color: rgba(60, 80, 140, 0.3);
}