Diagrama de Venn animado

Abrir no Editor Publique Seu Código

Recomendado

29 December 2024

<!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

ki ok, dia de Nova Jersey

Um código por slowcode552

Um código por securecode394

HTML

CSS

JS

Recomendado

ki ok, dia de Nova Jersey

Um código por slowcode552

Um código por securecode394

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS