top.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" font-family="'Segoe UI',Helvetica,Arial,sans-serif">
  <title>Mutant Madness — Top Broadcast (Season Finale, Gen 8)</title>
  <desc>Animated reality-show broadcast of SolFunMeme.RealityShow: the rating-leading channel "Mutant Madness" evolves the all-false seed genome into the all-true target across 8 generations, fitness climbing 0 to 8, clearing the zero-trust firewall as a verified proof-meme (humor grade 17/2).</desc>

  <!-- ===================== defs ===================== -->
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0b0f2a"/>
      <stop offset="1" stop-color="#1a0b2e"/>
    </linearGradient>
    <linearGradient id="bar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ff5ec7"/>
      <stop offset="1" stop-color="#7b2ff7"/>
    </linearGradient>
    <linearGradient id="scan" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"  stop-color="#00ffd0" stop-opacity="0"/>
      <stop offset="0.5" stop-color="#00ffd0" stop-opacity="0.55"/>
      <stop offset="1"  stop-color="#00ffd0" stop-opacity="0"/>
    </linearGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <!-- ===================== backdrop ===================== -->
  <rect width="900" height="600" fill="url(#bg)"/>
  <!-- faint grid -->
  <g stroke="#2a2a55" stroke-width="1" opacity="0.35">
    <line x1="0" y1="150" x2="900" y2="150"/>
    <line x1="0" y1="300" x2="900" y2="300"/>
    <line x1="0" y1="450" x2="900" y2="450"/>
  </g>
  <!-- travelling scanline (the "neural display" refresh) -->
  <rect x="-300" y="0" width="300" height="600" fill="url(#scan)" opacity="0.5">
    <animate attributeName="x" values="-300;900" dur="6s" repeatCount="indefinite"/>
  </rect>

  <!-- ===================== channel chrome ===================== -->
  <rect x="20" y="18" width="860" height="48" rx="10" fill="#11163a" stroke="#7b2ff7" stroke-width="2"/>
  <text x="42" y="50" font-size="26" font-weight="700" fill="#ff5ec7" filter="url(#glow)">MUTANT MADNESS</text>
  <text x="300" y="50" font-size="15" fill="#9fb3ff">★ Tonight's #1 — Proof-Meme Reality Network</text>

  <!-- LIVE badge -->
  <g>
    <rect x="772" y="28" width="92" height="28" rx="14" fill="#e10600"/>
    <circle cx="790" cy="42" r="6" fill="#fff">
      <animate attributeName="opacity" values="1;0.15;1" dur="1.2s" repeatCount="indefinite"/>
    </circle>
    <text x="804" y="47" font-size="16" font-weight="700" fill="#fff">LIVE</text>
  </g>

  <!-- ===================== left: genome evolving ===================== -->
  <text x="42" y="104" font-size="16" fill="#9fb3ff" letter-spacing="1">CONTESTANT GENOME — survival of the wittiest</text>

  <!-- 8 loci: each flips from cringe(red) to cleared(green), one per generation.
       Locus k flips at t = 1 + k seconds (over a 9s loop). -->
  <g>
    <!-- locus generator: x = 50 + k*92 -->
    <!-- k=0 -->
    <g transform="translate(50,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="1s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <animate attributeName="fill" to="#d0ffe0" begin="1s" dur="0.4s" fill="freeze"/>
        <set attributeName="fill" to="#ffd0e8" begin="9s"/>
      </text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="1s"/>
        <set attributeName="opacity" to="0" begin="9s"/>
      </text>
    </g>
    <!-- k=1 -->
    <g transform="translate(142,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="2s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="2s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="2s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=2 -->
    <g transform="translate(234,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="3s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="3s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="3s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=3 -->
    <g transform="translate(326,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="4s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="4s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="4s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=4 -->
    <g transform="translate(418,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="5s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="5s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="5s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=5 -->
    <g transform="translate(510,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="6s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="6s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="6s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=6 -->
    <g transform="translate(602,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="7s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="7s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="7s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
    <!-- k=7 -->
    <g transform="translate(694,120)">
      <rect width="78" height="78" rx="10" fill="#7a1029" stroke="#ff5ec7" stroke-width="2">
        <animate attributeName="fill" to="#0f7a3a" begin="8s" dur="0.4s" fill="freeze"/>
        <animate attributeName="fill" to="#7a1029" begin="9s" dur="0.01s" fill="freeze"/>
      </rect>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#ffd0e8">0
        <set attributeName="opacity" to="0" begin="8s"/><set attributeName="opacity" to="1" begin="9s"/></text>
      <text x="39" y="50" font-size="34" font-weight="700" text-anchor="middle" fill="#d0ffe0" opacity="0">1
        <set attributeName="opacity" to="1" begin="8s"/><set attributeName="opacity" to="0" begin="9s"/></text>
    </g>
  </g>

  <!-- generation + fitness HUD -->
  <text x="800" y="138" font-size="14" fill="#9fb3ff" text-anchor="end">GEN</text>
  <g font-size="30" font-weight="700" fill="#00ffd0" text-anchor="end" filter="url(#glow)">
    <text x="860" y="150">0<set attributeName="opacity" to="0" begin="1s"/><set attributeName="opacity" to="1" begin="9s"/></text>
    <text x="860" y="150" opacity="0">1<set attributeName="opacity" to="1" begin="1s"/><set attributeName="opacity" to="0" begin="2s"/></text>
    <text x="860" y="150" opacity="0">2<set attributeName="opacity" to="1" begin="2s"/><set attributeName="opacity" to="0" begin="3s"/></text>
    <text x="860" y="150" opacity="0">3<set attributeName="opacity" to="1" begin="3s"/><set attributeName="opacity" to="0" begin="4s"/></text>
    <text x="860" y="150" opacity="0">4<set attributeName="opacity" to="1" begin="4s"/><set attributeName="opacity" to="0" begin="5s"/></text>
    <text x="860" y="150" opacity="0">5<set attributeName="opacity" to="1" begin="5s"/><set attributeName="opacity" to="0" begin="6s"/></text>
    <text x="860" y="150" opacity="0">6<set attributeName="opacity" to="1" begin="6s"/><set attributeName="opacity" to="0" begin="7s"/></text>
    <text x="860" y="150" opacity="0">7<set attributeName="opacity" to="1" begin="7s"/><set attributeName="opacity" to="0" begin="8s"/></text>
    <text x="860" y="150" opacity="0">8<set attributeName="opacity" to="1" begin="8s"/><set attributeName="opacity" to="0" begin="9s"/></text>
  </g>

  <!-- ===================== fitness bar ===================== -->
  <text x="42" y="238" font-size="16" fill="#9fb3ff">FITNESS (loci matching target) — ratings only climb</text>
  <rect x="42" y="250" width="640" height="26" rx="13" fill="#11163a" stroke="#2a2a55"/>
  <rect x="42" y="250" width="0" height="26" rx="13" fill="url(#bar)">
    <animate attributeName="width" values="0;80;160;240;320;400;480;560;640;640"
             keyTimes="0;0.111;0.222;0.333;0.444;0.556;0.667;0.778;0.889;1"
             dur="9s" repeatCount="indefinite" calcMode="linear"/>
  </rect>
  <text x="690" y="270" font-size="18" font-weight="700" fill="#00ffd0">/ 8</text>

  <!-- ===================== firewall gate ===================== -->
  <text x="42" y="332" font-size="16" fill="#9fb3ff">ZERO-TRUST FIREWALL — drop by default</text>
  <g transform="translate(42,344)">
    <rect width="300" height="86" rx="12" fill="#11163a" stroke="#2a2a55" stroke-width="2"/>
    <!-- DROP state (gen 0..7) -->
    <g>
      <set attributeName="opacity" to="0" begin="8s"/><set attributeName="opacity" to="1" begin="9s"/>
      <text x="20" y="40" font-size="22" font-weight="700" fill="#ff5b5b">⛔ DROP</text>
      <text x="20" y="68" font-size="14" fill="#ff9d9d">unverified · cringe leaked</text>
    </g>
    <!-- ACCEPT state (finale, gen 8) -->
    <g opacity="0">
      <set attributeName="opacity" to="1" begin="8s"/><set attributeName="opacity" to="0" begin="9s"/>
      <rect width="300" height="86" rx="12" fill="#0f7a3a" opacity="0.25"/>
      <text x="20" y="40" font-size="22" font-weight="700" fill="#36ff9a">✅ ACCEPT</text>
      <text x="20" y="68" font-size="14" fill="#a8ffd0">witness verified · gateway cleared</text>
    </g>
  </g>

  <!-- ===================== verified proof-meme stamp ===================== -->
  <g transform="translate(360,344)" opacity="0">
    <set attributeName="opacity" to="1" begin="8s"/><set attributeName="opacity" to="0" begin="9s"/>
    <g transform="rotate(-8)">
      <animateTransform attributeName="transform" type="scale" values="2.4;1" dur="0.5s" begin="8s" additive="sum"/>
      <rect width="200" height="86" rx="12" fill="none" stroke="#36ff9a" stroke-width="3"/>
      <text x="100" y="36" font-size="20" font-weight="800" fill="#36ff9a" text-anchor="middle">PROOF-MEME</text>
      <text x="100" y="58" font-size="14" fill="#a8ffd0" text-anchor="middle">VERIFIED</text>
      <text x="100" y="76" font-size="12" fill="#9fb3ff" text-anchor="middle">humor grade 17/2 = 8.5</text>
    </g>
  </g>

  <!-- ===================== ratings leaderboard ===================== -->
  <text x="600" y="332" font-size="16" fill="#9fb3ff" text-anchor="start">TONIGHT'S RATINGS</text>
  <g transform="translate(600,344)">
    <!-- Mutant Madness: 7 (leader) -->
    <text x="0" y="14" font-size="13" fill="#ffd0e8">Mutant Madness</text>
    <rect x="0" y="20" width="0" height="16" rx="8" fill="#ff5ec7">
      <animate attributeName="width" from="0" to="252" dur="1s" begin="0.2s" fill="freeze"/>
    </rect>
    <text x="262" y="33" font-size="13" font-weight="700" fill="#ff5ec7">7 ★</text>
    <!-- Selection Sunday: 5 -->
    <text x="0" y="56" font-size="13" fill="#9fb3ff">Selection Sunday</text>
    <rect x="0" y="62" width="0" height="16" rx="8" fill="#7b2ff7">
      <animate attributeName="width" from="0" to="180" dur="1s" begin="0.4s" fill="freeze"/>
    </rect>
    <text x="190" y="75" font-size="13" fill="#9fb3ff">5</text>
    <!-- Genesis Network: 3 -->
    <text x="0" y="98" font-size="13" fill="#9fb3ff">Genesis Network</text>
    <rect x="0" y="104" width="0" height="16" rx="8" fill="#4458c0">
      <animate attributeName="width" from="0" to="108" dur="1s" begin="0.6s" fill="freeze"/>
    </rect>
    <text x="118" y="117" font-size="13" fill="#9fb3ff">3</text>
  </g>

  <!-- ===================== advertiser ticker ===================== -->
  <rect x="0" y="470" width="900" height="40" fill="#11163a"/>
  <rect x="0" y="470" width="900" height="2" fill="#7b2ff7"/>
  <rect x="0" y="508" width="900" height="2" fill="#7b2ff7"/>
  <text y="496" font-size="15" fill="#00ffd0">
    <animate attributeName="x" from="900" to="-1500" dur="16s" repeatCount="indefinite"/>
    SPONSOR ALERT ▸ Ad budget 1500 split by rating share ▸ Mutant Madness cashes the biggest cheque: 700 ▸ money follows eyeballs ▸ whole budget conserved across the lineup (1500) ▸ every message is a theorem ▸ every meme is a morphism ▸
  </text>

  <!-- ===================== caption / finale banner ===================== -->
  <g text-anchor="middle">
    <!-- evolving caption -->
    <text x="450" y="552" font-size="20" fill="#9fb3ff">
      <set attributeName="opacity" to="0" begin="8s"/><set attributeName="opacity" to="1" begin="9s"/>
      …mutating strategies, evolving a new solution…
    </text>
    <!-- finale banner -->
    <text x="450" y="552" font-size="24" font-weight="800" fill="#36ff9a" opacity="0" filter="url(#glow)">
      <set attributeName="opacity" to="1" begin="8s"/><set attributeName="opacity" to="0" begin="9s"/>
      🏆 SEASON FINALE — FIREWALL BREAKTHROUGH, LIVE ON AIR 🏆
    </text>
  </g>
  <text x="450" y="582" font-size="13" fill="#5a6aa8" text-anchor="middle">SolFunMeme.RealityShow · broadcast targetStrategy seed 8 · finale_on_air : cleared = true</text>
</svg>