rose dryad - css fairy ring

🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄 🍄

You have stepped into a fairy ring.

HTML:

<div class="fairy-circle">
  <div class="mushroom-ring-wrapper">
  <div class="mushroom-ring">
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
    <span>🍄</span>
  </div>
</div>
  <div class="fairy-content">
    You have stepped into a fairy ring.
  </div>
</div>

CSS:

.fairy-circle {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 40px auto;
  border-radius: 50%;
  background: #FFFDEB; /* inner circle color */
  box-shadow: inset 0 0 8px rgba(120,180,120,0.2);
}

.mushroom-ring {
  position: absolute;
  inset: 0;
}

.mushroom-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%; 
  font-size: 16px; /* mushroom size */
  --rotate: 0deg;
  filter: drop-shadow(0 0 0 transparent);
}

/* Mushroom positions */
.mushroom-ring span:nth-child(1)  { transform: rotate(0deg) translate(90px, 0px) rotate(0deg); --rotate: 0deg; }
.mushroom-ring span:nth-child(2)  { transform: rotate(22.5deg) translate(90px, 0px) rotate(-22.5deg); --rotate: 22.5deg; }
.mushroom-ring span:nth-child(3)  { transform: rotate(45deg) translate(90px, 0px) rotate(-45deg); --rotate: 45deg; }
.mushroom-ring span:nth-child(4)  { transform: rotate(67.5deg) translate(90px, 0px) rotate(-67.5deg); --rotate: 67.5deg; }
.mushroom-ring span:nth-child(5)  { transform: rotate(90deg) translate(90px, 0px) rotate(-90deg); --rotate: 90deg; }
.mushroom-ring span:nth-child(6)  { transform: rotate(112.5deg) translate(90px, 0px) rotate(-112.5deg); --rotate: 112.5deg; }
.mushroom-ring span:nth-child(7)  { transform: rotate(135deg) translate(90px, 0px) rotate(-135deg); --rotate: 135deg; }
.mushroom-ring span:nth-child(8)  { transform: rotate(157.5deg) translate(90px, 0px) rotate(-157.5deg); --rotate: 157.5deg; }
.mushroom-ring span:nth-child(9)  { transform: rotate(180deg) translate(90px, 0px) rotate(-180deg); --rotate: 180deg; }
.mushroom-ring span:nth-child(10) { transform: rotate(202.5deg) translate(90px, 0px) rotate(-202.5deg); --rotate: 202.5deg; }
.mushroom-ring span:nth-child(11) { transform: rotate(225deg) translate(90px, 0px) rotate(-225deg); --rotate: 225deg; }
.mushroom-ring span:nth-child(12) { transform: rotate(247.5deg) translate(90px, 0px) rotate(-247.5deg); --rotate: 247.5deg; }
.mushroom-ring span:nth-child(13) { transform: rotate(270deg) translate(90px, 0px) rotate(-270deg); --rotate: 270deg; }
.mushroom-ring span:nth-child(14) { transform: rotate(292.5deg) translate(90px, 0px) rotate(-292.5deg); --rotate: 292.5deg; }
.mushroom-ring span:nth-child(15) { transform: rotate(315deg) translate(90px, 0px) rotate(-315deg); --rotate: 315deg; }
.mushroom-ring span:nth-child(16) { transform: rotate(337.5deg) translate(90px, 0px) rotate(-337.5deg); --rotate: 337.5deg; }

.mushroom-ring-wrapper {
  position: absolute;
  inset: 0;
  transform: translate(-11px, -5px); /* move left and up together */
}


/* Glow + pulse only on hover */
.fairy-circle:hover .mushroom-ring span {
  filter:
    drop-shadow(0 0 1px rgba(200,170,255,0.7))
    drop-shadow(0 0 3px rgba(160,120,255,0.5)); 
  animation: pulse 2s ease-in-out infinite; 
}

/* Odd mushrooms: start immediately */
.fairy-circle:hover .mushroom-ring span:nth-child(odd) {
  animation-delay: 0s;
}

/* Even mushrooms: start slightly later */
.fairy-circle:hover .mushroom-ring span:nth-child(even) {
  animation-delay: 0.5s;
}


/* Pulse keyframes */
@keyframes pulse {
  0%, 100% { transform: rotate(var(--rotate)) translate(90px) rotate(calc(-1 * var(--rotate))) scale(1); }
  50%      { transform: rotate(var(--rotate)) translate(90px) rotate(calc(-1 * var(--rotate))) scale(1.15); }
}

/* Inner text */
.fairy-content {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  padding: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.fairy-circle:hover .fairy-content {
  opacity: 1;
  transform: scale(1);
}

CSS Fairy Ring