SVG WORD Path
How do I make an svg word path?
Greensock plugin. What is a svg word path? How do you make a svg word path? This script and codes were developed by Elena on 17 December 2022, Saturday.
SVG WORD Path Previews
SVG WORD Path - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG WORD Path</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 { background: #777; margin: 0;
}
#path-1,
#path-2{ fill: none; stroke: #ffffff; stroke-width: 2px; stroke-miterlimit: 10;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box"> <div class="s-pen"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="850px" height="550px" viewBox="0 0 850 550">
<!-- Primary path --> <path id="m" fill="none" stroke="#FF5A00" stroke-width="15" stroke-linejoin="bevel" stroke-miterlimit="10" d="M35.25,175.5V63L67,175.5 L98.25,63v112.5"/> <path id="oo" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M129,149.375v-63.75c0,0,3.875-16.75,21.875-16.75 s21.739,17,21.739,17l0.136,63.5c0,0-3.875,20.25-21.875,20.25S129,149.375,129,149.375z"/> <path id="i" fill="none" stroke="#FF5A00" stroke-width="15" stroke-linejoin="bevel" stroke-miterlimit="10" d="M203,63v113l46-113v113" /> <path id="p" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M311.75,176V68.75h17c0,0,24.25-0.25,24.25,23.75 c0,26-22.5,25-22.5,25l-18.75-0.25"/> <path id="a1" fill="none" stroke="#FF5A00" stroke-width="15" stroke-linejoin="bevel" stroke-miterlimit="10" d="M372,176l23.25-113 l24.25,113"/> <path id="a2" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M410.25,140.123h-30.868"/> <path id="b" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M487,68.75h-40.25V169.5h23.75 c0,0,16.5-1.5,16.5-27.25s-15-25.75-15-25.75l-24-0.25"/> <path id="o" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M515,149.25V85.5c0,0,3.875-16.75,21.875-16.75 s21.739,17,21.739,17l0.136,63.5c0,0-3.875,20.25-21.875,20.25S515,149.25,515,149.25z"/> <path id="t1" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M601.75,175.5V75"/> <path id="t2" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M573.5,67.5h56"/> <path id="y1" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M645.25,63.25V168.5h22.5c0,0,19,0,19-26 s-16.25-26.625-16.25-26.625h-22.25"/> <path id="y2" fill="none" stroke="#FF5A00" stroke-width="15" stroke-miterlimit="10" d="M715,63.25V175.5"/> <path id="path" fill="none" d="M35.25,173.5V63L67,175.5L98.25,63v112.5L129,149.375v-63.75c0,0,20.5-48.125,41,0.125v63.5 c0,0-13.878,42.383-38.689,6.816L203,63v114.5L249,63v113l65-0.5L311.75,63c0,0,100.25,15.25,12.75,56.125L370,175.5L395.25,63 l24.25,113L404,140.123h-18L487,68.75l-43,0.125V173c0,0,43,4.746,43-32.877s-32.488-23.805-31.493-23.795s-0.995,0-0.995,0 L515,149.25V85.5c0,0,19.729-41,43.614,0.25l0.136,63.5c0,0-19.072,44.672-41.661,6.211L601.75,175.5V75l-28.25-7.5h56h15.75v102 H666c0,0,20.477-1.09,20.477-32.545S656,115.875,656,115.875l59-52.625V177.5"/> <g id="pen"> <rect x="14.476" y="425.256" transform="matrix(0.5843 -0.8115 0.8115 0.5843 -333.4081 257.3389)" fill="#050505" width="140.009" height="57.696"/> <g> <polygon fill="#050505" points="132.279,363.212 105.834,375.122 152.911,409.017 155.817,380.159 "/> </g> <polygon fill="#FF5D05" points="156.658,371.82 158.723,351.301 139.92,359.771 "/> <path fill="#050505" d="M18.042,497.152c-0.304,0.356-0.621,0.689-0.903,1.08c-4.015,5.577-4.043,12.42-0.067,15.284 l32.183,23.171c3.977,2.862,10.457,0.665,14.472-4.913c0.282-0.391,0.497-0.798,0.739-1.199L18.042,497.152z"/> <path fill="#FAFCFC" d="M109.738,395.48c1.811,1.305,2.221,3.826,0.918,5.637l-67.421,93.646c-1.303,1.81-3.826,2.22-5.637,0.917 l0,0c-1.811-1.303-2.221-3.827-0.918-5.637l67.421-93.646C105.405,394.588,107.929,394.178,109.738,395.48L109.738,395.48z"/> <path fill="#FAFCFC" d="M130.926,410.733c1.811,1.305,2.221,3.829,0.918,5.639l-67.421,93.645 c-1.303,1.81-3.827,2.223-5.637,0.917l0,0c-1.811-1.303-2.221-3.826-0.918-5.636l67.421-93.645 C126.592,409.844,129.116,409.431,130.926,410.733L130.926,410.733z"/> </g> </svg> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=43'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12'></script> <script src="js/index.js"></script>
</body>
</html>
SVG WORD Path - Script Codes CSS Codes
body { background: #777; margin: 0;
}
#path-1,
#path-2{ fill: none; stroke: #ffffff; stroke-width: 2px; stroke-miterlimit: 10;
}SVG WORD Path - Script Codes JS Codes
// ----------------------------------------------------------
var tl = new TimelineLite();
TweenMax.set("#pen", {xPercent: -100, yPercent: 0});
TweenMax.to("#pen", 14.5, { bezier: { values: MorphSVGPlugin.pathDataToBezier("#path" ,{align:"#pen"}), type: "cubic" } //repeat: -1
});
tl.fromTo("#m", 1, {drawSVG:"0 0"}, {drawSVG:"0 100%"});
tl.fromTo("#oo", 1, {drawSVG:"0 0"}, {drawSVG:"0 100%"});
tl.fromTo("#i", 1, {drawSVG:"0 0"}, {drawSVG:"0 100%"});
tl.fromTo("#p", 1, {drawSVG:"0 0"}, {drawSVG:"0 100%"});
tl.fromTo("#a1", 1, {drawSVG:"0 0"}, {drawSVG:"0 100%"});
tl.fromTo("#a2", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#b", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#o", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#t1", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#t2", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#y1", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.fromTo("#y2", 1, {drawSVG:"0 0"}, {drawSVG:"100% 0%"});
tl.timeScale(1);
| Developer | Elena |
| Username | semenchenko |
| Uploaded | December 17, 2022 |
| Rating | 3 |
| Size | 3,461 Kb |
| Views | 8,096 |
Do you need developer help for SVG WORD Path?
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!
Elena (semenchenko) Script Codes
| Name | Size |
| Zen cube | 2,083 Kb |
| Css piramide | 2,681 Kb |
| PROCESS INFOGRAPHIC | 4,623 Kb |
| A Pen by Elena | 3,573 Kb |
| Slider CSS Only | 8,018 Kb |
| Calc.js | 4,200 Kb |
| Card | 3,220 Kb |
| VideoBg | 2,592 Kb |
| Pricing Table | 6,784 Kb |
| Animation countdown | 3,081 Kb |
Create amazing Facebook ads 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 |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
| Tab panels | Accessibility | 0 Kb |
| A Pen by lizz | Lizz | 10,068 Kb |
| Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
| A Pen by Theun | Tjoen | 6,152 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| Css color for svg | Ademilter | 2,392 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!