We now have a youtube channel. Subscribe!

jQuery Drawsvg.js Plugin



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the jQuery Drawsvg plugin.

Drawsvg.js is a jQuery plugin used for drawing svg images.

Example

The following below is a simple jQuery Drawsvg.js example -

<!DOCTYPE  html  lang = "en">
<html   xmlns =  "https://www.w3.org/1999/xhtml">
     <head>
          <meta   charset =  "utf-8">
          <title>Drawsvg.js Example</title>
          
          <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 = "https://www.w3.org/2000/svg"   width = "200"           
                                                  height = "150">  

                                             <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 = "https://www.w3.org/2000/svg"   width = "200"   
                                             height = "100">

                                             <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 = "https://www.w3.org/2000/svg"   width = "200"   
                                             height = "100">

                                             <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 = "https://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>

RECOMMENDED POST: jQuery Slideshow Plugin

Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the Tagsort.js Plugin.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain