Hypno triangle
How do I make an hypno triangle?
A relaxing triangle for fun.. What is a hypno triangle? How do you make a hypno triangle? This script and codes were developed by Val Head on 03 September 2022, Saturday.
Hypno triangle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hypno triangle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 314 314"> <defs> <filter id="AI_GaussianBlur_4" name="AI_GaussianBlur_4"> <feGaussianBlur stdDeviation="4"/> </filter> </defs> <rect width="314" height="314" fill="#161616"/> <g filter="url(#AI_GaussianBlur_4)"> <polygon points="155.9 78.9 192.7 142.7 229.6 206.5 155.9 206.5 82.3 206.5 119.1 142.7 155.9 78.9" fill="#893dea"/> </g> <polygon class="tri" id="t2" points="155.9 78.9 192.7 142.7 229.6 206.5 155.9 206.5 82.3 206.5 119.1 142.7 155.9 78.9" fill="#893dea"/> <polygon class="tri" id="t3" points="155.9 79.3 192.8 143.2 229.6 207 155.9 207 82.2 207 119.1 143.2 155.9 79.3" fill="#ad64ff"/> <polygon class="tri" id="t4" points="155.9 79.8 192.6 143.3 229.3 206.8 155.9 206.8 82.6 206.8 119.3 143.3 155.9 79.8" fill="#c48eff"/> <polygon class="tri" id="t5" points="155.9 79.5 192.6 143 229.3 206.5 155.9 206.5 82.6 206.5 119.3 143 155.9 79.5" fill="#d7b3ff"/> <polygon class="tri" id="t6" points="155.9 80.3 192.6 143.8 229.3 207.3 155.9 207.3 82.6 207.3 119.3 143.8 155.9 80.3" fill="#eddcff"/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hypno triangle - Script Codes CSS Codes
svg { width: 100vw; height: 100vh;
}
body { background: #161616;
}
svg { visibility: hidden;
}
Hypno triangle - Script Codes JS Codes
var tris = [].slice.call(document.querySelectorAll('.tri'));
tris = tris.reverse();
var container = document.querySelector('#triangle');
TweenMax.set(tris, {transformOrigin: '50%, 65%'});
TweenMax.set(container, {visibility:"visible"});
tlr = new TimelineMax({repeat:-1});
tlr.to(container, 10, {rotation:"+=360", ease:Power0.easeNone});
tlr.timeScale(.5);
tls = new TimelineMax({repeat:-1, yoyo:true});
tls.add("scale"); for (var i=0; i < tris.length-1; i++) { tls.to(tris[i], .95, {scale: .2+(i/5), ease: Circ.easeOut}, 'scale+i/10'); }
tls.to({},.85,{});
tls.timeScale(.8);
Developer | Val Head |
Username | valhead |
Uploaded | September 03, 2022 |
Rating | 3.5 |
Size | 2,371 Kb |
Views | 52,624 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
IOS Gmail loader-ish | 2,920 Kb |
3D dancing dots | 2,334 Kb |
Playing a CSS animation on hover | 2,424 Kb |
Net magazine example - Start | 4,830 Kb |
Net magazine demo - Step 3 | 5,295 Kb |
Listening for CSS animation events | 2,665 Kb |
Neon glow letters | 2,595 Kb |
500 coffee cup icons | 3,169 Kb |
Geometric Pattern Mask | 2,527 Kb |
Spring physics with CSS variables | 3,591 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flex Table | Simeonoff | 4,059 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Incremental game | Eprouver | 5,868 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Border image | JohnRiordan | 2,120 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!