Dynamic-Circle-Menu-1

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Radial Menu</title>
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    
    <!-- ============================================= -->
    <!-- =============== CSS STYLES ================== -->
    <!-- ============================================= -->
    <style>
        :root {
            --primary-color: #6a5acd; /* SlateBlue */
            --secondary-color: #483d8b; /* DarkSlateBlue */
            --glow-color: #b19cd9; /* MediumPurple */
            --text-color: #f0f8ff; /* AliceBlue */
            --bg-dark: #0a0a0f;
            --bg-light: #1a1a2e;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Hide particles going off-screen */
        }

        .menu-container {
            position: relative;
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* --- Visual Upgrades --- */

        /* Dynamic Background & Ambient Glow */
        .ambient-glow {
            position: absolute;
            width: 150%;
            height: 150%;
            background: radial-gradient(circle, rgba(106, 90, 205, 0.2) 0%, transparent 70%);
            animation: pulse 4s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
    ...