Eye Bee M

Developer
Size
4,047 Kb
Views
54,648

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 Previews

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);
Eye Bee M - Script Codes
Eye Bee M - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 4.5
Size 4,047 Kb
Views 54,648
Do you need developer help for Eye Bee M?

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!

Elliot Geno (pyrografix) Script Codes
Create amazing love letters 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!