Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Web Designer
5th August 2014

Create clever SVG line animations

Lead designer at Letters, Inc Kenta Toshikura describes how you can emulate the scroll-based animations featured on letters-inc.jp using SVG techniques

Create clever SVG line animations

DOWNLOAD TUTORIAL FILES

Download Skrollr plugin

We start with the Skrollr.js plugin by Alexander Prinzhorn, available to download via github.com/Prinzhorn/skrollr and the ‘Download ZIP’ button. This will drive the scrolling part without requiring jQuery. In the archive you’ll find the necessary ‘skrollr.js’ file and some documentation and demos. You’ll find a relevant one for path animations like ours inside the repository’s ‘examples’ folder and the ‘path.html’ page.

Link the files

Create a new HTML page and attach the skrollr.js plugin file via a <script> tag. We’ve added jQuery as well here, purely to make it easier to call subsequent actions after the document has loaded – Skrollr doesn’t need it. Once the document has loaded we call skrollr.init() to run skrollr.js as follows:

001    <script type=”text/javascript” src=
”http://code.jquery.com/jquery-
2.0.1.min.js”></script>
002    <script type=”text/javascript” src=
”js/skrollr.js”></script>
003    <script type=”text/javascript”>
004    $(function(){
005        skrollr.init();
006    });
007    </script>

Draw the SVG path

This is where we design and plot our desired shape, preferably using a graphics editing suite such as Illustrator CS6. We then extract the SVG data and use <svg> and <path> tags in our page. In Illustrator we draw some curves using the Pen tool and go to Object>Artboards>Fit to Selected Art. After that we save it as an SVG file and open it within a code or text editor. You should see something similar to the following:

001    <svg version=”1.1” id=”layer” xmlns=
”http://www.w3.org/2000/svg” xmlns:
xlink=”http://www.w3.org/1999/xlink
” x=”0px”
002         y=”0px” width=”359.814px” height
=”159.813px” viewBox=”0 0 359.
814 159.813” enable-background=
”new 0 0 359.814 159.813”
003         xml:space=”preserve”>
004    <path fill=”none” stroke=”#ED003B” 
stroke-width=”4” stroke-linecap=
”round” stroke-linejoin=”round” 
stroke-miterlimit=”10” d=”
005        M2,2v46.512L48.512,2v46.512L95.023
,2v46.512L141.535,2v46.512L188.047
,2v46.512L234.559,2v46.512l45.
349-45.349
006        c0,0,0,32.558,0,76.744s17.
442,77.907,77.907,77.907”/>
007    </svg>

Scroll animation

From this SVG data we can set up our CSS classes for the <svg> tag using the width/height values from our graphic. For the path class we set desired styles for the line stroke, colour and width. Within the actual <svg> and <path> tags we then define our paths with the ‘data’ field, passing stroke-dashoffset:2000 when the scrollbar is at the page top and stroke-dashoffset:0 once the user has scrolled by 2,000 pixels. We then supply the ‘d’ string of path descriptions taken from our source graphic:

001    <style>
002    svg{
003        width:359.814px;
004        height:159.813px;
005    }
006    path{
007        stroke-dasharray:2000;
008        fill:none;
009        stroke:#fff;
010        stroke-width:4;
011    }
012    </style>
013    <svg>
014    <path data-0=”stroke-dashoffset
:2000;” data-2000=”stroke-
dashoffset:0;” d=”M2,2v46.512L48.
512,2v46.512L95.023,2v46.512L141.535
,2v46.512L188.047,2v46.512L234.559,
2v46.512l45.349-45.349 c0,0,0,32.558
,0,76.744s17.442,77.907,77.907,77.
907”/>
016    </svg>

More complex animations

This simplified animation can be made more dynamic or intricate by adding more SVG paths. So, for example, the following features 14 paths as opposed to just one. You can also opt for using a compound path for defining more complex shapes such as logos or typography. Check the full step code on the disc for links to the live examples online.

001    <style>
002    svg{
003        width:514px;
004        height:180px;
005    } 
006    path{
007        stroke-dasharray:1400;
008        fill:none;
009        stroke-width:2;
010        stroke:#fff;
011    } 
012    </style>
013    <svg>
014    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset
:0;” d=”M44.872,106.965 c6.586-6
.586,19.427-17.357,19.427-17.357”/>
015    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M29.872,72.607 c7.922,7.922,
19.428,17.356,19.428,17.356l-19.
428,17.354”/>
016    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M14.872,107.32 c6.556-5.857
,19.428-17.355,19.428-17.355L14.
872,72.607”/>
017    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M0.872,72.607 c6.365,5.688,
19.427,17.356,19.427,17.356L0.872,
107.32”/>
018    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M470.299,71.644 c-5.729,5.
117-19.428,17.357-19.428,17.
357l19.43,17.355”/>
019    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M485.301,106.356 C479.067,
100.122,465.872,89,465.872,89l19.
43-17.356”/>
020    <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M499.299,71.644 c-9.004,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • showhey0705

      It was worth to read, thanks for sharing the SVG animation technique!