--- title: "SVG Handwriting: Animation with Flair" description: Learn to create animated handwriting using SVGs and GSAP. image: https://www.bitovi.com/hubfs/kobu-agency-387557-unsplash-1140x570.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Design ](https://www.bitovi.com/blog/topic/design) | January 26, 2021 # SVG Handwriting: Animation with Flair Learn to create animated handwriting using SVGs and GSAP. ![The Bitovi Team](https://www.bitovi.com/hubfs/TheBitoviTeam%20(1).png) The Bitovi Team Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) ## On trend: handwritten and animated typography 2020 was the year of animated and [hand-written typography](https://speckyboy.com/hand-written-typography/). This design trend is likely to [continue into 2021](https://digitalagencynetwork.com/top-typography-design-trends/). A few CodePen examples of the latest "live in the moment as you watch me write" trend: - [Se7ensky](https://codepen.io/se7ensky/pen/waoMyx) - [Marina](https://codepen.io/marinamcpeak/pen/XYNdvd) - [Get Back to Business](https://codepen.io/tutsplus/pen/vdexgK) - [Marketing Lab](https://codepen.io/tripti1410/pen/d8f5285a84699aa4741a78ce1a423d1e) - [Cassie](https://codepen.io/cassie-codes/pen/mNWxpL) - and our very own ["love" animation](https://codepen.io/hkutcherb/pen/mdrJWme) ![Looking over the shoulder of a man writing words in calligraphy](https://www.bitovi.com/hs-fs/hubfs/kobu-agency-387557-unsplash-1140x570.jpg?width=1140&name=kobu-agency-387557-unsplash-1140x570.jpg) ## Want to try it? While handwriting animation could be created in programs like Adobe Animate or AfterEffects, the resulting animated GIF file would be large. So how do you create these impressive animations without compromising performance? Use vector graphics (**SVG**) for scalability and small file size, along with a pro-level JavaScript animation framework (**GSAP**) specifically designed for SVGs. Sorry, CSS animations won't cut it this time. You may also like: Our article “[Prepare for anything with GSAP](https://www.bitovi.com/blog/prepare-for-anything-with-gsap)” where we recount how and why we chose GreenSock as the best animation platform for a single-page app project. *Note*: Although[GreenSock Animation Platform](https://greensock.com/) (GSAP) is free, even for commercial use, you'll need their **DrawSVG plugin**, which is only available to[Club GreenSock](https://greensock.com/club/) members at a yearly membership fee of $75-150 per year (depending on which membership level you chose). However, you can[Try GSAP 3 Bonus Plugins FREE on CodePen](https://codepen.io/GreenSock/pen/OPqpRJ). ![CodePen for GSAP 3 Bonus Plugins](https://www.bitovi.com/hs-fs/hubfs/Try%20Club%20GreenSock%20Bonus%20Plugins%20FREE%20on%20Codepen.png?width=1792&name=Try%20Club%20GreenSock%20Bonus%20Plugins%20FREE%20on%20Codepen.png) ## Here's what you'll need - A vector design program like [Adobe Illustrator](https://www.adobe.com/products/illustrator.html), Sketch, Figma, Inkscape, etc. - [CodePen](https://codepen.io/) - A text or code editor to open SVG files and copy code to CodePen. [VSCode](https://code.visualstudio.com/) is a good one. ## Meet Pen Tool, your new BFF Once you have some handwriting picked out (vector or bitmap, it doesn't matter), your first step will be to fire up your vector design program. The instructions below were written for Illustrator. Creating SVGs for handwriting animation is time-consuming, but well worth the effort. Why is it so tedious? I’ll explain. The word you want to write is often a compound path created using a custom typeface. Translation: it is a shape, not a line. You want to go from stamping the entire word at once (shape) to writing one in cursive (line). Since a shape does not have a path with a start and end point to follow or trace, you will have to create one. Drawing and adjusting a path takes time. You'll become very comfortable using Adobe Illustrator's Pen Tool and Anchor Point Tool. This path is what you will tell the animation code to trace. Imagine a big fat marker following and drawing over a thin faint pencil line. Of course, that big fat marker can only draw a big fat line (always the same width), so if you want your handwriting to have a variable width stroke (like that of a calligraphy brush or pen), you'll need to use a stencil. Clipping paths function as a stencil to cut off the outer edges of a stroke, making the line is the exact width and shape you want. You’re going to turn that big fat marker into a brush or calligraphy pen. This means you will need to draw a path (line) and clipping path (stencil) for each word letter stroke. That means many paths and clipping paths for you and Pen Tool. Skip to the section titled, “[Multiple paths vs a single path](https://www.bitovi.com/blog/svg-handwriting-animation-with-flair#multiple-paths)”, to learn why. Once you've drawn your paths (you're 90% done at this point), you'll export them as SVG files, copy and paste the SVGs into CodePen, and animate them using GSAP. Believe me, once you leave Illustrator land, it's all downhill. Optionally, you can use [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimize the SVG prior to animation. ![Illustrator file showing paths and clipping paths for each stroke](https://www.bitovi.com/hs-fs/hubfs/Illustrator%20paths.png?width=3584&name=Illustrator%20paths.png) ## Copy paths and stencils to CodePen Now that you have paths and clipping paths exported as SVGs, it's time to open them in your code editor, then copy and paste them into CodePen. Fork the pen below as a template. ### HTML In the HTML tab, create your SVG as follows: ```           ``` ### CSS In the CSS tab, set the width of your SVG. ``` svg { width: 40vw;} ``` ### JS You'll want the following external scripts. In CodePen, click the Settings button, then the JS tab, then scroll to the Add External Scripts/Pens section, and add: - [https://unpkg.co/gsap@3/dist/gsap.min.js](https://unpkg.co/gsap@3/dist/gsap.min.js) - [https://assets.codepen.io/16327/DrawSVGPlugin3.min.js](https://assets.codepen.io/16327/DrawSVGPlugin3.min.js) - [https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js](https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js) Then, write the following: ``` TweenMax.set(".path", { drawSVG: "0% 0%" });tl_love = new TimelineMax({ delay: 2, repeat: 2 });tl_love.set("#love", { autoAlpha: 1 }); ```   This tells GSAP to get ready for the magic. "tl_" is an abbreviation for "timeline", however, you could name the variable whatever you like. If you want to animate (draw, write) all strokes at the same speed, code: ``` /* Animate all strokes at the same speed */gsap.utils.toArray(".path").forEach(path => {tl_love.to(path, 0.3, { drawSVG: "100%", ease: Linear.easeNone, stagger: 0.1 })}); ```   If you want more control, since some strokes are longer/shorter and more/less complex than others, code: ``` /* Animate each stroke at a different speed */tl_love.to(".path_l1", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })tl_love.to(".path_l2", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })tl_love.to(".path_o1", 0.7, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })tl_love.to(".path_v1", 0.7, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })tl_love.to(".path_e1", 0.3, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })tl_love.to(".path_e2", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 }) ```   Ta-dah! You should be up and running writing. Here at Bitovi, we love a challenge. If you are interested in sprucing up your web application, we are here to help. Find out more on [our Visual Design page](https://www.bitovi.com/ux-design-consulting/user-interface-design). ## Multiple paths vs a single path Here's why you don't want to use a single path: you'll get unwanted bleeds and artifacts where letter strokes cross over each other. Compare v1.0, which uses a single path and a single clipping path/stencil for the entire word, to v2.0, which uses multiple paths and clipping paths, a pair for each stroke. ### v1.0 ### v2.0   ## Additional Resources Learn more from these tutorials. - [How to Get Handwriting Animation With Irregular SVG Strokes](https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/), **CSS-Tricks**, [Trapti Rahangdale](https://css-tricks.com/author/traptirahangdale/) on September 14, 2020 - [SVG Calligraphy Handwriting Animation](https://www.motiontricks.com/svg-calligraphy-handwriting-animation/), **Motion Tricks**, August 4, 2020 - [Handwriting Effect with DrawSVG](https://greensock.com/forums/topic/24812-handwriting-effect-with-drawsvg/), GreenSock, July 14, 2020 - [Animated handwriting effect (part 1)](https://www.motiontricks.com/animated-handwriting-effect-part-1/), **Motion Tricks**, June 9, 2020 - [Creating my logo animation](https://www.cassie.codes/posts/creating-my-logo-animation/), **Cassie**, [Cassie Evans](https://www.cassie.codes/), July 30, 2019 - [How to Get Handwriting Animation With Irregular SVG Strokes](https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f), **Medium**, [Meghan Sterling](https://medium.com/@sterling.meghan), April 29, 2018 [![Tag for user experience](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) user experience ](https://www.bitovi.com/blog/topic/user-experience)[![Tag for animation](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) animation ](https://www.bitovi.com/blog/topic/animation) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/DevOps%20Page/Blogs/blog-stackstorm-bitops/atom.png?height=117&name=atom.png) [ DevOps Automation using StackStorm - Cloud Deployment via BitOps ](https://www.bitovi.com/blog/devops-automation-using-stackstorm-bitops-infrastructure)   Next Post ![](https://lh5.googleusercontent.com/Ey0arranGbCErrhNxyn8bAn8j4pwOIai_TPOZ_dtyGa13zXfj__4YP8EDYocLqvGjHAxVyjCYH7dDmlLo1vwPuW10ZfGFi64SoNjrtOfyuNGMXqLy2e9D9OsmvY-7ZjzADB3SHY) [ Building an Image Gallery with NgRx ](https://www.bitovi.com/blog/building-an-image-gallery-with-ngrx) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/svg-handwriting-animation-with-flair", "@type" : "WebPage", "description" : "Learn to create animated handwriting using SVGs and GSAP." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "The Bitovi Team" }, "dateModified" : "June 25, 2021, 2:44:35 PM", "datePublished" : "2021-01-26 14:49:00", "description" : "Learn to create animated handwriting using SVGs and GSAP.", "headline" : "SVG Handwriting: Animation with Flair", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/kobu-agency-387557-unsplash-1140x570.jpg" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```