1ink-1

<style>
    body {
        margin: 0;
        overflow: hidden;
        background-color: #000;
        font-family: 'Inter', sans-serif;
    }
    canvas {
        width: 100%;
        height: 100vh;

1ink-1

<style>
    :root {
        --ui-gradient-start: rgba(255,0,110,.4);
        --ui-gradient-end: rgba(131,56,236,.4);
        --ui-glow-color: rgba(255,0,150,.4);
        --ui-border-color: rgba(255,100,200,.5);
        --info-bg-color: rgba(20,0,40,.8);
        --info-border-color: rgba(255,100,200,.3);
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

1ink-1

<style>
    :root {
        --ui-gradient-start: rgba(255,0,110,.4);
        --ui-gradient-end: rgba(131,56,236,.4);
        --ui-glow-color: rgba(255,0,150,.4);
        --ui-border-color: rgba(255,100,200,.5);
        --info-bg-color: rgba(20,0,40,.8);
        --info-border-color: rgba(255,100,200,.3);
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

1ink-1

Cyberpunk Data Nexus

An interactive cyberpunk data visualization built with Three.js. Clicking "Execute" morphs thousands of particles between three procedural forms. Dragging rotates the view and the on-screen switches toggle animations.

A Pen by Techartist on CodePen.

License.

1ink-1

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }