CODEWITHSUNDEEP
javascriptcsscanvassvg
Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

How can I animate a drawing effect? (Preferably css3 only)

I want to make a drawing effect of tree that looks something like this one with a progressive line like here. I would prefer using only css3 with svg/canvas and js. Do you have any ideas?

More info:

I tried to cut a tree into pieces and animate piece by piece the appearance but it's not cursive cause it's to much details on syncronizing delays and durations because every piece has a different length and so on. All of this is made without svg. I want to now if i can animate a line path.

Upvotes: 2

Views: 4377

Answers (2)

Thomas W
Thomas W

Reputation: 15361

You can do this with plain SVG. SVG provides the <animate> element for declarative animation.

What you want (as I understand it) is a line that appears as if it was drawn in front of the viewer's eyes. You can use the stroke-dasharray property for this purpose. This property defines a dash pattern using a series of values that defines the length of dashes and gaps. The strategy would be: First we have a dash that has length 0 and a gap that is at least as long as the whole path. This means we see nothing (or only the first point at the start of the path). In the end we want a dash that's at least the full length of the path. We want the dash to gradually become longer and longer until it reaches its final length (the length of the full path).

The simplest case would be:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <!-- This is the path of a spiral -->
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
      stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <!-- This defines the animation: 
         The path is roughly 2305 units long, it will be drawn in 5 seconds -->
    <animate from="0,2305" to="2305,0" dur="5s"
        attributeName="stroke-dasharray" repeatCount="indefinite"/>
  </path>
</svg>

More sophisticated things can be done using multiple values (using the values attribute) instead of one from and one to value:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0"/>
  </path>
</svg>

You can specify the precise timing (when which value listed in values will be reached) using the keyTimes attribute:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0" 
      keyTimes="0;.9;1"/>
  </path>
</svg>

See this in action on Tinkerbin.

Something similar can be done using CSS3:

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <style type="text/css">
    path {
      animation-name:animateDash;
      animation-duration:5s;
      animation-iteration-count:infinite;
    }
    @keyframes animateDash {
      from{stroke-dasharray:0,2305}
      to  {stroke-dasharray:2305,0}
    } 
  </style>
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
    stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>

Decide for yourself which method you prefer.

Upvotes: 1

Ryan McDonough
Ryan McDonough

Reputation: 10012

Yes, take a look at this rendering of the Bahamas Logo using CSS 3

It describes his process, and techniques. Also you can view the source.

There are more that can be found here

Update:

Also maybe this Sencha Animator product may help?

Upvotes: 1

Related Questions