SVG Animated Text Stroke

Developer
Jay Karlsven
Size
3,635 Kb
Views
14,168
  1. SVG Animated Text Stroke Previews
  2. SVG Animated Text Stroke HTML Codes
  3. SVG Animated Text Stroke CSS Codes

How do I make an svg animated text stroke?

A technique I saw from another pen to animate the stroke of an inline SVG. This example adds a fill opacity animation also.. What is a svg animated text stroke? How do you make a svg animated text stroke? This script and codes were developed by Jay Karlsven on 14 October 2022, Friday.

SVG Animated Text Stroke Previews
IQ Test

SVG Animated Text Stroke - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animated Text Stroke</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="intro"> <div class="container-fluid"> <div class="row"> <div id="NameContainer"> <svg id="NameSvg"> <path class="name-tag" fill="#B3C100" stroke="#B3C100" stroke-miterlimit="10" d="M5.376,13.656V7.224h17.472v21.888c0,4-1.032,6.992-3.096,8.976	c-2.064,1.984-4.712,2.976-7.944,2.976c-4.032,0-7.553-1.552-10.56-4.656l3.888-5.376c2.016,2.177,4.128,3.264,6.336,3.264	c1.056,0,1.959-0.408,2.712-1.224c0.751-0.816,1.128-2.04,1.128-3.672V13.656H5.376z" /> <path class="name-tag" fill="#B3C100" stroke="#B3C100" stroke-miterlimit="10" d="M54.24,40.776l-3.12-7.248H37.056l-3.12,7.248h-7.968	L40.464,7.224h7.248l14.496,33.552H54.24z M44.112,17.208l-4.224,9.744h8.4L44.112,17.208z" /> <path class="name-tag" fill="#B3C100" stroke="#B3C100" stroke-miterlimit="10" d="M78.192,40.776h-7.488V27.528L59.088,7.224H67.2l7.248,12.48	l7.248-12.48h8.112L78.192,27.528V40.776z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M94.656,7.225h5.664v16.368l15.36-16.368h7.2l-13.488,14.688	l13.68,18.864h-6.72l-11.136-14.688l-4.896,5.28v9.408h-5.664V7.225z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M133.2,33.145l-3.36,7.632h-6.048l14.784-33.552h6.048	l14.784,33.552h-6.048L150,33.145H133.2z M147.695,27.913L141.6,14.088l-6.096,13.824H147.695z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M190.847,18.121c0,5.536-2.417,9.024-7.248,10.464l8.784,12.192	h-7.2l-8.016-11.28h-7.44v11.28h-5.664V7.225h12.48c5.119,0,8.784,0.864,10.992,2.592S190.847,14.313,190.847,18.121z M183.311,22.873c1.152-0.992,1.728-2.584,1.728-4.776c0-2.191-0.592-3.696-1.776-4.512c-1.184-0.816-3.296-1.224-6.336-1.224h-7.2	v12h7.056C179.983,24.36,182.159,23.865,183.311,22.873z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M199.007,40.776V7.225h5.664V35.4h15.312v5.376H199.007z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M236.327,11.64c-1.648,0-3,0.336-4.056,1.008	s-1.584,1.688-1.584,3.048c0,1.36,0.528,2.4,1.584,3.12c1.056,0.72,3.304,1.496,6.744,2.328c3.439,0.833,6.031,2,7.776,3.504	c1.744,1.504,2.616,3.72,2.616,6.648s-1.104,5.304-3.312,7.128c-2.208,1.824-5.104,2.736-8.688,2.736	c-5.249,0-9.905-1.807-13.968-5.424l3.552-4.272c3.391,2.944,6.912,4.416,10.56,4.416c1.824,0,3.271-0.392,4.344-1.176	c1.072-0.784,1.608-1.824,1.608-3.12s-0.504-2.304-1.512-3.024c-1.008-0.72-2.745-1.375-5.208-1.968	c-2.465-0.592-4.336-1.135-5.616-1.632c-1.28-0.496-2.417-1.144-3.408-1.944c-1.985-1.504-2.976-3.808-2.976-6.912	c0-3.104,1.128-5.496,3.384-7.176c2.256-1.68,5.047-2.52,8.376-2.52c2.144,0,4.272,0.353,6.384,1.056	c2.112,0.704,3.936,1.696,5.472,2.976l-3.024,4.272c-0.992-0.896-2.336-1.632-4.032-2.208	C239.646,11.928,237.975,11.64,236.327,11.64z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M271.487,40.776h-6.336L251.663,7.225h6.336l10.32,25.056	l10.32-25.056h6.336L271.487,40.776z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M313.342,7.225v5.328h-17.903v8.88h16.08v5.04h-16.08v8.976	h18.479v5.328h-24.144V7.225H313.342z" /> <path class="name-tag" fill="#5B575B" stroke="#5B575B" stroke-miterlimit="10" d="M346.318,7.225h5.664v33.552h-6.145l-19.008-24.48v24.48h-5.664	V7.225h5.664l19.488,25.056V7.225z" /> </svg> </div> </div>
</section>
</body>
</html>

SVG Animated Text Stroke - Script Codes CSS Codes

body { background-color: #F5F5F5; margin: 0; font-family: "Montserrat", sans-serif;
}
.intro { text-align: center;
}
.intro #NameContainer { position: relative; height: 48px; width: 354px; margin: 30px auto;
}
.intro #NameContainer #NameSvg { position: relative; height: 48px; width: 354px;
}
.intro #NameContainer #NameSvg .name-tag { stroke-dasharray: 500; stroke-dashoffset: 500; fill-opacity: 0; animation: draw 2.5s ease-in forwards; -webkit-animation: draw 2.5s ease-in forwards; -moz-animation: draw 2.5s ease-in forwards; -o-animation: draw 2.5s ease-in forwards; font-weight: bold; font-family: "Montserrat", sans-serif;
}
@keyframes draw { 0% { stroke-dashoffset: 500; } 75% { stroke-dashoffset: 0; fill-opacity: 0; } 95% { stroke-dashoffset: 500; } 100% { fill-opacity: 1; }
}
@-webkit-keyframes draw { 0% { stroke-dashoffset: 500; } 75% { stroke-dashoffset: 0; fill-opacity: 0; } 95% { stroke-dashoffset: 500; } 100% { fill-opacity: 1; }
}
SVG Animated Text Stroke - Script Codes
SVG Animated Text Stroke - Script Codes
Home Page Home
Developer Jay Karlsven
Username JayV30
Uploaded October 14, 2022
Rating 3
Size 3,635 Kb
Views 14,168
Do you need developer help for SVG Animated Text Stroke?

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!

Jay Karlsven (JayV30) Script Codes
Name
Rotating Gradient Overlay
Profile CSS
A Pen by Jay Karlsven
LESS MIXINS for Highlighting Images
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!