Buzzy Pen

Developer

Size

5,034 Kb

Views

50,600

Buzzy Pen Previews
Buzzy Pen HTML Codes
Buzzy Pen CSS Codes
Buzzy Pen JS Codes

How do I make an buzzy pen?

CSS SVG Stroke & Fill Animation. What is a buzzy pen? How do you make a buzzy pen? This script and codes were developed by Ali Klein on 11 July 2022, Monday.

Buzzy Pen Previews

Buzzy Pen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buzzy Pen</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { height: 100vh;
}
body #logo { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30vw; margin: 20px auto;
}
body #logo .st0 { fill: none; stroke: black; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;
}
body #logo svg { width: 100%;
}
body #logo svg path, body #logo svg g, body #logo svg circle { animation: draw 3s forwards; -webkit-animation: draw 3s forwards body #logo svg path, body #logo svg g, body #logo svg circle #dimples; -webkit-animation--webkit-animation-delay: .3s; -webkit-animation-animation-delay: .3s;
}
body #logo svg path#nose, body #logo svg g#nose, body #logo svg circle#nose { -webkit-animation-delay: .6s; animation-delay: .6s;
}
body #logo svg path#glasses, body #logo svg g#glasses, body #logo svg circle#glasses { -webkit-animation-name: glasses; animation-name: glasses; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; fill: rgba(0, 0, 0, 0.3); fill-opacity: 0;
}
@-webkit-keyframes circle { 0% { -webkit-transform: scale(0.2); opacity: 0; } 50% { opacity: 0; } 100% { -webkit-transform: scale(1.2); opacity: 1; }
}
@keyframes circle { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0; } 50% { opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@-webkit-keyframes glasses { 0% { fill-opacity: 0; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; }
}
@keyframes glasses { 0% { fill-opacity: 0; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; }
}
body #logo svg .circle { -webkit-animation: circle 3s ease; animation: circle 3s ease; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; fill: #f1522b;
}
body #logo svg .circle:nth-child(2) { fill: white;
}
body #logo svg #hair_beard { -webkit-animation-delay: .9s; animation-delay: .9s;
}
body #logo svg #mouth1, body #logo svg #mouth2 { -webkit-animation-delay: 1.0s; animation-delay: 1.0s;
}
body #logo svg g #eyes { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
body #logo svg g #eyes:first-child { fill: lightblue;
}
@-webkit-keyframes draw { to { stroke-dashoffset: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="logo"> <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="194 -104 1000 1000"> <path d="M203,396a491,491 0 1,0 982,0a491,491 0 1,0 -982,0" class="st0 circle"/> <path d="M228.8,396a465.2,465.2 0 1,0 930.4,0a465.2,465.2 0 1,0 -930.4,0" class="st0 circle"/> <path id="head_outline" stroke-dasharray="1300" stroke-dashoffset="1300" d="M793.2 764c75.1-55.6 116.7-140.8 106.3-181.3-.7-2.9-3.2-11.1-4.3-22.9-2.2-23.7 2.5-43.7 7.1-57.4 9.4 5 16.2 3.3 21.5-1.4 5.8-5.3 4.3-12.1 1.4-30.2-2.6-16.4 1.1-32.2 8.6-63.1 14.2-58.4 27.1-69.9 22.9-99-2.2-15.7-8.2-28-12.9-35.9m-494.2 11.6c2.1 15 5.1 28.1 7.9 38.6 15 88.6 10.3 154.8 2.9 199.5-3.5 21.2-7.1 33.9-5.7 56 3.2 54.3 31.5 93.6 70.3 146.4 7 9.4 13 17.7 18.7 25M823.4 4.3c-33-22.3-70.4-36.1-109-38.6-65.8-4.5-125.6 24.1-171.8 67.6" class="st0"/> <g id="eyes"> <path id="eyes" stroke-dasharray="1300" stroke-dashoffset="1300" d="M588.1 323s-50.2 10.1-47.4 33c2.9 22.9 64.6-7.1 74.6 0 .1 0 1.5-31.5-27.2-33zm137.8 26.6s37.3 29.5 86.1 0c0 0-21.5-26.6-43-26.6-21.6 0-28.8 26.6-43.1 26.6z" class="st0"/> <path id="eyes" stroke-dasharray="1300" stroke-dashoffset="1300" d="M516.3 297.2s24.3 31.6 61.7 10.1c37.4-21.5 46 22.9 46 22.9m78.2-7.2s23.7-28.7 43.7-25.8c20.1 2.9 50.2 15.4 66-.2" class="st0"/> </g> <path id="glasses" stroke-dasharray="1300" stroke-dashoffset="1300" d="M449.6 284.4l69.6 130.5h101.9l22.9-65.2h46l26.7 65.2h98.2l45.9-65.2H484.4" class="st0"/> <path id="nose" stroke-dasharray="1300" stroke-dashoffset="1300" d="M621.1 414.9s-5.7 63.1 20.1 83.3m-15.5-26s-20.3 5.8-10.4 25.9m101.4-35.9l-8 9.9s14.4 17.3 0 25.9" class="st0"/> <g id="mouth"> <path id="mouth" stroke-dasharray="1300" stroke-dashoffset="1300" d="M546.5 605.7s17.2-25.8 51.7 0 24.4-9.6 70.3-12.5c46-2.9 43 27.9 63.1 21 20.1-7 33-40.9 66-13.2" class="st0"/> <path id="mouth" stroke-dasharray="1300" stroke-dashoffset="1300" d="M725.9 615s7 24-53.8 26.9c-60.7 2.9-66.9-31.5-66.9-31.5s45.6 38.8 120.7 4.6z" class="st0"/> </g> <path id="dimples" stroke-dasharray="1300" stroke-dashoffset="1300" d="M526.4 525.4s-33 63.6 0 106.5m248.2-113.8s71.8 18.6 54.5 96.8M678.5 252.7s-5.7 43.7 14.4 70.3m-33.1-70.3l-18.7 44.4" class="st0"/> <g id="hair_beard" stroke-dasharray="1300" stroke-dashoffset="1300" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10"> <path id="hair_beard" stroke-dasharray="1300" stroke-dashoffset="1300" stroke-miterlimit="10" d="M540.6 15.3v137.8s-47.8 21.1-53.5 46-16.9 124-16.9 124l-20.6-38.6c0-.1-101.3-161.1 91-269.2zm243 64.1s49.7 41.1 56.4 96.7c0 0 91.8 6.7 75.6 134 0 0-9.5-29.5 28.3-37.2 37.8-7.8 38.6-186.9-112.1-284.5l-48.2 91zM546.5 605.7s18.8 100.5-2.7 146.5c0 0 18.7 74.6 113.3 74.6s136-39.2 136-62.7c0 0-34.4-64.5 4.5-163.1" class="st0"/> <path id="hair_beard" stroke-dasharray="1300" stroke-dashoffset="1300" stroke-miterlimit="10" d="M612.6 658.8s2.8 90.4 53 93.3c50.2 2.9 60.5-93.3 60.5-93.3s-48.6 36.3-113.5 0zm-40.8-103.4v23.1m16.5-34.5v34.5m18-44.6v44.6m16.9-53.1v53.2m36.4-44.7v44.6m107-23.1v23.1M750 544v34.5m-17.9-44.6v44.6m-17-53.1v53.2m-37.2-44.7v44.6M567.4 729.8v58.9m15.1-45.8v58.9m15-46.4v58.9m15.1-55v58.9m15-53.3v58.9m15.1-56v56m-114.6-752L469.3 73m58.8-16l-42.2.9m42.3-16.5l-25.3.5m12.4 45.2l-58.9 1.2m52.1 13.5l-58.9 1.2m50 14.5l-58.9 1.2m53.6 14l-58.9 1.2m49 13.9l-56 1.2m48.6 13.2l-50.7 1m50.7 14.3l-50.7 1.1m48.5 13.6l-48.5 1m43.9 14.9l-42.9.9m42.9 14.2l-43.2.9m37.8 14l-34.4.7m34.4 14.3l-29.7.6M855.9 72.4l58.9 1.2m-46.1 14l58.9 1.2m-52.1 13.5l58.9 1.2m-50 14.5l58.9 1.2M833 27.5l48.4 1m-41.6 13.7l54.7 1.1m-45.8 14.6l58.9 1.2m-17.9 74.1l58.9 1.2m-50.5 13.4l51.7 1.1M905 162.7l52.7 1.1m-45.1 14.3l45.9 1m-39.9 13.7l43.8.9m-36.5 14.9l38.7.8m-33.3 14.9l33.6.7m-32.6 13.4l29.1.6m-27 14.3l23.7.5M698.6 764.9v58.9m15.1-62.2v58.9m15-62.1v58.9m15.1-65.2V811m15-68.1v58.9m15.1-66.3v58.9" class="st0"/> </g> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Buzzy Pen - Script Codes CSS Codes

body { height: 100vh;
}
body #logo { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30vw; margin: 20px auto;
}
body #logo .st0 { fill: none; stroke: black; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;
}
body #logo svg { width: 100%;
}
body #logo svg path, body #logo svg g, body #logo svg circle { animation: draw 3s forwards; -webkit-animation: draw 3s forwards body #logo svg path, body #logo svg g, body #logo svg circle #dimples; -webkit-animation--webkit-animation-delay: .3s; -webkit-animation-animation-delay: .3s;
}
body #logo svg path#nose, body #logo svg g#nose, body #logo svg circle#nose { -webkit-animation-delay: .6s; animation-delay: .6s;
}
body #logo svg path#glasses, body #logo svg g#glasses, body #logo svg circle#glasses { -webkit-animation-name: glasses; animation-name: glasses; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; fill: rgba(0, 0, 0, 0.3); fill-opacity: 0;
}
@-webkit-keyframes circle { 0% { -webkit-transform: scale(0.2); opacity: 0; } 50% { opacity: 0; } 100% { -webkit-transform: scale(1.2); opacity: 1; }
}
@keyframes circle { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0; } 50% { opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@-webkit-keyframes glasses { 0% { fill-opacity: 0; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; }
}
@keyframes glasses { 0% { fill-opacity: 0; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; }
}
body #logo svg .circle { -webkit-animation: circle 3s ease; animation: circle 3s ease; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; fill: #f1522b;
}
body #logo svg .circle:nth-child(2) { fill: white;
}
body #logo svg #hair_beard { -webkit-animation-delay: .9s; animation-delay: .9s;
}
body #logo svg #mouth1, body #logo svg #mouth2 { -webkit-animation-delay: 1.0s; animation-delay: 1.0s;
}
body #logo svg g #eyes { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
body #logo svg g #eyes:first-child { fill: lightblue;
}
@-webkit-keyframes draw { to { stroke-dashoffset: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; }
}

Buzzy Pen - Script Codes JS Codes

/*NOPE!*/

Home Page	Home
Developer	Ali Klein
Username	AliKlein
Uploaded	July 11, 2022
Rating	3
Size	5,034 Kb
Views	50,600

Do you need developer help for Buzzy Pen?

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!

Ali Klein (AliKlein) Script Codes

Name	Size
Wobbly Button Snap SVG Morph	3,130 Kb
SVG Morph Bounce	2,304 Kb
Animated Hillary Clinton Donald Trump Logos SVG	4,004 Kb
Vertical Scrolling Pagination	2,980 Kb
Know Your Candidates. Responsive Table with Viewport Widths.	6,288 Kb
Parallax Background Scroll	3,150 Kb
Speech Bubble Animation	3,562 Kb
Animate text script path.	4,819 Kb
Momentum Scrolling	2,614 Kb
Owl Carousel Sync Nav Links	2,554 Kb

Create amazing marketing copy 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!

Similar Scripts & Codes

Name	Username	Size
Clock with full screen background	Owebboy	2,415 Kb
JQuery exercise	Brian-baum	3,780 Kb
Svg penguin	_massimo	2,990 Kb
Subscription Newsletter - Before inlining	Bradstrong	7,526 Kb
Display properties	Hamzaerbay	1,886 Kb
Animating characters with jQuery	042	2,776 Kb
A Pen by tugce	Ecgutcnkr	4,197 Kb
Basic jQuery Filter list	Mtedwards	2,464 Kb
A Pen by Moeid Saleem	Moeidsaleem	1,862 Kb
Motion Lines - codevember - 02 - 2016	Caiocares	2,744 Kb

Do you want hide your ip address?

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!