SVG Drawing animation (Part 2) – Pure CSS animation

Intermediate CSS tutorial: This tutorial covers placing the SVG code into a webpage, some responsive CSS tips and animating with pure CSS3 (includes keyframes) to appear as if the illustration is being drawn onto the page.

Demo

  1. Create your standard webpage in HTML (<head> and <body> tag, doctype, meta tags, etc). Open your SVG in your favoured code editor (e.g. Notepad++). Copy and paste your SVG code into your <body> section and wrap this code into a div. I have called mine “svgWrapper” (see below)
    <div id="svgWrapper">
    [insert SVG code here]
    </div>
    
  2. The image below shows what my SVG currently looks on the page and you can see a demo of this page too. Now I will need to correct the positioning of my SVG on the page using CSS because I want my animation to be fixed to the bottom left side of the page.
    insert-svgThe first part of CSS is going to remove any padding and margin that has been added by the browser (some add 8px margin to the <body>), this will remove the white gaps on the sides of this SVG. Overflow hidden and 100% width & height is going to ensure the SVG covers the entire page but does not create a scrollbar. You can see the demo of this result here.

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
  3. So far the SVG is currently not fixed to the bottom left side of the page. This is especially problematic for small resolutions such as mobile (see image in step 2).

    First, select the DIV containing your SVG. The CSS below is going to ensure the SVG spans across the page with 100% width & height of its parent (this is the <body element> which has already been set as 100%) and position the DIV to the bottom left side of the page.

    #svgWrapper {
        position: relative;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    

    Now some extra CSS measurements for the SVG itself. This CSS will fix my SVG to the centre of my DIV.

    The old way of doing this was 50% left and then margin-left [the object’s width / 2] (e.g. left: 50%; object is 800px wide so add margin-left: 400px;). However, we want this to be responsive so we won’t know what the width of our SVG will be among the wide variety of resolutions so I am using translateX(-50%) which will work it out for me.

    You can see the demo of this result here, resize the browser to see that the SVG is now fixed to the bottom left.

    #svgPipes {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
  4. TIP: This is optional but you may want to also consider the preserveAspectRatio of your SVG. This sets the behaviour of how your SVG will scale, stretch and fit responsively to the browser. CSS tricks also explains this scaling very well.
  5. Now the SVG is ready for animation! All my pipes are paths inside a group called “Pipes” so I am targeting all of them using #Pipes path. This animation is going to work by animating the stroke of my paths. stroke-dasharray is going to add a gap in the stroke and stroke-dashoffset is the distance added before the dash pattern, think of it like a padding. These two together are going to give an illusion of the line being drawn out.
     
    The animation is a short-hand of many animation properties. The animation CSS below includes: animation name (I have called my animation “dash”), animation duration, animation direction (forwards), animation timing function (Linear plays the animation with the same speed from beginning to end), animation delay.

    #Pipes path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        -webkit-animation: dash 8s forwards linear .2s;
        animation: dash 8s forwards linear .2s;
    }
    
  6. The animation name specified in the last step, dash, now needs to be defined and we are going to use CSS keyframes to achieve this dash animation. In our keyframes, we have a from state (the start of the animation duration) and a to state (end of the animation duration). You can have states in-between such as 50% would be the middle of the animation duration. Inside these states, you are going to define what happens. So in my keyframes, the stroke-dashoffset is decreasing which will gradually reveal the full line.

    TIP: Don’t forget your CSS prefixes.

    @-webkit-keyframes dash {
        from {
            stroke-dashoffset: 1000;
        }
    
        to {
            stroke-dashoffset: 0;
        }
    }
    
    @keyframes dash {
        from {
            stroke-dashoffset: 1000;
        }
    
        to {
            stroke-dashoffset: 0;
        }
    }
    

    You can see the demo of this result here. Notice that there are paths that are long than others so the animation takes longer to complete and it doesn’t look very appealing having all the paths animating at once. This is where we get to the clever bit and LESS steps in. Part 3 coming soon!

Go to Part 3 >>

Share
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *