One Percent

Developer
Elliot Geno
Size
2,919 Kb
Views
30,360
  1. One Percent Previews
  2. One Percent HTML Codes
  3. One Percent CSS Codes
  4. One Percent JS Codes

How do I make an one percent?

Monocle Man is the one percent. Don't worry... I am sure he'll share once you poke him in the face.. What is a one percent? How do you make a one percent? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

One Percent Previews
IQ Test

One Percent - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One Percent</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="monocleMan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" opacity="0">	<circle id="beadyEye1" cx="442.5" cy="507.5" r="20.5"/>	<circle id="beadyEye2" cx="557.5" cy="507.5" r="19.5"/>	<circle id="monocle" fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" cx="557.5" cy="507.5" r="46.5"/>	<path id="topHat" d="M596.7,355.4C612,238.6,647.9,166.4,647.9,151h-0.3c0-27-66.2-48.6-147.8-48.6S352.1,124,352.1,151	c0,15.1,35.9,87.5,51.2,204.3c-31.4,8.9-51.2,22.1-51.2,36.8c0,26.9,66.2,48.6,147.8,48.6s147.8-21.8,147.8-48.6	C647.6,377.4,627.9,364.3,596.7,355.4z"/>	<path class="stache" fill="none" stroke="#000000" stroke-width="13" stroke-linecap="round" stroke-miterlimit="10" d="M663.1,622.3	c0,0-5.3,19.3-20.8,12.3c-27.2-12.3-3.2-63.7,38.9-44c31.7,14.8,26.8,74.5-14.8,86.3c-78.4,22.3-87.7-118.5-144.5-92.8	c-14,6.3-29.9,6.3-43.9,0C421.2,558.5,412,699.3,333.5,677c-41.6-11.9-46.5-71.6-14.8-86.3c42.2-19.7,66.2,31.7,38.9,44	c-15.4,7-20.8-12.3-20.8-12.3"/>	<path class="stache" fill="none" stroke="#000000" stroke-width="13" stroke-linecap="round" stroke-miterlimit="10" d="M663.1,622.3	c0,0-5.3,19.3-20.8,12.3c-27.2-12.3-3.2-63.7,38.9-44c31.7,14.8,26.8,74.5-14.8,86.3c-78.4,22.3-87.7-106.5-144.5-80.8	c-14,6.3-29.9,6.3-43.9,0C421.2,570.5,412,699.3,333.5,677c-41.6-11.9-46.5-71.6-14.8-86.3c42.2-19.7,66.2,31.7,38.9,44	c-15.4,7-20.8-12.3-20.8-12.3"/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=6'></script> <script src="js/index.js"></script>
</body>
</html>

One Percent - Script Codes CSS Codes

body{ margin:0px; overflow:hidden;
}
#monocleMan{ width:100%; height:100%; position:fixed; cursor:pointer;
}
.stache{ opacity:0;
}

One Percent - Script Codes JS Codes

/* For more information on Greensock's DrawSVGPlugin: https://greensock.com/drawSVG?utm_source=Newsletter-December&utm_medium=email&utm_campaign=DrawSVGPlugin*/
window.addEventListener("click", poke);
TweenMax.set("svg", { opacity: 1
});
TweenMax.to(["#beadyEye1", "#beadyEye2"], .17, { repeat: 3, yoyo: true, delay: 1, scaleY: 0, transformOrigin: "50% 50%", ease: Quint.easeInOut
});
TweenMax.set(".stache", { drawSVG: "50% 50%"
});
TweenMax.from("#topHat", .8, { rotation: -20, scale: 0, transformOrigin: "50% 100%", delay: 2.5, ease: Back.easeOut.config(2)
});
TweenMax.to(".stache", 1.2, { drawSVG: "5% 95%", delay: 2.5, ease: Back.easeOut.config(2)
});
TweenMax.set(".stache", { opacity: 1, delay: 2.5
});
TweenMax.from("#monocle", .6, { delay: 2.8, attr: { r: 0 }, ease: Back.easeOut.config(4)
});
TweenMax.set("#monocleMan", { autoAlpha: 1
});
window.addEventListener("click", poke);
function poke() { TweenMax.to("#topHat", .3, { rotation: -((Math.random() * 20) + 10) * (Math.random() < .5 ? 1 : -1), transformOrigin: "50% 100%", ease: Quint.easeOut }); TweenMax.to("#topHat", .3, { delay: .2, rotation: 0, transformOrigin: "50% 100%", ease: Quint.easeInOut }); var randomStart = (Math.random() * 20) + 10; var randomEnd = 100 - ((Math.random() * 20) + 10); TweenMax.to(".stache", .3, { drawSVG: (randomStart + "% " + randomEnd + "%"), rotation: (Math.random() * 20) - 10, transformOrigin: "50% 50%", ease: Quint.easeOut }); TweenMax.to(".stache", .3, { delay: .2, drawSVG: "5% 95%", rotation: 0, transformOrigin: "50% 50%", ease: Back.easeOut.config(3) }); TweenMax.to("#monocle", .3, { attr: { r: (Math.random() * 20) + 46.5 }, ease: Quint.easeOut }); TweenMax.to("#monocle", .3, { delay: .2, attr: { r: 46.5 }, ease: Quint.easeOut }); TweenMax.to("#beadyEye1", .3, { scale: Math.random() * .7, transformOrigin: "50% 50%", ease: Quint.easeOut }); TweenMax.to("#beadyEye1", .3, { delay: .2, scale: 1, transformOrigin: "50% 50%", ease: Quint.easeOut }); TweenMax.to("#beadyEye2", .3, { scale: Math.random() * .7, transformOrigin: "50% 50%", ease: Quint.easeOut }); TweenMax.to("#beadyEye2", .3, { delay: .2, scale: 1, transformOrigin: "50% 50%", ease: Quint.easeOut });
}
One Percent - Script Codes
One Percent - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 3.5
Size 2,919 Kb
Views 30,360
Do you need developer help for One Percent?

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
Name
Dot Hopper - Pagination
Crash Loader
Happy Snowman
Stained Glass
Gnat Attack
Coaster SVG
Gravitational Wave IS DARTH VADER
Eye Bee M
Alternate Tween Properties - TweenMax
Calendar
Create amazing blog posts 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!