Eye Bee M
How do I make an eye bee m?
The company I work for (Resource/Ammirati) was bought by IBM IX. Eye Bee M - Designed by the famous Paul Rand.. What is a eye bee m? How do you make a eye bee m? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.
Eye Bee M - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Eye Bee M</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="200 200 880 350" width="100%" height="100%"> <g id="m"> <clipPath id="mMask"> <path d="M928,323V293H868l-26,68-25-68H756v30h23v90H756v30h53V353l33,89,33-89v90h53V413H905V323h23" /> </clipPath> <path id="lines" d="M747,298H983M657,318h376M567,338H923M707,358H963M726,438H962M707,418h376M617,398H973M757,378h256" stroke="#335fb4" stroke-width="10" clip-path="url(#mMask)" stroke-dasharray="384,10,256,15,170,22,113,33,75,50,50,75,33,113,22,170,15,256,10" stroke-dashoffset="0" /> <rect width="180" height="160" x="750" y="290" fill-opacity="0" cursor="pointer" /> </g> <marker id="BodyStart" markerWidth="64" markerHeight="32" refX="32" refY="32" orient="auto" markerUnits="userSpaceOnUse" overflow="visible"> <path d="M16,60V4A32,32,0,0,0,16,60Z" fill="#f7b853" /> </marker> <marker id="BodyEnd" markerWidth="64" markerHeight="32" refX="0" refY="32" orient="auto" markerUnits="userSpaceOnUse" overflow="visible"> <path d="M16,4V60A32,32,0,0,0,16,4Z" fill="#f7b853" /> </marker> <g id="bee"> <circle class="eye" cx="629" cy="320" r="15" fill="#f17585" /> <circle class="eye" cx="661" cy="320" r="15" fill="#f17585" /> <path class="body" id="body" d="M645 368q0 30 0 45" fill="none" stroke="#222" stroke-width="64" stroke-linecap="round" /> <path class="body" id="bodyStripes" d="M645 368q0 30 0 45" fill="none" stroke="#f7b853" stroke-width="64" stroke-dasharray="16 16" marker-end="url(#BodyEnd)" marker-start="url(#BodyStart)" /> <path id="right" d="M675 348l18 55a25 25 0 0 0 41 11 25 25 0 0 0-6-42z" fill="#528950" /> <path id="left" d="M615 348l-18 55a25 25 0 0 1-41 11 25 25 0 0 1 6-42z" fill="#528950" /> <ellipse cx="645" cy="378" rx="102" ry="85" fill="rgba(0, 0, 0, 0)" cursor="pointer" /> </g> <g id="eye"> <g clip-path="url(#EyeMask)"> <g id="eyeBall"> <circle id="whites" cx="440" cy="385" r="175" fill="#fff" /> <circle cx="440" cy="385" r="48" fill="#a98358" /> <circle cx="440" cy="385" r="20" fill="#222"/> </g> </g> <clipPath id="EyeMask"> <path id="eyeShape" d="M354 386c30 -80 142 -80 172 0c-30 80 -142 80 -172 0" /> </clipPath> <circle cx="439" cy="360" r="100" fill-opacity="0" cursor="pointer" /> <path id="eyeLash" fill="#e1593c" d="M356 340c40 -55 130 -55 170 0v-18c-40 -65 -130 -65 -170 0" fill="#e1593c" /> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Eye Bee M - Script Codes CSS Codes
body{ margin:0; background:#222;
}
svg{ width:100%; height:100%; position:fixed;
}
Eye Bee M - Script Codes JS Codes
var eye = document.querySelector("#eye");
var bee = document.querySelector("#bee");
var m = document.querySelector("#m");
var buzzAngle = 0;
var buzzIndex = 0;
var beeData = {index:0, buzzAngle:0,wiggleAngle:0,timeout:0};
var eyeData = {topLid:1,bottomLid:1};
randomWiggle();
var squint = new TimelineMax({paused:true, onUpdate:drawLid,onComplete:squintComplete});
var center = .35;
var range = 1- center;
var steps = 5;
var openIncrement= 1/steps;
for(var i=0;i<steps;i++){ var progress = i/(steps-1); var target=(progress*range)+center; var openAmount = openIncrement*(i+1); var bottomTarget = Math.min(target+(openAmount*.5),1); var topTarget = bottomTarget-openAmount; squint.to(eyeData,0.15,{topLid:target,bottomLid:target,ease:Power4.easeOut},"+="+(i*.15)); squint.to(eyeData,0.3,{topLid:topTarget,bottomLid:bottomTarget,ease:Power4.easeOut});
}
squint.from("#whites",3,{fill:"#e69898",ease:Power1.easeOut},0);
squint.to("#eyeBall",.1,{x:0,y:-30,ease:Quint.easeInOut},0);
squint.to("#eyeBall",.4,{y:0,ease:Quint.easeInOut},0.4);
squint.progress(1);
function squintComplete(){ animateEye(); blink(null);
}
function buzz(){ beeData.index+=2; TweenMax.to(beeData,2,{delay:0.2,buzzAngle:Math.PI*beeData.index*10,onUpdate:setWingAngle, ease:Sine.easeInOut}); TweenMax.staggerTo(".eye",0.2,{scale:0.8,ease:Quint.easeInOut,transformOrigin:"center"},.1); TweenMax.staggerTo(".eye",1,{delay:0.2,scale:1,ease:Elastic.easeOut,transformOrigin:"center"},.1); TweenMax.staggerTo(".body",.2,{scaleY:.85,ease:Power4.easeInOut,transformOrigin:"50% -60%"}); TweenMax.staggerTo(".body",1,{delay:.2,scaleY:1,ease:Elastic.easeOut.config(2),transformOrigin:"50% -60%"});
}
function wiggle(){ beeData.index+=2; TweenMax.to(beeData,1.5,{wiggleAngle:Math.PI*beeData.index*2,onUpdate:setWiggle, ease:Quart.easeInOut});
}
function setWingAngle(){ var radians = Math.sin(beeData.buzzAngle); var angle =radians*20; TweenMax.set("#left",{rotation:angle,transformOrigin:"100% 0%"}); TweenMax.set("#right",{rotation:-angle});
}
function setWiggle(){ var radians = Math.sin(beeData.wiggleAngle); TweenMax.set(".body", {attr: {d:"M645 368q0 22 "+ (radians*10) + " 45"}}); TweenMax.set("#bee",{rotation:radians*6,transformOrigin:"center"});
}
bee.addEventListener("click",onBee);
function onBee(e){ poke(e); clearTimeout(beeData.timeout); randomWiggle();
}
function randomWiggle(){ beeData.timeout = setTimeout(randomWiggle,7000+(5000*Math.random())); buzz(); wiggle();
}
function animateEye(){ var x=((Math.random()*50)-25); var y=((Math.random()*40)-20); TweenMax.to("#eyeBall",.3,{x:x,y:y,ease:Quint.easeInOut}); TweenMax.delayedCall((Math.random()*3)+.1,animateEye);
}
function drawLid(){ var topPercent = Math.min(eyeData.bottomLid,eyeData.topLid); var topTarget = (topPercent*160)-80; var bottomTarget = (eyeData.bottomLid*160)-80; var lidTopTarget = (topPercent*130)-65; var lidBottomTarget = lidTopTarget+10; var lidPosition = topPercent*25; TweenMax.set("#eyeShape", {attr: {d:"M354 386c30 "+topTarget+" 142 "+topTarget+" 172 0c-30 "+bottomTarget+" -142 "+bottomTarget+" -172 0"}}); TweenMax.set("#eyeLash", {y:lidPosition,attr: {d:"M356 340c40 "+lidBottomTarget+" 130 "+lidBottomTarget+" 170 0v-18c-40 "+lidTopTarget+" -130 "+lidTopTarget+" -170 0"}});
}
function blink(hold){ if(hold!== null){ TweenMax.to(eyeData,.3,{topLid:1,ease:Quint.easeIn,onUpdate:drawLid}); TweenMax.to(eyeData,.3,{delay:0.3,topLid:0,ease:Quint.easeOut,onUpdate:drawLid}); } TweenMax.delayedCall((Math.random()*4)+1,blink);
}
function poke(e){ TweenMax.to(e.currentTarget,.1,{scale:.9,transformOrigin:"center",ease:Power2.easeOut}); TweenMax.to(e.currentTarget,.5,{delay:.1,scale:1,transformOrigin:"center",ease:Back.easeOut.config(6)});
}
function onEye(e){ TweenMax.killDelayedCallsTo(blink); TweenMax.killDelayedCallsTo(animateEye); TweenMax.killTweensOf("#eyeBall"); squint.seek(0); squint.play(); poke(e);
}
var targetM = 0;
var scope = this;
function onM(e){ TweenMax.killDelayedCallsTo(onM); targetM-=3744; poke(e); TweenMax.to("#lines",2,{"stroke-dashoffset":targetM,ease:Quint.easeOut}); TweenMax.delayedCall((Math.random()*4)+6,onM,[{currentTarget:scope}]);
}
onM({currentTarget:this});
eye.addEventListener("click",onEye);
m.addEventListener("click",onM);
Developer | Elliot Geno |
Username | pyrografix |
Uploaded | September 11, 2022 |
Rating | 4.5 |
Size | 4,047 Kb |
Views | 54,648 |
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 |
Prism | 2,843 Kb |
Swarm | 2,384 Kb |
Dot Hopper - Pagination | 2,579 Kb |
Iris | 2,587 Kb |
Purple Nurple | 5,008 Kb |
Gnat Attack | 4,914 Kb |
Calendar | 2,416 Kb |
Bullseye Game | 5,406 Kb |
Cat Silhouette | 4,447 Kb |
Stained Glass | 2,127 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 |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Adding Items | Valhead | 4,008 Kb |
About Mazano | Kiti | 2,585 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
CSS Colors | Alexpate | 2,232 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Hc first draft | Stepfray | 5,104 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!