You are getting very sleepy...

Developer
Val Head
Size
3,242 Kb
Views
22,264
  1. You are getting very sleepy... Previews
  2. You are getting very sleepy... HTML Codes
  3. You are getting very sleepy... CSS Codes
  4. You are getting very sleepy... JS Codes

How do I make an you are getting very sleepy...?

SVG morphing fun inspired by Bees and Bombs' super cool gifs.. What is a you are getting very sleepy...? How do you make a you are getting very sleepy...? This script and codes were developed by Val Head on 04 November 2022, Friday.

You are getting very sleepy... Previews
IQ Test

You are getting very sleepy... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>You are getting very sleepy...</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<svg id="shapey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <defs> <linearGradient id='grad'> <stop offset='0%' stop-color='#F900F3'/> <stop offset='75%' stop-color='#00B7F7'/> <stop offset='100%' stop-color='#A000F4'/> </linearGradient> </defs>
<!-- <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> --> <rect class="cls-1" width="1000" height="1000"/> <g> <path class="heart shape" d="M367.9,133.3c60.9,60.9,30.2,250.8,30.2,250.8s-189.9,30.7-250.8-30.2-16.6-151.1,83.1-137.5C219.8,118.1,306.9,72.3,367.9,133.3Z" /> <path class="circ shape" d="M264,402A150,150,0,1,1,414,252,150,150,0,0,1,264,402Z"/> <path class="rect shape" d="M402,114V390H126V114Z" /> </g> <g> <path class="heart shape" d="M870.7,353.9c-60.9,60.9-250.8,30.2-250.8,30.2s-30.7-189.9,30.2-250.8,151.1-16.6,137.5,83.1C885.9,205.8,931.7,292.9,870.7,353.9Z" /> <path class="circ shape" d="M750,402A150,150,0,1,1,900,252,150,150,0,0,1,750,402Z" /> <path class="rect shape" d="M888,114V390H612V114Z" /> </g> <g> <path class="heart shape" d="M647,865.2c-60.9-60.9-30.2-250.8-30.2-250.8s189.9-30.7,250.8,30.2,16.6,151.1-83.1,137.5C795.1,880.3,707.9,926.1,647,865.2Z"/> <path class="circ shape" d="M750,896A150,150,0,1,1,900,746,150,150,0,0,1,750,896Z" /> <path class="rect shape" d="M888,608V884H612V608Z" /> </g> <g> <path class="heart shape" d="M148.1,645.6c60.9-60.9,250.8-30.2,250.8-30.2s30.7,189.9-30.2,250.8-151.1,16.6-137.5-83.1C133,793.6,87.2,706.5,148.1,645.6Z"/> <path class="circ shape" d="M264,896A150,150,0,1,1,414,746,150,150,0,0,1,264,896Z" /> <path class="rect shape" d="M402,608V884H126V608Z" /> </g>
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

You are getting very sleepy... - Script Codes CSS Codes

body { background:#282628;
}
.wrap { width:100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
svg { width: 80vw; height: 80vh;
} .cls-1 { fill: #282628; } .shape { fill: none; stroke:url(#grad); stroke-miterlimit: 10; stroke-width: 3px; }
.circ, .rect { visibility:hidden;
}

You are getting very sleepy... - Script Codes JS Codes

"use strict";
var hearts = document.querySelectorAll(".heart");
var circs = document.querySelectorAll(".circ");
var rects = document.querySelectorAll(".rect");
TweenLite.defaultEase = Back.easeOut.config(2);
var tlr = new TimelineMax({ repeat: -1 });
tlr.to("#shapey", 40, { rotation: 180, ease: Power0.easeNone });
var tls = new TimelineMax();
tls.add("start");
tls.add(morphy(0), "start");
tls.add(morphy(1), "start+=0.05");
tls.add(morphy(2), "start+=0.1");
tls.add(morphy(3), "start+=0.15");
function morphy(i) { var tl = new TimelineMax({ repeat: -1 }); tl.to(hearts[i], 1, { morphSVG: circs[i] }); tl.to(hearts[i], 1, { morphSVG: rects[i] }); tl.to(hearts[i], 1, { morphSVG: circs[i] }); tl.to(hearts[i], 1, { morphSVG: hearts[i] }); return tl;
}
You are getting very sleepy... - Script Codes
You are getting very sleepy... - Script Codes
Home Page Home
Developer Val Head
Username valhead
Uploaded November 04, 2022
Rating 4.5
Size 3,242 Kb
Views 22,264
Do you need developer help for You are getting very sleepy...?

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!

Val Head (valhead) Script Codes
Name
Modal Relationship Examples
Geometric Pattern Mask
Net magazine demo - Complete
Neon glow letters
Listening for Animation Events With JavaScript
Net magazine example - Start
Basic CSS animation and transition example
Steps Sprite Animation
Nav animation exercise - START
Playing a CSS animation on hover
Create amazing SEO content with AI!

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!