Astral Sorcery Constellations
Maria
Created Nov 14, 2025
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="stars" id="starfield"></div>
<div class="container">
<div class="header">
<h1>✦ Astral Sorcery ✦</h1>
<p>Harness the power of the cosmos through ancient constellations</p>
</div>
<div class="constellations-grid">
<!-- Aevitas -->
<div class="constellation-card">
<div class="card-header">
<div class="constellation-icon">
<ion-icon name="leaf-outline"></ion-icon>
</div>
<div class="constellation-info">
<h3>Aevitas</h3>
<p class="constellation-type">Major Constellation</p>
</div>
</div>
<div class="constellation-visual">
<div class="constellation-star" style="top: 30%; left: 30%;"></div>
<div class="constellation-star" style="top: 50%; left: 50%;"></div>
<div class="constellation-star" style="top: 70%; left: 70%;"></div>
<div class="constellation-star" style="top: 40%; left: 70%;"></div>
<div class="constellation-line" style="top: 37%; left: 32%; width: 90px; transform: rotate(25deg);"></div>
<div class="constellation-line" style="top: 57%; left: 52%; width: 90px; transform: rotate(25deg);"></div>
<div class="constellation-line" style="top: 47%; left: 52%; width: 90px; transform: rotate(-25deg);"></div>
</div>
<div class="effects-list">
<div class="effect-item">
<ion-icon name="fitness-outline"></ion-icon>
<span class="effect-text">Regeneration & Health Boost</span>
</div>
<div class="effect-item">
<ion-icon name="leaf-outline"></ion-icon>
<span class="effect-text">Plant Growth Acceleration</span>
</div>
<div class="effect-item">
<ion-icon name="shield-outline"></ion-icon>
<span class="effect-text">Damage Reduction</span>
</div>
</div>
</div>
<!-- Armara -->
<div class="constellation-card">
<div class="card-header">
<div class="constellation-icon">
<ion-icon name="shield-checkmark-outline"></ion-icon>
</div>
<div class="constellation-info">
<h3>Armara</h3>
<p class="constellation-type">Major Constellation</p>
</div>
</div>
<div class="constellation-visual">
<div class="constellation-star" style="top: 25%; left: 50%;"></div>
<div class="constellation-star" style="top: 50%; left: 30%;"></div>
<div class="constellation-star" style="top: 50%; left: 70%;"></div>
<div class="constellation-star" style="top: 75%; left: 50%;"></div>
<div class="constellation-line" style="top: 35%; left: 45%; width: 80px; transform: rotate(-60deg);"></div>
<div class="constellation-line" style="top: 35%; left: 50%; width: 80px; transform: rotate(60deg);"></div>
<div class="constellation-line" style="top: 60%; left: 45%; width: 80px; transform: rotate(60deg);"></div>
<div class="constellation-line" style="top: 60%; left: 50%; width: 80px; transform: rotate(-60deg);"></div>
</div>
<div class="effects-list">
<div class="effect-item">
<ion-icon name="shield-outline"></ion-icon>
<span class="effect-text">Increased Armor & Toughness</span>
</div>
<div class="effect-item">
<ion-icon name="flash-off-outline"></ion-icon>
<span class="effect-text">Knockback Resistance</span>
</div>
<div class="effect-item">
<ion-icon name="medkit-outline"></ion-icon>
<span class="effect-text">Damage Absorption</span>
</div>
</div>
</div>
<!-- Discidia -->
<div class="constellation-card">
<div class="card-header">
<div class="constellation-icon">
<ion-icon name="flash-outline"></ion-icon>
</div>
<div class="constellation-info">
<h3>Discidia</h3>
<p class="constellation-type">Major Constellation</p>
</div>
</div>
<div class="constellation-visual">
<div class="constellation-star" style="top: 40%; left: 35%;"></div>
<div class="constellation-star" style="top: 40%; left: 65%;"></div>
<div class="constellation-star" style="top: 70%; left: 50%;"></div>
<div class="constellation-star" style="top: 60%; left: 35%;"></div>
<div class="constellation-star" style="top: 60%; left: 65%;"></div>
<div class="constellation-line" style="top: 41%; left: 38%; width: 110px; transform: rotate(0deg);"></div>
<div class="constellation-line" style="top: 52%; left: 42%; width: 70px; transform: rotate(-35deg);"></div>
<div class="constellation-line" style="top: 52%; left: 52%; width: 70px; transform: rotate(35deg);"></div>
</div>
<div class="effects-list">
<div class="effect-item">
<ion-icon name="flash-outline"></ion-icon>
<span class="effect-text">Increased Attack Damage</span>
</div>
<div class="effect-item">
<ion-icon name="nuclear-outline"></ion-icon>
<span class="effect-text">Critical Hit Chance</span>
</div>
<div class="effect-item">
<ion-icon name="bonfire-outline"></ion-icon>
<span class="effect-text">Projectile Damage Boost</span>
</div>
</div>
</div>
<!-- Vicio -->
<div class="constellation-card">
<div class="card-header">
<div class="constellation-icon">
<ion-icon name="rocket-outline"></ion-icon>
</div>
<div class="constellation-info">
<h3>Vicio</h3>
<p class="constellation-type">Major Constellation</p>
</div>
</div>
<div class="constellation-visual">
<div class="constellation-star" style="top: 30%; left: 25%;"></div>
<div class="constellation-star" style="top: 30%; left: 75%;"></div>
<div class="constellation-star" style="top: 50%; left: 50%;"></div>
<div class="constellation-star" style="top: 70%; left: 40%;"></div>
<div class="constellation-star" style="top: 70%; left: 60%;"></div>
<div class="constellation-line" style="top: 32%; left: 28%; width: 190px; transform: rotate(0deg);"></div>
<div class="constellation-line" style="top: 42%; left: 38%; width: 70px; transform: rotate(-35deg);"></div>
<div class="constellation-line" style="top: 42%; left: 52%; width: 70px; transform: rotate(35deg);"></div>
<div class="constellation-line" style="top: 62%; left: 42%; width: 60px; transform: rotate(0deg);"></div>
</div>
<div class="effects-list">
<div class="effect-item">
<ion-icon name="speedometer-outline"></ion-icon>
<span class="effect-text">Movement Speed Increase</span>
</div>
<div class="effect-item">
<ion-icon name="airplane-outline"></ion-icon>
<span class="effect-text">Creative Flight Enhancement</span>
</div>
<div class="effect-item">
<ion-icon name="walk-outline"></ion-icon>
<span class="effect-text">Step Assist</span>
</div>
</div>
</div>
</div>
<!-- Ritual Section -->
<div class="ritual-section">
<div class="ritual-content">
<h2 class="ritual-title">Celestial Attunement Ritual</h2>
<p style="color: #9999cc; margin-bottom: 2rem;">
Align yourself with the cosmic forces through the sacred ritual circle
</p>
<div class="ritual-circle">
<div class="circle-ring outer"></div>
<div class="circle-ring middle"></div>
<div class="circle-ring inner"></div>
<div class="ritual-symbols">
<div class="ritual-symbol">✦</div>
<div class="ritual-symbol">★</div>
<div class="ritual-symbol">✦</div>
<div class="ritual-symbol">★</div>
<div class="ritual-symbol">✦</div>
<div class="ritual-symbol">★</div>
<div class="ritual-symbol">✦</div>
<div class="ritual-symbol">★</div>
</div>
</div>
<div class="stats-grid">
<div class="stat-box">
<div class="stat-value">12</div>
<div class="stat-label">Constellations</div>
</div>
<div class="stat-box">
<div class="stat-value">5</div>
<div class="stat-label">Major</div>
</div>
<div class="stat-box">
<div class="stat-value">5</div>
<div class="stat-label">Weak</div>
</div>
<div class="stat-box">
<div class="stat-value">2</div>
<div class="stat-label">Dim</div>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0a0e27;
min-height: 100vh;
padding: 2rem;
position: relative;
overflow-x: hidden;
}
/* Starfield Background */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.header {
text-align: center;
margin-bottom: 4rem;
}
.header h1 {
font-size: 3.5rem;
color: #edafb8;
margin-bottom: 0.5rem;
text-shadow: 0 0 30px rgba(237, 175, 184, 0.8);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 30px rgba(237, 175, 184, 0.6); }
50% { text-shadow: 0 0 50px rgba(237, 175, 184, 1); }
}
.header p {
color: #9999cc;
font-size: 1.25rem;
}
.constellations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
}
.constellation-card {
background: linear-gradient(135deg, rgba(237, 175, 184, 0.05), rgba(237, 175, 184, 0.02));
border: 2px solid rgba(237, 175, 184, 0.2);
border-radius: 20px;
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.constellation-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(237, 175, 184, 0.1), transparent 60%);
animation: rotate 20s linear infinite;
pointer-events: none;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.constellation-card:hover {
border-color: rgba(237, 175, 184, 0.5);
box-shadow: 0 10px 40px rgba(237, 175, 184, 0.3);
transform: translateY(-5px);
}
.card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
}
.constellation-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #edafb8, #f5c7d0);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #0a0e27;
box-shadow: 0 0 20px rgba(237, 175, 184, 0.6);
}
.constellation-info h3 {
color: #edafb8;
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.constellation-type {
color: #9999cc;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.constellation-visual {
width: 100%;
height: 200px;
position: relative;
margin: 2rem 0;
background: rgba(10, 14, 39, 0.5);
border-radius: 12px;
border: 1px solid rgba(237, 175, 184, 0.1);
}
.constellation-star {
position: absolute;
width: 12px;
height: 12px;
background: #edafb8;
border-radius: 50%;
box-shadow: 0 0 15px rgba(237, 175, 184, 0.8);
animation: starPulse 2s ease-in-out infinite;
}
@keyframes starPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
.constellation-line {
position: absolute;
height: 2px;
background: linear-gradient(90deg, rgba(237, 175, 184, 0.4), rgba(237, 175, 184, 0.8), rgba(237, 175, 184, 0.4));
transform-origin: left center;
animation: linePulse 3s ease-in-out infinite;
}
@keyframes linePulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.effects-list {
position: relative;
z-index: 1;
}
.effect-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(237, 175, 184, 0.05);
border-radius: 8px;
margin-bottom: 0.75rem;
border-left: 3px solid #edafb8;
}
.effect-item ion-icon {
font-size: 1.25rem;
color: #edafb8;
}
.effect-text {
color: #ccccdd;
font-size: 0.95rem;
}
.ritual-section {
background: linear-gradient(135deg, rgba(237, 175, 184, 0.08), rgba(237, 175, 184, 0.03));
border: 2px solid rgba(237, 175, 184, 0.3);
border-radius: 24px;
padding: 3rem;
position: relative;
overflow: hidden;
}
.ritual-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(237, 175, 184, 0.15), transparent 70%);
transform: translate(-50%, -50%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
.ritual-content {
position: relative;
z-index: 1;
text-align: center;
}
.ritual-title {
font-size: 2rem;
color: #edafb8;
margin-bottom: 1rem;
}
.ritual-circle {
width: 300px;
height: 300px;
margin: 2rem auto;
position: relative;
}
.circle-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(237, 175, 184, 0.4);
border-radius: 50%;
animation: rotateRing 10s linear infinite;
}
.circle-ring.outer {
width: 280px;
height: 280px;
}
.circle-ring.middle {
width: 200px;
height: 200px;
animation-direction: reverse;
animation-duration: 8s;
}
.circle-ring.inner {
width: 120px;
height: 120px;
background: linear-gradient(135deg, rgba(237, 175, 184, 0.2), rgba(237, 175, 184, 0.1));
border-color: rgba(237, 175, 184, 0.6);
animation-duration: 6s;
}
@keyframes rotateRing {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.ritual-symbols {
position: absolute;
width: 100%;
height: 100%;
animation: rotateSymbols 15s linear infinite reverse;
}
.ritual-symbol {
position: absolute;
font-size: 1.5rem;
color: #edafb8;
}
.ritual-symbol:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.ritual-symbol:nth-child(2) { top: 15%; right: 15%; }
.ritual-symbol:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); }
.ritual-symbol:nth-child(4) { bottom: 15%; right: 15%; }
.ritual-symbol:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); }
.ritual-symbol:nth-child(6) { bottom: 15%; left: 15%; }
.ritual-symbol:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); }
.ritual-symbol:nth-child(8) { top: 15%; left: 15%; }
@keyframes rotateSymbols {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.stat-box {
background: rgba(237, 175, 184, 0.1);
border: 1px solid rgba(237, 175, 184, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #edafb8;
margin-bottom: 0.5rem;
}
.stat-label {
color: #9999cc;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.constellations-grid {
grid-template-columns: 1fr;
}
.ritual-circle {
width: 250px;
height: 250px;
}
}
// Generate starfield
const starfield = document.getElementById('starfield');
for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 3 + 's';
star.style.animationDuration = (Math.random() * 2 + 2) + 's';
starfield.appendChild(star);
}
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!