A!leys Galerie

using UnityEngine;
using UnityEngine.Rendering.Universal;
using UnityEngine.Tilemap;
using UnityEngine.UI;

[ExecuteInEditMode]
[RequireComponent(typeof( TilemapRenderer ))]
public class AileysDynamicFogOfWar : MonoBehaviour
{
    [Header( "Fog Settings" )]
    [SerializeField] private float revealSpeed = 0.5f;
    [SerializeField] private float maxVisionRadius = 5f;
    [SerializeField] private float distortionIntensity = 0.3f;
    [SerializeField] private bool enableDarkMode = false;
    [SerializeField] private Color fogColor = new Color( 0f, 0f, 0f, 0.7f );

    [Header( "Scan Settings" )]
    [SerializeField] private float scanCooldown = 1f;
    [SerializeField] private float scanRadius = 3f;
    [SerializeField] private AnimationCurve scanPulse;

    [Header( "References" )]
    [SerializeField] private Tilemap visionTilemap;
    [SerializeField] private Tilemap revealedTilemap;
    [SerializeField] private Tilemap scanTilemap;
    [SerializeField] private TileBase fogTile;
    [SerializeField] private TileBase revealedTile;
    [SerializeField] private TileBase scanTile;
    [SerializeField] private Color darkModeFogColor = new Color( 0f, 0f, 0f, 0.9f );
    [SerializeField] private Color darkModeRevealedColor = new Color( 0.1f, 0.1f, 0.1f );

    private TilemapRenderer visionRenderer;
    private TilemapRenderer revealedRenderer;
    private TilemapRenderer scanRenderer;

    private Vector3Int playerPosition;
    private float timeSinceLastScan;
    private float currentScanPulse;

    private void Awake()
    {
        if ( visionTilemap == null || revealedTilemap == null || scanTilemap == null )
        {
            Debug.LogError( "Missing required Tilemap references!" );
            return;
        }

        visionRenderer = visionTilemap.GetComponent<TilemapRenderer>();
        revealedRenderer = revealedTilemap.GetComponent<TilemapRenderer>();
        scanRenderer = scanTilemap.GetComponent<TilemapRenderer>();

        visionRenderer.tilingRule = TilemapTilingRule.Staggered;
        revealedRenderer.tilingRule = TilemapTilingRule.Staggered;
        scanRenderer.tilingRule = TilemapTilingRule.Staggered;

        if ( fogTile == null )
        {
            fogTile = new Tile();
            fogTile.sprite = null;
            fogTile.color = enableDarkMode ? darkModeFogColor : fogColor;
        }

        if ( revealedTile == null )
        {
            revealedTile = new Tile();
            revealedTile.sprite = null;
            revealedTile.color = enableDarkMode ? darkModeRevealedColor : Color.white;
        }

        if ( scanTile == null )
        {
            scanTile = new Tile();
            scanTile.sprite = null;
            scanTile.color = Color.yellow;
        }

        UpdateFogTiles();
    }

    private void Update()
    {
        if ( Application.isPlaying )
        {
            timeSinceLastScan += Time.deltaTime;

            if ( timeSinceLastScan >= scanCooldown )
            {
                TriggerScan();
            }

            currentScanPulse = Mathf.PingPong( Time.time * 2f, 1f ) * scanPulse.Evaluate( 0.5f );
        }
    }

    private void UpdateFogTiles()
    {
        Color fogColor = enableDarkMode ? darkModeFogColor : this.fogColor;
        fogTile.color = fogColor;

        Color revealedColor = enableDarkMode ? darkModeRevealedColor : Color.white;
        revealedTile.color = revealedColor;
    }

    private void TriggerScan()
    {
        timeSinceLastScan = 0f;
        ScanArea( playerPosition, scanRadius );
    }

    private void ScanArea( Vector3Int center, float radius )
    {
        float scanProgress = Mathf.Clamp01( ( Time.time * 5f ) % 1f );
        Vector3Int min = center - Vector3Int.CeilToInt( Vector3Int.one * radius );
        Vector3Int max = center + Vector3Int.CeilToInt( Vector3Int.one * radius );

        for ( int x = min.x; x <= max.x; x++ )
        {
            for ( int z = min.z; z <= max.z; z++ )
            {
                Vector3Int pos = new Vector3Int( x, 0, z );
                float distance = Vector3.Distance( center, pos );

                if ( distance <= radius )
                {
                    float revealProgress = Mathf.Clamp01( ( radius - distance ) / radius * 2f );

                    // Update vision tilemap
                    visionTilemap.SetTile( pos, fogTile );

                    // Update revealed tilemap with progression
                    Tile progressTile = new Tile();
                    progressTile.color = revealedTile.color;
                    progressTile.color.a = Mathf.Lerp( 0f, 1f, revealProgress );
                    revealedTilemap.SetTile( pos, progressTile );
                }
            }
        }

        // Apply scan effect to the current scan position
        Tile scanEffect = new Tile();
        scanEffect.color = scanTile.color;
        scanEffect.color.a = currentScanPulse;
        scanTilemap.SetTile( playerPosition, scanEffect );
    }

    public void SetPlayerPosition( Vector3Int position )
    {
        playerPosition = position;
        ScanArea( position, maxVisionRadius );
    }

    private void OnDrawGizmos()
    {
        if ( Application.isPlaying )
        {
            Gizmos.color = Color.red;
            Gizmos.DrawWireSphere( transform.position, maxVisionRadius );
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmic Spinners — 12+ CSS-Only Loading Animations</title>
  <style>
    :root {
      --bg-light: #f5f7fa;
      --text-light: #333;
      --accent-light: #6c5ce7;
      --bg-dark: #1a1a2e;
      --text-dark: #f5f7fa;
      --accent-dark: #bb86fc;
    }

    .dark-mode {
      --bg: var(--bg-dark);
      --text: var(--text-dark);
      --accent: var(--accent-dark);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }

    body {
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      min-height: 100vh;
      padding: 2rem;
      transition: background 0.5s, color 0.5s;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      margin-bottom: 3rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      background: linear-gradient(90deg, var(--accent), #9333ea);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .subtitle {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 1rem;
    }

    .toggle-container {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .toggle-btn {
      padding: 0.5rem 1rem;
      background: rgba(255, 255, 255, 0.2);
      color: var(--text);
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.3s;
    }

    .toggle-btn.active {
      background: var(--accent);
      color: white;
    }

    .spinner-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .spinner-card {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 1rem;
      padding: 1.5rem;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .spinner-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .spinner-card h3 {
      margin-bottom: 1rem;
      font-size: 1.3rem;
    }

    .spinner-container {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 1rem 0;
    }

    .spinner {
      width: 50px;
      height: 50px;
      position: relative;
    }

    /* Spinner 1: Fade Pulses */
    .spinner-1 .dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--accent);
      border-radius: 50%;
      animation: fadePulse 1.5s infinite ease-in-out;
    }

    .spinner-1 .dot:nth-child(2) { animation-delay: 0.3s; }
    .spinner-1 .dot:nth-child(3) { animation-delay: 0.6s; }
    .spinner-1 .dot:nth-child(4) { animation-delay: 0.9s; }

    @keyframes fadePulse {
      0%, 100% { opacity: 0.4; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1); }
    }

    /* Spinner 2: Orbiting Circles */
    .spinner-2 {
      position: relative;
    }

    .spinner-2 .circle {
      position: absolute;
      width: 15px;
      height: 15px;
      background: var(--accent);
      border-radius: 50%;
      animation: orbit 3s infinite linear;
    }

    .spinner-2 .circle:nth-child(1) { animation-delay: 0.1s; }
    .spinner-2 .circle:nth-child(2) { animation-delay: 0.2s; }
    .spinner-2 .circle:nth-child(3) { animation-delay: 0.3s; }
    .spinner-2 .circle:nth-child(4) { animation-delay: 0.4s; }

    @keyframes orbit {
      0% { transform: rotate(0deg) translate(30px, 0); }
      100% { transform: rotate(360deg) translate(30px, 0); }
    }

    /* Spinner 3: Wave Pulse */
    .spinner-3 {
      position: relative;
      overflow: hidden;
    }

    .spinner-3 .wave {
      position: absolute;
      width: 100%;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
      animation: wavePulse 1s infinite ease-in-out;
    }

    @keyframes wavePulse {
      0%, 100% { height: 2px; transform: translateX(-50%); }
      50% { height: 4px; transform: translateX(50%); }
    }

    /* Spinner 4: Bouncing Dots */
    .spinner-4 .dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--accent);
      border-radius: 50%;
      animation: bounce 1.5s infinite ease-in-out;
    }

    .spinner-4 .dot:nth-child(1) { top: 20px; left: 20px; animation-delay: 0s; }
    .spinner-4 .dot:nth-child(2) { top: 20px; right: 20px; animation-delay: 0.2s; }
    .spinner-4 .dot:nth-child(3) { bottom: 20px; left: 20px; animation-delay: 0.4s; }
    .spinner-4 .dot:nth-child(4) { bottom: 20px; right: 20px; animation-delay: 0.6s; }

    @keyframes bounce {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-20px) scale(1.2); }
    }

    /* Spinner 5: Rotating Bars */
    .spinner-5 {
      position: relative;
    }

    .spinner-5 .bar {
      position: absolute;
      width: 4px;
      height: 20px;
      background: var(--accent);
      border-radius: 2px;
      animation: rotate 1.5s infinite linear;
    }

    .spinner-5 .bar:nth-child(1) { transform-origin: 50% 0; animation-delay: 0.1s; }
    .spinner-5 .bar:nth-child(2) { transform-origin: 50% 0; animation-delay: 0.2s; }
    .spinner-5 .bar:nth-child(3) { transform-origin: 50% 0; animation-delay: 0.3s; }
    .spinner-5 .bar:nth-child(4) { transform-origin: 50% 0; animation-delay: 0.4s; }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Spinner 6: Flickering Stars */
    .spinner-6 .star {
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--accent);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: flicker 1.5s infinite ease-in-out;
    }

    .spinner-6 .star:nth-child(1) { top: 10px; left: 10px; animation-delay: 0s; }
    .spinner-6 .star:nth-child(2) { top: 10px; right: 10px; animation-delay: 0.2s; }
    .spinner-6 .star:nth-child(3) { bottom: 10px; left: 10px; animation-delay: 0.4s; }
    .spinner-6 .star:nth-child(4) { bottom: 10px; right: 10px; animation-delay: 0.6s; }

    @keyframes flicker {
      0%, 100%, 17%, 53% { opacity: 0.3; transform: scale(0.9); }
      33%, 67% { opacity: 1; transform: translateX(-5px) rotate(0deg); }
      75% { transform: translate(5px, -3px) scale(0.95); }
      100% { transform: translate(0, 0) scale(1); }
    }

    /* Spinner 7: Pulsing Orbs */
    .spinner-7 {
      position: relative;
    }

    .spinner-7 .orb {
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--accent);
      border-radius: 50%;
      filter: blur(2px);
      animation: pulseOrbit 2.5s infinite ease-in-out;
    }

    .spinner-7 .orb:nth-child(1) { animation-delay: 0.1s; }
    .spinner-7 .orb:nth-child(2) { animation-delay: 0.2s; }
    .spinner-7 .orb:nth-child(3) { animation-delay: 0.3s; }

    @keyframes pulseOrbit {
      0% { transform: rotate(0deg) translate(25px, 0) scale(0.8); opacity: 0.7; }
      50% { transform: rotate(180deg) translate(25px, 0) scale(1.2); opacity: 1; }
      75% { transform: rotate(360deg) translate(25px, 0) scale(0.8); opacity: 0.7; }
    }

    /* Spinner 8: Zigzag Lines */
    .spinner-8 {
      position: relative;
      height: 40px;
    }

    .spinner-8 .line {
      position: absolute;
      width: 3px;
      height: 20px;
      background: var(--accent);
      left: 50%;
      transform: translateX(-50%);
      animation: zigzag 1s infinite ease-in-out;
    }

    .spinner-8 .line:nth-child(1) { top: 0; animation-delay: 0.1s; }
    .spinner-8 .line:nth-child(2) { top: 10px; animation-delay: 0.2s; }
    .spinner-8 .line:nth-child(3) { top: 20px; animation-delay: 0.3s; }

    @keyframes zigzag {
      0%, 100% { transform: translate(-5px, 0) translateX(-50%); }
      50% { transform: translate(5px, -3px) scale(0.95); }
    }

    /* Spinner 9: Color Shift Pulse */
    .spinner-9 {
      position: relative;
    }

    .spinner-9 .dot {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      animation: colorPulse 1.5s infinite ease-in-out;
    }

    .spinner-9 .dot:nth-child(1) { top: 15px; left: 15px; }
    .spinner-9 .dot:nth-child(2) { top: 15px; right: 15px; }
    .spinner-9 .dot:nth-child(3) { bottom: 15px; left: 15px; }
    .spinner-9 .dot:nth-child(4) { bottom: 15px; right: 15px; }

    @keyframes colorPulse {
      0% { background: var(--accent); transform: scale(0.8); }
      25% { background: #bb86fc; transform: scale(1.2); }
      50% { background: #9333ea; transform: scale(0.9); }
      75% { background: #f0abfc; transform: scale(1.1); }
      100% { background: var(--accent); transform: scale(0.8); }
    }

    /* Spinner 10: Starlight Trail */
    .spinner-10 {
      position: relative;
      overflow: hidden;
    }

    .spinner-10 .trail {
      position: absolute;
      width: 1px;
      height: 20px;
      background: var(--accent);
      border-radius: 0.5px;
      animation: starlightTrail 1.5s infinite linear;
    }

    .spinner-10 .trail:nth-child(1) { animation-delay: 0.1s; }
    .spinner-10 .trail:nth-child(2) { animation-delay: 0.2s; }
    .spinner-10 .trail:nth-child(3) { animation-delay: 0.3s; }
    .spinner-10 .trail:nth-child(4) { animation-delay: 0.4s; }

    @keyframes starlightTrail {
      0% { opacity: 0; transform: translateX(-50px) rotate(0deg); }
      10% { opacity: 1; transform: translateX(-30px) rotate(10deg); }
      20% { opacity: 1; transform: translateX(-10px) rotate(20deg); }
      30% { opacity: 1; transform: translateX(10px) rotate(30deg); }
      40% { opacity: 1; transform: translateX(30px) rotate(40deg); }
      50% { opacity: 1; transform: translateX(50px) rotate(50deg); }
      60% { opacity: 0; transform: translateX(70px) rotate(60deg); }
      100% { opacity: 0; transform: translateX(-50px) rotate(0deg); }
    }

    /* Spinner 11: Glitch Effect */
    .spinner-11 {
      position: relative;
      font-size: 0;
    }

    .spinner-11 .glitch {
      position: absolute;
      width: 30px;
      height: 30px;
      background: var(--accent);
      border-radius: 4px;
      animation: glitch 0.5s infinite;
    }

    @keyframes glitch {
      0% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(-3px, 2px) scale(1.05); }
      50% { transform: translate(2px, -3px) scale(0.95); }
      75% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(0, 0) scale(1); }
    }

    /* Spinner 12: Nebula Pulse */
    .spinner-12 {
      position: relative;
      overflow: hidden;
    }

    .spinner-12 .nebula {
      position: absolute;
      width: 100%;
      height: 100%;
      background: var(--accent);
      border-radius: 50%;
      animation: nebulaPulse 2s infinite linear;
    }

    @keyframes nebulaPulse {
      0% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(1.2); opacity: 0.8; }
      100% { transform: scale(1); opacity: 0.5; }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>Cosmic Spinners — 12+ CSS-Only Loading Animations</h1>
      <p class="subtitle">A collection of 12 stunning CSS-only loading animations</p>
    </header>
    <div class="toggle-container">
      <button class="toggle-btn" onclick="toggleTheme()">Toggle Theme