Diagrama de Venn animado

Abrir en el editor Video Publica tu código

Recomendado

30 January 2026

Ejemplo de código CSS 3D para reloj inteligente

16 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Art: Venn & Butterfly</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            background: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
        }

.art-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
            width: 100%;
            padding: 40px;
        }

/* Venn Diagram Styles */
        .venn {
            overflow: hidden;
            position: relative;
            border-radius: 50%;
            background: #0e2a23;
            text-transform: uppercase;
            font-size: 24px;
            color: white;
            font-weight: bold;
            line-height: 1;
            width: 80vmin;
            height: 80vmin;
            padding: 40px;
            margin: 0 auto;
            box-shadow: 0 0 30px rgba(80, 227, 194, 0.3);
        }

.venn:hover,
        .venn:hover *,
        .venn:hover *:after {
            animation-play-state: paused;
        }
        
        .venn > span {
            position: relative;
            z-index: 1;
            text-align: center;
            display: block;
            font-size: 32px;
        }
        
        .venn > span:nth-child(2) {
            position: absolute;
            inset: 53% 0 0 0;
        }

.venn__circles {
            position: absolute;
            inset: auto 0 12% 0;
            margin: auto;
            width: 78%;
            height: 73%;
            transform-origin: 50% 55%;
            animation: venn_rotate 7s linear infinite;
        }

.venn__circles i {
            animation: venn_rotate 7s linear infinite;
            animation-direction: reverse;
            position: absolute;
            bottom: 0;
            margin: auto;
            width: 62%;
            aspect-ratio: 1/ 1;
            border-radius: 50%;
            background: rgb(80 227 194 / 50%);
        }

.venn__circles i:nth-child(2) {
            --animation-delay: calc(-7s / 3 * 2);
            right: 0;
            bottom: 0;
        }

.venn__circles i:nth-child(3) {
            --animation-delay: calc(-7s / 3);
            left: 0;
            right: 0;
            bottom: auto;
        }
            
        .venn__circles em {
            font-style: normal;
            position: absolute;
            inset: 35% 5%;
            animation: venn_rotate 7s linear infinite;
            animation-delay: var(--animation-delay);
            display: flex;
            align-items: flex-end;
        }

.venn__circles em:after {
            content: attr(data-text);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 66.6666666%;
            animation: venn_rotate 7s linear infinite;
            animation-delay: var(--animation-delay);
            animation-direction: reverse;
        }

@keyframes venn_rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

/* Butterfly Styles */
        .butterfly-container {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: float 4s ease-in-out infinite;
            margin-top: 40px;
        }

@keyframes float {
            0%, 100% { transform: translateY(0) rotateX(-5deg); }
            50% { transform: translateY(-20px) rotateX(5deg); }
        }

.wing {
            position: absolute;
            width: 100px;
            height: 150px;
            transform-origin: right center;
            background: linear-gradient(45deg, #ff6b6b, #ffa3a3, #ffcccb);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
            border: 1px solid #ff4757;
            animation: flap 0.8s ease-in-out infinite alternate;
        }

.wing.left {
            left: 0;
            top: 25px;
            transform: rotateY(30deg);
        }

.wing.right {
            right: 0;
            top: 25px;
            transform: rotateY(-30deg);
        }

.body {
            position: absolute;
            width: 10px;
            height: 120px;
            background: linear-gradient(to bottom, #2f3542, #57606f);
            left: 95px;
            top: 40px;
            border-radius: 5px;
            transform: translateZ(10px);
        }

.antenna {
            position: absolute;
            width: 2px;
            height: 30px;
            background: #2f3542;
            top: 40px;
            border-radius: 2px;
        }

.antenna.left {
            left: 95px;
            transform: rotate(-20deg) translateZ(5px);
        }

.antenna.right {
            left: 105px;
            transform: rotate(20deg) translateZ(5px);
        }

.antenna-tip {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ff6b6b;
            border-radius: 50%;
            top: -5px;
            left: -2px;
        }

@keyframes flap {
            0% { transform: rotateY(30deg); }
            100% { transform: rotateY(70deg); }
        }

.wing.right {
            animation-name: flap-right;
        }

@keyframes flap-right {
            0% { transform: rotateY(-30deg); }
            100% { transform: rotateY(-70deg); }
        }

.pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.3) 30%);
            background-size: 15px 15px;
            border-radius: inherit;
            opacity: 0.7;
        }

h1 {
            color: #50e3c2;
            text-align: center;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

footer {
            color: #666;
            text-align: center;
            margin-top: 40px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="art-container">
        <h1>Interactive Art Composition</h1>
        
        <div class="venn">
            <span>Impact</span>
            <span>IOP</span>

<footer>
            Hover over the Venn diagram to pause animations
        </footer>
    </div>
</body>
</html>

Diagrama de Venn animado

Recomendado

Ejemplo de código CSS 3D para reloj inteligente

Un código de Mete

Un código de stevenolaeem

HTML

CSS

JS

Recomendado

Ejemplo de código CSS 3D para reloj inteligente

Un código de Mete

Un código de stevenolaeem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS