Animation of hand-drawn letters using SVG technology

I'm exploring SVG animations and am currently struggling with animating a slogan letter by letter. The font is handwritten and should give the effect of being written with a text marker. Can anyone provide me with some tips on how to approach this challenge? Or are there more efficient ways to achieve this animation?

Here is the slogan I want to animate letter by letter:

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21">
  <title>bedifferent</title>
  <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z" transform="translate(-79.87 -108.93)" />
  ...
  ...
  ...
  <path d="M744.24,273.12c-8.83,8.46-208.15,82.33-205.23,87.63,2,4,77.46-7.6,82.88-8.41,5.75-.95,5.89,4.1-0.44,5.52-14.79,3.23-71,14-102,16-9,.43-12.17-11.06-6.8-16.73C539.35,329.52,737.1,257.46,740.72,256c3.29-1.34,0,0,5.84-2.61C756.28,249,753.4,264.52,744.24,273.12Z" transform="translate(-79.87 -108.93)" />
</svg>

View the animation on Codepen

javascriptjqueryhtmlcsssvg

Answer №1

The current structure of your svg prevents the animation you are trying to achieve. Using the stroke-dasharray animation alone won't allow you to draw the letters as if they were created with a text marker because the stroke is positioned "around" the letters. This limitation is evident in the animation example below:

path{
  fill:transparent;
  stroke:#000;
  stroke-width:1;
  stroke-dasharray:0,0,800;
  animation:stroke 3s ease-out;
}
@keyframes stroke {
  from { stroke-dasharray:0,800,800; }
  to { stroke-dasharray:0,0,800; }
}
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21">
  <title>bedifferent</title>
  <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93(. . . truncated for brevity) . . .

To achieve the desired effect, you should use the clipPath element to clip the letters and then create a new path that will fill the clipped path. This can be accomplished by animating the stroke-dasharray attribute.

You can refer to the codepen by Lars Munkholm for an example of a handwriting animation with a varying stroke width.

Answer №2

To create an animated effect using stroke-dasharray for borders, consider using your path as a clipPath and applying it to a g element;

Within the g element, draw a single line-path stroke that can be animated to resemble a marker effect. Make sure the width is wide enough to cover each character line but narrow enough to not interfere with adjacent characters;

Here's an example of animating the background of a clipped region:

rect {
  animation: scat 4s infinite alternate
}
@keyframes scat {
  0% {
    transform: scaleY(1) rotateZ(0);
  }
  33%{
    transform: scaleY(0.33) rotateZ(30deg);
  }
  66%{
    transform: scaleY(0.66) rotateZ(-30deg);
  }
  100% {
    transform: scaleY(0.1) rotateZ(0);
  }
}
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21">
  <defs>
    <clipPath id='logo'>
      <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z"
      transform="translate(-79.87 ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to change a value within an array stored in local storage using Vanilla JavaScript?

I recently started learning vanilla JavaScript and followed a tutorial on creating a shopping cart. While the tutorial was helpful, it was cut short and I had to figure out how to update a value in a local storage array by clicking a button on my own. Can ...

javascriptjson

struggling with utilizing ajax for outputting data using PHP and POST variables

Currently, I am attempting to execute a PHP script that retrieves data from a database by simply clicking a button. My intention is to implement AJAX in order to prevent the page from refreshing. While testing with traditional post/submit methods and enc ...

javascriptphpjqueryajax

Webfont issues can lead to incorrect display on your website

Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...

htmlcssinternet-explorercross-browserwebfonts

How can I upload an image file using VueJS and Django Rest Framework?

Hello, I am currently in the process of editing a blog page using VueJS and Django Rest Framework. However, I am facing an issue when trying to upload a photo - I keep receiving an error message stating that "the sent data is not a file." Additionally, I a ...

javascriptdjangovue.jsdjango-rest-frameworkaxios

AngularJS radio buttons can now be selected as multiple options

Currently, I am in the process of learning angular and have implemented a radio button feature in my program. However, I have encountered a perplexing issue that I cannot seem to explain. <!DOCTYPE html> <html> <head> <meta ch ...

javascripthtmlangularjs

Tips on merging HTML node lists from various `getElement`s

Is there a way to combine HTML elements and extract values using array methods? I am struggling to merge them as a nodeList. I tried using get elements and array.unshift to consolidate elements into one variable. var elemsLabel = document.querySelecto ...

javascripthtmlarraysgoogle-apps-scriptweb-applications

What is the best way to configure maxSockets in Node.js while working with Express?

Can the maximum number of sockets in Node.js be adjusted while working with the Express framework? More information can be found here. ...

javascriptnode.jsexpress

Having trouble with blurriness in the SVG image loading on three.js

Currently, I am using loadTexture (THREE.ImageUtils.loadTexture('/images/areaYellow.svg')) to load SVG images. However, when I zoom in on the image, it becomes blurred. Is there a way to load the image without this blurriness? I am currently work ...

javascriptthree.js

Issues have arisen with the functionality of noneditable contents in tinymce

I am currently using the tinyMCE editor and I need to make certain content readonly (nonEditable). According to the documentation, if I apply the class "mceNonEditable" to specific elements, it should meet this requirement. However, when I select that ele ...

javascripttinymcetinymce-4

How can Data Value be displayed instead of percentage in Gebo Pie Charts?

$.plot(elem, data, { // // series : { pie : { show : true, highlight : { opacity ...

jquerychartstooltippie-chart

Unable to establish session using jquery

I am trying to set a session using jQuery, but I keep encountering this error. I have looked for solutions online, but haven't been able to find one that works. Can someone please help me out? Thank you! ...

javascriptjquerysession

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

"Enhance your website design with a navbar that seamlessly blends with the background color

Question 1: I have a requirement for my navbar to affix overlay on top of the background color and image of the div (top-banner). Currently, when I scroll down, the background color overlays my navbar affix instead. How can I ensure that my navbar sta ...

jqueryhtmlcsstwitter-bootstrap

What are the steps to generate an npm package along with definition files?

Is it possible to create an NPM package with definition files containing only interfaces declared in *.ts files? Consider a scenario where we have two interfaces and one class definition: export interface A { id: number; } export interface B { name: s ...

javascriptnode.jstypescriptnpm

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

javascriptjqueryangularjsmemory-leaks

What is the best way to shift an image within a div using CSS?

I am currently facing a challenge with moving an image inside a div element. I need to adjust the image by 50 pixels down and 50 pixels left, but I'm having difficulty figuring out how to do this in CSS. I am struggling to find the correct code to con ...

htmlcss

Cypress and VueJS: How to target elements that are dynamically generated following a specific user interaction

I am currently testing a new feature where a button will only appear for the user to click after they have completed another action. Before proceeding with the action, I am verifying if the button exists: cy.get('span') .contains('Selec ...

javascriptvue.jstestingautomated-testscypress

execute a C++ application within a web browser using HTML

Recently, I created a captcha program using c++ and sfml. Now, I'm interested in running this program on an HTML page. Can anyone provide guidance on how to accomplish this? ...

c++htmlcaptcha

How can you use C# code to control the visibility of a table row in HTML?

I am trying to display or hide a table row based on the current month using DateTime.Now.Month in my HTML code, but I can't seem to remember the correct syntax. The code I have tried is not working as expected. Can anyone help me with the correct synt ...

c#html

IFrame transparency setting not recognized

I am encountering an issue with transparency when adding an iframe to a webpage. I have set the allowTransparency attribute of the iFrame to true, but upon inspecting the element using Internet Explorer's F12 Developer Tools, I noticed that although t ...

htmliframe