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 ="https://www.w3.org/2000/svg" width ="201" height ="146"><g stroke ="#FFF" stroke-width ="1" fill ="none"><path d = "M200.5128.586c0 9.302-7.67816.914-17.0616.914H17.56C8.18145.5.5137.888.5128.586V29.414C.520.1128.17812.517.5612.5h165.88c9.382017.067.61217.0616.914v99.172z"/><path d = "M183.82880.118c0 26.467-21.64447.924-48.3447.924-26.6980-48.342-21.457-48.342-47.924s21.644-47.92448.34-47.924c26.698048.34221.45748.34247.924z"/><path d = "M171.9880.118c0 19.978-16.33836.177-36.49336.177-20.150-36.49-16.2-36.49-36.1770-19.9816.34-36.17736.49-36.17720.155036.49416.236.49436.178z"/><path d = "M50.1848.637c0 6.49-5.30411.747-11.85211.747-6.5430-11.847-5.258-11.847-11.7470-6.4885.305-11.74611.848-11.7466.548011.8525.2611.85211.747z"/><path d = "M17.92839.877c3.41-7.83511.258-13.30520.416-13.3059.16017.0065.4720.41613.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 ="207" height ="105"><g stroke ="#FFF" stroke-width ="1" fill ="none"><path d = "M12763.496C127 85.306144.455103165.998103187.53810320585.30620563.49620541.682187.53724165.99824144.4552412741.68212763.496z"/><path d ="M195 63.497C195 47.206 182.015 34 166 34"/><path d = "M263.496C2 85.30619.45510341.00210362.5421038085.3068063.4968041.68262.542441.0022419.45524241.682263.496z"/><path d = "M64.29622.732C57.65618.09447.4921641.00216c-6.490-12.6751.33-18.33.732-5.6222.404-10.6865.88-14.93810.178"/><path d = "M159.71563.576c0 3.6342.9026.5756.496.5753.58206.484-2.946.484-6.5740-3.63-2.903-6.575-6.486-6.575-3.5870-6.492.946-6.496.576z"/><path d = "M34.87364.032c0 3.632.9076.5756.4946.5753.57806.485-2.9456.485-6.5750-3.635-2.907-6.575-6.485-6.575-3.5870-6.4942.94-6.4946.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.81662.52c0 3.5762.866.4756.396.475s6.392-2.96.392-6.476c0-3.577-2.86-6.476-6.39-6.476s-6.3922.9-6.3926.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 ="201" height ="116"><g stroke ="#FFF" stroke-width ="1" fill ="none"><path d = "M19.5101.5V6.45C19.53.17623.12.526.402.5H175.53c3.28205.972.6775.975.95v95.05"/><path d ="M171.5 89.5h-140v-77h140v77z"/><path d = "M200.5107.526c0 1.635-1.3442.974-2.9852.974H3.485c-1.640-2.985-1.34-2.985-2.974v-3.052c0-1.6351.344-2.9742.985-2.974h194.03c1.6402.9851.342.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.996151.39l-33.97-27.178-45.0130.576-35.67-27.603L.36154.24538.66220.0480.8934.034l39.06617.41L161.995.213l37.79222.932-37.792128.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.76846.665c0 3.523-2.856.376-6.3666.376-3.5140-6.364-2.852-6.364-6.3750-3.5122.85-6.376.364-6.373.51606.3662.8586.3666.37z"/><path d = "M180.952.392l-10.84419.91-10.394-19.995s-1.143-3.215-1.143-5.067c0-6.5145.273-11.8111.79-11.816.508011.7825.29611.78211.8101.852-1.1925.152-1.1925.152z"/><path d = "M43.8692.528c0 3.523-2.856.376-6.3676.376-3.5140-6.364-2.853-6.364-6.3760-3.5122.85-6.376.363-6.373.51706.3662.8586.3666.37z"/><path d = "M47.9998.255l-10.84319.91L26.75498.17s-1.143-3.215-1.143-5.067c0-6.5145.275-11.8111.793-11.816.507011.785.29611.7811.8101.852-1.1925.152-1.1925.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;functionanimateIntro(){ $items.removeClass('active').eq( currItem++% itemsLen ).addClass('active').find('svg').drawsvg('animate');}animateIntro();var $header =$('header'), headerOffTop = $header.offset().top, isFixed =false;functionmenu(){if( $win.scrollTop()>= headerOffTop ){if(!isFixed ){ isFixed =true; $header.addClass('affix');}}elseif( 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></pre>
Leave a Reply