WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
SVG बहुभुज कला: वेक्टर ग्राफ़िक कोड
249
alejandrokundrah
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
30 March 2025
ytr3d3 द्वारा एक कोड
23 February 2025
ha11072004cc द्वारा एक कोड
21 January 2024
3डी सोशल आइकन कोड
HTML
Copy
CSS
Copy
body { background: #ffffff; margin: 0; overflow: hidden; } figure { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; } svg { padding: 5vw; width: 90vw; } svg > * { fill: #1c1c1c; stroke: #1c1c1c; stroke-width: 0.85px; } @keyframes tip { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }
JS
Copy
const elements = document.querySelectorAll("svg > *"); gsap.set(elements, { x: () => gsap.utils.random(-500, 500), y: () => gsap.utils.random(-500, 500), rotation: () => gsap.utils.random(-720, 720), scale: 0, opacity: 0 }); const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.65, yoyo: true }); tl.to(elements, { x: 0, y: 0, scale: 1, opacity: 1, rotation: 0, ease: "power4.inOut", stagger: 0.0125, duration: 0.75 }); const svg = document.querySelector("svg"); svg.addEventListener("mouseenter", () => tl.timeScale(0.15)); svg.addEventListener("mouseleave", () => tl.timeScale(1));