What's My Name?
How do I make an what's my name??
Animated SVG name - stroke offset.. What is a what's my name?? How do you make a what's my name?? This script and codes were developed by James Nowland on 31 October 2022, Monday.
What's My Name? - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>What's My Name?</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" style="max-height: 90vh;" viewBox="0 0 819.5 614.4" enable-background="new 0 0 819.5 614.4" xml:space="preserve">
<defs> <clippath id="james"> <path d="M286.5,138c4-3-9-25-16-15c-64,67-111,87-202,122c-1,18-17,48-17,48c50.2,0.8,145.7-80.1,204.9-130 c-2.9,33.3-10.9,125.3-10.9,140c0,18-5,202-5,202c-2,22-3,84-46,60s-79-116-60-155c13-27,13.5-21.5,4-17c0,0-59,61-27,132 s98,74,98,74c37,7,61-83,52-147c-9-64,3.2-281.1,14.6-305.5C279.9,143.4,283.3,140.6,286.5,138z"/>
<path d="M351.5,335.7c18.7-8.7,15.3-20.7,9.3-24.7s-45.3-2.7-53.3,29.3s-16,55.3-5.3,71.3c10.7,16,47.4,17.3,63.4,2.7 c15.9-14.7,17.3-27.3,17.3-27.3c8.7,28.7,20.7,32.7,32.7,32s27.3-5.3,47.3-30.7c20-25.3,25.3-29.3,28.7-27.3s-4.6,19.8,6.7,21.3 c13.3,1.8,23.7,2.7,54.7-20.7c19.3-13.3,32,1.3,34,18.7c2,17.3,6.8,18.2,14.7,18c9.3,0,16-8,12.7-9.3c-3.3-1.3-16,8-20-11.3 c-4-19.3-8-32-32.7-34.7s-38.7,20.6-41.3,24c-2.7,3.4-14.7,1.4-14.7-7.3c0-8.7,0.7-22.7-14.7-22.7c-22-2-57.3,73.3-76.7,67.3 c-19.3-6-16.2-12.8-18-23.3c-1.8-10.8,5.3-41.3,5.3-41.3c-12.3-3.3-14.7,2.7-17.3,16c-2.7,13.3-26.5,60.8-49.1,57.4 s-34.2-6.1-16.2-50.8c14-42.8,30-35.3,32.7-34.7C354.2,328.4,351.5,335.7,351.5,335.7z"/>
<path d="M708.8,400.4c-10.7-3.3-21.3-2.7-21.3-2.7c31.3-40,20.7-63.3,12.7-71.3c-14.7-16.9-31.3-16.8-48,13.3 c-16.7,30.2-10.3,52.2,0,62.7c-8.7,6-3.3,13.3-3.3,13.3s8,2.7,16.7-6c26.7,12,48.7,20.4,57.3,14.9 C731.5,419,719.5,403.7,708.8,400.4z M667.5,388.4c-17,6.8,0.7-51.3,16.4-46.7C699.5,346.4,678.8,382.4,667.5,388.4z"/>
<path d="M736.2,332c-6.6-12.8,22-27.7,38.7-28.3c16.7-0.7,18.7,7.3,16.7,11.3c-2,4-26.7,4-27.3,17s3.3,16.3,12.7,21.7 c9.3,5.3,46.7,38.7,35.3,58c-11.3,19.3-24.7,40-72,40c-47.3,0-100.3-12-125.1-22c-24.9-10-77.5-13.4-109.5-3.4 c-46.2,10.7-63,3.3-103.6,38s-53,64-66.4,62s15.3-34.7,24.7-43.3c9.3-8.7,65.3-55.3,105.3-63.3s82-15.9,126-4.6 c44,11.3,98.7,26.6,120.7,26.6s62.7-5.3,76.7-26.6c14-21.4,5.3-32.8-7.3-42.1S741.5,342.4,736.2,332z"/> </clippath>
</defs>
<path class="path-j" clip-path="url(#james)" fill="none" stroke="currentColor" stroke-width="47" stroke-linecap="round" stroke-miterlimit="10" d="M23.5,273 C118.4,289.9,304,93.1,307.1,78.1S268.5,2.5,265.5,31s-23.9,386.6-14.9,464.6s-36.1,106.5-61.5,91.5c-25.4-15-113.9-84.4-47.9-198.2 "/>
<path class="path-am" clip-path="url(#james)" fill="none" stroke="currentColor" stroke-width="24" stroke-linecap="round" stroke-miterlimit="10" d="M353.5,335.4 c5-15.4,3-27.7-21.5-11.4c-24.5,16.3-42.5,70.1-17.5,91s54,9.5,77-96c16.6-76-11.6,72.8,5.2,83.9c16.8,11.1,35.1,16.4,64.8-27.9 c38.5-57.5,36-20,41-4.4c8,24.9,47.9-33.4,64-18.6s29.5,42.5,44.7,43.2"/>
<path class="path-e" clip-path="url(#james)" fill="none" stroke="currentColor" stroke-width="27" stroke-linecap="round" stroke-miterlimit="10" d="M652.9,410 c24.6-11.5,46.9-40.4,45.1-62s-17.5-24-26-17c-11.9,9.8-27,31.8-20.5,52c7,21.7,45,32.1,73,30"/>
<path class="path-s" clip-path="url(#james)" fill="none" stroke="currentColor" stroke-width="27" stroke-linecap="round" stroke-miterlimit="10" d="M802.5,312.2 c-38,6.8-74,4.6-44,34.2c30,29.6,57.4,40.8,44,66.9s-82.3,44.4-132.7,31.3s-123.6-47.9-197.5-19.2c0,0-108.9,41.7-159.9,119.7"/>
</svg>
</svg>
</body>
</html>
What's My Name? - Script Codes CSS Codes
.path-j { stroke-dasharray: 1500; stroke-dashoffset: 1500; -webkit-animation: dash 0.8s ease-out forwards; animation: dash 0.8s ease-out forwards;
}
.path-am { stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 0.9s ease-out forwards 0.86s; animation: dash 0.9s ease-out forwards 0.86s;
}
.path-e { stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 0.6s ease-in forwards 1.5s; animation: dash 0.6s ease-in forwards 1.5s;
}
.path-s { stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 0.69s ease forwards 2.3s; animation: dash 0.69s ease forwards 2.3s;
}
@-webkit-keyframes dash { to { stroke-dashoffset: 0; }
}
@keyframes dash { to { stroke-dashoffset: 0; }
}
body { background-color: #cceef5;
}
svg { color: #c5003e; -webkit-transition: color 0.2s ease-in; transition: color 0.2s ease-in;
}
svg:hover { color: #00628C;
}
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 4 |
Size | 3,518 Kb |
Views | 8,096 |
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 |
Three Heading Solutions | 11,415 Kb |
Ad Folding without regions | 3,938 Kb |
SVG Modified with Query String | 1,663 Kb |
Login Form CSS only validation | 5,739 Kb |
Letting.js Demo using vanilla js. | 2,298 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
Step 3 | 3,874 Kb |
Lorem pixel Images | 2,290 Kb |
Animating Scale with text featuring blurry raster DPI issues | 2,983 Kb |
Outer Gradient Circle Progress | 17,247 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 |
Jstam.com Home Page | Jstam | 10,558 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Table Exercise | Fresco | 9,585 Kb |
Count up | Alanshortis | 2,391 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Glitchy Text Effect | Kescoe | 2,208 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!