پیش‌نمایش زنده
کد HTML 
<div class="stage" role="img">
  <svg
    class="svg"
    viewBox="0 0 1200 360"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="false"
    role="img"
    preserveAspectRatio="xMidYMid meet"
  >
    <defs>
      <linearGradient id="wireGrad" x1="0" x2="1" y1="0" y2="0">
        <stop offset="0%" stop-color="#1f2326"></stop>
        <stop offset="50%" stop-color="#2f3438"></stop>
        <stop offset="100%" stop-color="#16181a"></stop>
      </linearGradient>

      <linearGradient id="wireStripe" x1="0" x2="1">
        <stop offset="0%" stop-color="rgba(255,255,255,0.03)"></stop>
        <stop offset="50%" stop-color="rgba(255,255,255,0.06)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255,0.02)"></stop>
      </linearGradient>

      <radialGradient id="bulbGlow" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stop-color="white" stop-opacity="0.9"></stop>
        <stop offset="45%" stop-color="white" stop-opacity="0.28"></stop>
        <stop offset="100%" stop-color="white" stop-opacity="0"></stop>
      </radialGradient>

      <linearGradient id="glass" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="rgba(255,255,255,0.95)"></stop>
        <stop offset="30%" stop-color="rgba(255,255,255,0.18)"></stop>
        <stop offset="100%" stop-color="rgba(255,255,255,0.02)"></stop>
      </linearGradient>

      <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
        <fedropshadow
          dx="0"
          dy="6"
          stdDeviation="10"
          flood-color="#000"
          flood-opacity="0.55"
        ></fedropshadow>
      </filter>

      <filter id="glowBlur" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="12" result="blur"></feGaussianBlur>
        <feMerge>
          <feMergeNode in="blur"></feMergeNode>
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
    </defs>

    <g transform="translate(600,160)">
      <ellipse class="back-spot" rx="420" ry="90" fill="#3b6cff"></ellipse>
    </g>

    <g class="wire-wrap">
      <path
        d="M40 90 C 160 30, 340 150, 480 90 S 740 40, 1160 95"
        class="wire-base wire-shadow"
        stroke="black"
        stroke-width="22"
        stroke-linecap="round"
        fill="none"
        opacity="0.18"
      ></path>

      <path
        d="M40 80 C 160 20, 340 140, 480 80 S 740 30, 1160 85"
        class="wire-base"
        stroke="url(#wireGrad)"
      ></path>

      <path
        d="M36 78 C 160 18, 340 138, 480 78 S 740 28, 1160 83"
        stroke="url(#wireStripe)"
        stroke-width="3"
        fill="none"
        stroke-linecap="round"
        opacity="0.9"
      ></path>

      <path
        d="M40 84 C 160 24, 340 144, 480 84 S 740 34, 1160 89"
        stroke="#0c1114"
        stroke-width="2"
        fill="none"
        opacity="0.9"
      ></path>
    </g>

    <g class="lamp" transform="translate(100,105)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="28"
          ry="36"
          style="--on:#ff5a5a; --off:#211313; --dur:2.8s; --delay:0s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-8"
          rx="20"
          ry="28"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-36"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
        stroke-linecap="round"
      ></line>
      <rect class="socket" x="-22" y="-14" width="44" height="18" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(240,143)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="30"
          ry="38"
          style="--on:#ffd966; --off:#2b2208; --dur:2.1s; --delay:0.18s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-9"
          rx="22"
          ry="30"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-60"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-20" y="-14" width="40" height="16" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(380,127)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="26"
          ry="34"
          style="--on:#7fe08a; --off:#072011; --dur:3.0s; --delay:0.6s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-8"
          rx="18"
          ry="24"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-24"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-22" y="-14" width="44" height="18" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(540,108)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="29"
          ry="36"
          style="--on:#6fb3ff; --off:#061421; --dur:1.9s; --delay:0.12s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-8"
          rx="22"
          ry="30"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-44"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-21" y="-14" width="42" height="17" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(700,63)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="27"
          ry="36"
          style="--on:#ff6bd6; --off:#2b0916; --dur:2.4s; --delay:0.45s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-8"
          rx="20"
          ry="28"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-18"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-23" y="-14" width="46" height="18" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(860,110)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="31"
          ry="40"
          style="--on:#ffd1a3; --off:#2b1606; --dur:2.9s; --delay:0.9s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-10"
          rx="22"
          ry="30"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-56"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-22" y="-14" width="44" height="18" rx="4"></rect>
    </g>

    <g class="lamp" transform="translate(1040,104)">
      <g class="bulb bulb-base" transform="translate(0,34) scale(1)">
        <ellipse
          class="glass"
          cx="0"
          cy="-6"
          rx="26"
          ry="34"
          style="--on:#9effb8; --off:#072314; --dur:2.0s; --delay:0.3s; fill: var(--off);"
        ></ellipse>
        <ellipse
          cx="0"
          cy="-8"
          rx="18"
          ry="24"
          fill="url(#bulbGlow)"
          class="glow"
        ></ellipse>
      </g>
      <line
        class="hanger"
        x1="0"
        y1="-28"
        x2="0"
        y2="-6"
        stroke="#0f1214"
        stroke-width="4"
      ></line>
      <rect class="socket" x="-20" y="-14" width="40" height="16" rx="4"></rect>
    </g>

    <g transform="translate(0,0)" opacity="0.45">
      <ellipse
        cx="100"
        cy="220"
        rx="40"
        ry="10"
        fill="#000"
        opacity="0.15"
      ></ellipse>
      <ellipse
        cx="240"
        cy="260"
        rx="44"
        ry="11"
        fill="#000"
        opacity="0.14"
      ></ellipse>
      <ellipse
        cx="380"
        cy="234"
        rx="36"
        ry="9"
        fill="#000"
        opacity="0.13"
      ></ellipse>
      <ellipse
        cx="540"
        cy="216"
        rx="46"
        ry="12"
        fill="#000"
        opacity="0.14"
      ></ellipse>
      <ellipse
        cx="700"
        cy="238"
        rx="42"
        ry="10"
        fill="#000"
        opacity="0.13"
      ></ellipse>
      <ellipse
        cx="860"
        cy="208"
        rx="48"
        ry="12"
        fill="#000"
        opacity="0.14"
      ></ellipse>
      <ellipse
        cx="1040"
        cy="226"
        rx="40"
        ry="10"
        fill="#000"
        opacity="0.13"
      ></ellipse>
    </g>
  </svg>
</div>
کد CSS 
:root {
  --bg-1: #071022;
  --bg-2: #0b1530;
  --card-pad: 28px;
  --wire-color-1: #2a2f33;
  --wire-color-2: #15181a;
  --wire-stroke: 10;
  --bulb-width: 40;
}
.stage {
  width: min(1100px);
  padding: var(--card-pad);
}
.title {
  font-size: 16px;
  font-weight: 600;
  margin: 6px 0 12px;
  color: #dfeeff;
}
.svg {
  width: 100%;
  height: auto;
  display: block;
}
.wire-base {
  fill: none;
  stroke-width: var(--wire-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wire-shadow {
  opacity: 0.35;
  filter: blur(6px);
}
.wire-wrap {
  transform-origin: 50% 0;
  animation: sway 6.8s ease-in-out infinite;
}
.socket {
  fill: #222;
  stroke: #0d0d0d;
  stroke-width: 1;
}
.bulb {
  transform-box: fill-box;
  transform-origin: 50% 40%;
  cursor: default;
}
@keyframes bulb-blink {
  0% {
    filter: none;
    opacity: 1;
  }
  6% {
    fill: var(--on);
    filter: drop-shadow(0 0 10px var(--on));
  }
  18% {
    fill: var(--on);
    filter: drop-shadow(0 0 18px var(--on));
  }
  35% {
    fill: var(--off);
    filter: none;
    opacity: 0.92;
  }
  60% {
    fill: var(--off);
    opacity: 0.95;
  }
  80% {
    fill: var(--on);
    filter: drop-shadow(0 0 12px var(--on));
    opacity: 1;
  }
  100% {
    fill: var(--off);
    filter: none;
    opacity: 0.96;
  }
}
.bulb .glass {
  transition: fill 0.12s linear;
  animation: bulb-blink var(--dur, 2.6s) var(--delay, 0s) infinite ease-in-out;
}
.glass-highlight {
  opacity: 0.9;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hanger {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hanger-sway 7.2s ease-in-out infinite;
}
@keyframes hanger-sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(0.9deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.glow {
  mix-blend-mode: screen;
  opacity: 0.95;
  transition: opacity 0.12s linear;
  pointer-events: none;
}
@media (max-width: 720px) {
  :root {
    --card-pad: 16px;
    --wire-stroke: 8;
    --bulb-width: 34;
  }
  .title {
    font-size: 15px;
  }
}
@media (max-width: 420px) {
  :root {
    --wire-stroke: 6;
    --bulb-width: 28;
  }
  .title {
    font-size: 14px;
  }
}
.bulb-base {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}
.back-spot {
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(18px);
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06