jQuery - Drawsvg.js

Drawsvg.js is a jQuery plugin to draw svg images

A Simple of drawsvg example as shown below

<!DOCTYPE html>

<html lang = "en">

 

   <head>

      <meta charset = "UTF-8">

      <link rel = "shortcut icon" type = "image/x-icon" href = "favicon.ico">

      <link rel = "stylesheet"

         href = "https://fonts.googleapis.com/css?family=Open+Sans:400,600">

      <link rel = "stylesheet" href = "style.css">

   </head>

           

   <body>

      <div class = "intro">

         <div class = "container">

            <div class = "overlay">

               <div class = "inner">

                  <h1>jQuery DrawSVG Sample</h1>

 

                  <div class = "items-wrapper">

                                                                        

                     <div class ="item active">

                        <svg viewBox = "0 0 201 146" class = "svgClass"

                           style = "background-color:#ffffff00"

                              xmlns = "http://www.w3.org/2000/svg" width = "201"

                              height = "146">

                                                                                                             

                           <g stroke = "#FFF" stroke-width = "1" fill = "none">

                              <path d = "M200.5 128.586c0 9.302-7.678

                                 16.914-17.06 16.914H17.56C8.18 145.5.5

                                 137.888.5 128.586V29.414C.5 20.112 8.178

                                 12.5 17.56 12.5h165.88c9.382 0 17.06

                                 7.612 17.06 16.914v99.172z"/>

                                                                                                                                     

                              <path d = "M183.828 80.118c0 26.467-21.644

                                 47.924-48.34 47.924-26.698

                                 0-48.342-21.457-48.342-47.924s21.644-47.924

                                 48.34-47.924c26.698 0 48.342 21.457 48.342

                                 47.924z"/>

                                                                                                                                     

                              <path d = "M171.98 80.118c0 19.978-16.338

                                 36.177-36.493 36.177-20.15

                                 0-36.49-16.2-36.49-36.177 0-19.98

                                 16.34-36.177 36.49-36.177 20.155 0

                                 36.494 16.2 36.494 36.178z"/>

                                                                                                                                     

                              <path d = "M50.18 48.637c0 6.49-5.304

                                 11.747-11.852 11.747-6.543

                                 0-11.847-5.258-11.847-11.747  0-6.488

                                 5.305-11.746 11.848-11.746 6.548 0 11.852

                                 5.26 11. 852 11.747z"/>

                                                                                                                                     

                              <path d = "M17.928 39.877c3.41-7.835

                                 11.258-13.305 20.416-13.305 9.16 0 17.006

                                 5.47 20.416 13.305"/>

                                                                                                                                     

                              <path d = "M46 12V4H26v8"/>

                              <path d = "M94.833 12l11.5-11.5h59.5l11.5 11.5"/>

                              <path d = "M26.333 92.5h35.5"/>

                              <path d = "M26.333 105.5h43"/>

                              <path d = "M26.333 117.5h52"/>

                           </g>

                                                                                                             

                        </svg>

                     </div>

 

                     <div class = "item">

                        <svg viewBox = "0 0 207 105" style = "background-color:#ffffff00"

                           xmlns = "http://www.w3.org/2000/svg" width = "207"

                           height = "105">

                                                                                                 

                          <g stroke = "#FFF" stroke-width = "1" fill = "none">

                              <path d = "M127 63.496C127 85.306 144.455

                                 103 165.998 103 187.538 103 205 85.306

                                 205 63.496 205 41.682 187.537 24 165.998

                                 24 144.455 24 127 41.682 127 63.496z"/>

                                                                                                                                     

                              <path d = "M195 63.497C195 47.206 182.015 34 166 34"/>

                                                                                                                         

                              <path d = "M2 63.496C2 85.306 19.455 103

                                 41.002 103 62.542 103 80 85.306 80 63.496

                                 80 41.682 62.54 24 41.002 24 19.455 24 2

                                 41.682 2 63.496z"/>

                                                                                                                                     

                              <path d = "M64.296 22.732C57.656 18.094

                                 47.492 16 41.002 16c-6.49 0-12.675

                                 1.33-18.3 3.732-5.622 2.404-10.686

                                 5.88-14.938 10.178"/>

                                                                                                                                     

                              <path d = "M159.715 63.576c0 3.634 2.902

                                 6.575 6.49 6.575 3.582 0 6.484-2.94

                                 6.484-6.574 0-3.63-2.903-6.575-6.486-6.575-3.587

                                 0-6.49 2.946-6.49 6.576z"/>

                                                                                                                                     

                              <path d = "M34.873 64.032c0 3.63 2.907

                                 6.575 6.494 6.575 3.578 0 6.485-2.945

                                 6.485-6.575  0-3.635-2.907-6.575-6.485-6.575-3.587

                                 0-6.494 2.94-6.494 6.575z"/>

                                                                                                                                     

                              <path d = "M163.25 57.026L141.773 3"/>

                              <path d = "M98 63.5H48"/>

                              <path d = "M101.73 57.63L70.5 14.013"/>

                              <path d = "M70.49 14.5h76.646v-.206"/>

                              <path d = "M139.134 14.505L108.468 57.95"/>

                              <path d = "M70.894 15.05L42.834 57.05"/>

                              <path d = "M70.5 14V3"/>

                              <path d = "M141.427 3.23s19.83-7.71 19.83 6.344"/>

                                                                                                                         

                              <path d = "M97.816 62.52c0 3.576 2.86 6.475

                                 6.39 6.475s6.392-2.9

                                 6.392-6.476c0-3.577-2.86-6.476-6.39

                                 -6.476s-6.392 2.9-6.392 6.476z"/>

                                                                                                                                     

                              <path d = "M106.642 69.26l2.913 11.044"/>

                              <path d = "M105 83l10-5"/>

                              <path d = "M62.5 3.5h18"/>

                           </g>

                                                                                                             

                        </svg>

                     </div>

 

                     <div class = "item">

                        <svg viewBox = "0 0 201 116" style = "background-color:#ffffff00"

                           xmlns = "http://www.w3.org/2000/svg" width = "201"

                           height = "116">

                                                                                                             

                           <g stroke = "#FFF" stroke-width = "1" fill = "none">

                              <path d = "M19.5 101.5V6.45C19.5 3.176 23.12.5

                                 26.402.5H175.53c3.282 0 5.97 2.677 5.97

                                 5.95v95.05"/>

                                                                                                                                     

                              <path d = "M171.5 89.5h-140v-77h140v77z"/>

                                                                                                                         

                              <path d = "M200.5 107.526c0 1.635-1.344

                                 2.974-2.985 2.974H3.485c-1.64

                                 0-2.985-1.34-2.985-2.974v-3.052c0-1.635

                                 1.344-2.974 2.985-2.974h194.03c1.64 0 2.985

                                 1.34 2.9852.974v3.052z"/>

                                                                                                                                     

                              <path d = "M1 110l10.5 5.5"/>

                              <path d = "M11.604 115.5H189.46"/>

                              <path d = "M189.5 115.5l9.5-5.5"/>

                              <path d = "M99.5 7.5h5"/>

                              <path d = "M138.5 12.5l28 28"/>

                              <path d = "M148.5 12.5l18 18"/>

                              <path d = "M159.5 12.5l7 6"/>

                           </g>

                                                                                                             

                        </svg>

                     </div>

 

                     <div class = "item">

                        <svg viewBox = "0 0 200 155" style = "background-color:#ffffff00"

                           xmlns = "http://www.w3.org/2000/svg" width = "200"

                           height = "155">

                                                                                                             

                           <g stroke = "#FFF" stroke-width = "1" fill = "none">

                              <path d="M161.996 151.39l-33.97-27.178-45.01

                                 30.576-35.67-27.603L.36 154.245 38.662 20.04

                                 80.893 4.034l39.066 17.41L161.995.213l37.792

                                 22.932-37.792 128.246z"/>

                                                                                                                                     

                              <path d = "M47.346 127.185L80.892 4.035"/>

                              <path d = "M83.015 154.788l36.942-133.343"/>

                              <path d = "M128.025 124.212l33.97-124"/>

                              <path d = "M46.278 23.935L32.29 75.605"/>

                              <path d = "M95.802 45.718L81.19 97.225"/>

                              <path d = "M106.91 33.115l-22.26 81.39"/>

                                                                                                                         

                              <path d = "M176.768 46.665c0 3.523-2.85

                                 6.376-6.366 6.376-3.514 0-6.364-2.852

                                 -6.364-6.375 0-3.512 2.85-6.37

                                 6.364-6.37 3.516 0 6.366 2.858

                                 6.366 6.37z"/>

                                                                                                                                     

                              <path d = "M180.9 52.392l-10.844

                                 19.91-10.394-19.995s-1.143-3.215-1.

                                 143-5.067c0-6.514 5.273-11.81 11.79-11.81

                                 6.508 0 11.782 5.296 11.782 11.81

                                 0 1.852-1.192 5.152-1.192 5.152z"/>

                                                                                                                                     

                              <path d = "M43.86 92.528c0 3.523-2.85

                                 6.376-6.367 6.376-3.514 0-6.364-2.

                                 853-6.364-6.376 0-3.512 2.85-6.37

                                 6.363-6.37 3.517 0 6.366 2.858

                                 6.366 6.37z"/>

                                                                                                                                     

                              <path d = "M47.99 98.255l-10.843 19.91L26.754

                                 98.17s-1.143-3.215-1.

                                 143-5.067c0-6.514 5.275-11.81

                                 11.793-11.81 6.507 0 11.78 5.296

                                 11.78 11.81 0 1.852-1.192

                                 5.152-1.192 5.152z"/>

                           </g>

                                                                                                             

                        </svg>

                     </div>

                                                                                    

                  </div>

               </div>

            </div>

         </div>

      </div>

                       

      <div id = "fb-root"></div>

      <script async src = "//assets.codepen.io/assets/embed/ei.js"></script>

      <script src = "https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>

      <script

         src = "https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>

      <script src = "jquery.drawsvg.min.js"></script>

                       

      <script>

         $(function() {

 

            var $doc = $(document),

            $win = $(window);

 

            var $intro = $('.intro'),

            $items = $intro.find('.item'),

            itemsLen = $items.length,

                                                

            svgs = $intro.find('svg').drawsvg({

               callback: animateIntro,

               easing: 'easeOutQuart'

            }),

                                                

            currItem = 0;

 

            function animateIntro() {

               $items.removeClass('active').eq( currItem++ % itemsLen

                  ).addClass('active').find('svg').drawsvg('animate');

            }

 

            animateIntro();

 

            var $header = $('header'),

            headerOffTop = $header.offset().top,

            isFixed = false;

 

            function menu() {

               if ( $win.scrollTop() >= headerOffTop ) {

                  if ( !isFixed ) {

                     isFixed = true;

                     $header.addClass('affix');

                  }

               } else if ( isFixed ) {

                  isFixed = false;

                  $header.removeClass('affix');

               }

            }

 

            $win.on('scroll', menu);

            menu();

 

            $header.on('click', 'a[href^="#"]', function(e) {

               e.preventDefault();

 

               var hash = this.hash,

               offset = $(hash).offset().top;

 

               $('body, html').animate({

                  scrollTop: offset

               }, 600, 'easeInOutQuart', function() {

                  document.location.hash = hash;

               });

            });

 

         });

      </script>

                       

   </body>

           

</html>