A Pen by Tommaso Poletti
How do I make an a pen by tommaso poletti?
What is a a pen by tommaso poletti? How do you make a a pen by tommaso poletti? This script and codes were developed by Tommaso Poletti on 14 October 2022, Friday.
A Pen by Tommaso Poletti - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Tommaso Poletti</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 275 160">
<path class="letter__o" d="M28.32,102.12a50.93,50.93,0,0,0,17.1,11.52,56,56,0,0,0,21.87,4.18,56,56,0,0,0,21.87-4.18,50.88,50.88,0,0,0,17.1-11.52A53.18,53.18,0,0,0,117.42,84.8a57,57,0,0,0,4-21.58,57,57,0,0,0-4-21.58,53.23,53.23,0,0,0-11.16-17.32,50.92,50.92,0,0,0-17.1-11.52A56,56,0,0,0,67.29,8.63a56,56,0,0,0-21.87,4.18,51,51,0,0,0-17.1,11.52A53.31,53.31,0,0,0,17.17,41.65a57,57,0,0,0-4,21.58,57,57,0,0,0,4,21.58A53.26,53.26,0,0,0,28.32,102.12ZM30.89,79.3a47.7,47.7,0,0,1,0-32.14A39.21,39.21,0,0,1,38.82,34,37.78,37.78,0,0,1,67.29,21.84,37.77,37.77,0,0,1,95.77,34a39.13,39.13,0,0,1,7.93,13.14,47.71,47.71,0,0,1,0,32.14,39.08,39.08,0,0,1-7.93,13.14,37.77,37.77,0,0,1-28.47,12.18A37.78,37.78,0,0,1,38.82,92.44,39.16,39.16,0,0,1,30.89,79.3Z" transform="translate(-11.04 -8.63)"/>
<path class="letter__o__line" d="M36,124.38,22.9,142.52a6,6,0,0,1-8.42,1.37l-.93-.67a6,6,0,0,1-1.37-8.42l13-18.07a6,6,0,0,1,8.08-1.59l1,.62A6,6,0,0,1,36,124.38Z" />
<path class="letter__l__first" d="M141.91,12.54h1.15a6,6,0,0,1,6,6v98.91a6,6,0,0,1-6,6h-1.15a6,6,0,0,1-6-6V18.57A6,6,0,0,1,141.91,12.54Z"/>
<path class="letter__l__second" d="M177.13,32.54h1.15a6,6,0,0,1,6,6v98.91a6,6,0,0,1-6,6h-1.15a6,6,0,0,1-6-6V38.57A6,6,0,0,1,177.13,32.54Z"/>
<path class="letter__y" d="M206.08,25.62h2.11a6,6,0,0,1,5.64,3.89l19.13,50.42h.3l18.32-50.34a6,6,0,0,1,5.67-4h1a6,6,0,0,1,5.62,8.22l-29.81,76.32a89.41,89.41,0,0,1-3.65,8.29,25,25,0,0,1-4.53,6.39,18.33,18.33,0,0,1-6.36,4.11,25,25,0,0,1-9.13,1.47,49,49,0,0,1-5.92-.37h-.06a5.92,5.92,0,0,1-5-6.69l0-.17a6,6,0,0,1,6.52-5.22,19.31,19.31,0,0,0,2.25.13,14.61,14.61,0,0,0,5.18-.81,10.24,10.24,0,0,0,3.65-2.35,13.75,13.75,0,0,0,2.55-3.6q1-2.06,2-4.7l3.4-8.76a6,6,0,0,0,0-4.48L200.51,33.94A6,6,0,0,1,206.08,25.62Z"/></svg> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Tommaso Poletti - Script Codes CSS Codes
body { position: relative; height: 100vh; width: 100%; overflow: hidden;
}
.logo { position: absolute; width: 200px; height: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; overflow: visible;
}
svg { overflow: visible;
}
A Pen by Tommaso Poletti - Script Codes JS Codes
var xmlns="http://www.w3.org/2000/svg", select = function(s) { return document.querySelector(s);}, selectAll = function(s) { return document.querySelectorAll(s);}, letterO = select('.letter__o'), letterOLine = select('.letter__o__line'), firstL = select('.letter__l__first'), secondL = select('.letter__l__second'), letterY = select('.letter__y');
var ollyLogo = new TimelineMax({ paused: false, yoyo: false, repeat:-1, repeatDelay:0.5
});
TweenMax.to([firstL, secondL, letterY], 0, {fill: "none"});
TweenMax.to([letterO], 0, {fill:"blue", transform: "translate(-9px -5px)"});
TweenMax.to([letterO, letterOLine], 1, {fill:"blue", transform: "translateX(200px) scale(1.2)", onComplete: complete});
function complete() {
alert("complete")
}
Developer | Tommaso Poletti |
Username | tomma5o |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 2,738 Kb |
Views | 12,144 |
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 |
Css Codepen Profile | 2,791 Kb |
Animation SVG with SMIL | 11,419 Kb |
Jelly Radio Button | 2,779 Kb |
Menu Material Fixed | 3,362 Kb |
Washing Machine UI | 3,267 Kb |
Simple Mobile Search input | 3,400 Kb |
Button Ideas for eCommerce | 3,565 Kb |
Search with Right Click | 2,781 Kb |
Site Under Construction SVG animation | 3,647 Kb |
Mappa-interattiva | 3,758 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 |
A cube | KyleDavidE | 18,627 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Underlined form fields | Mitchdot | 2,323 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!