Drawsvg.js \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d jQuery \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 SVG<\/p>\n\n\n\n
\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 drawsvg, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435 \u2014<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang = \"en\">\n <head>\n <meta charset = \"UTF-8\">\n <link rel = \"shortcut icon\" type = \"image\/x-icon\" href = \"favicon.ico\">\n <link rel = \"stylesheet\" \n href = \"https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,600\">\n <link rel = \"stylesheet\" href = \"style.css\">\n <\/head>\n\t\n <body>\n <div class = \"intro\">\n <div class = \"container\">\n <div class = \"overlay\">\n <div class = \"inner\">\n <h1>jQuery DrawSVG Sample<\/h1>\n\n <div class = \"items-wrapper\">\n <div class =\"item active\">\n <svg viewBox = \"0 0 201 146\" class = \"svgClass\" \n style = \"background-color:#ffffff00\" \n xmlns = \"https:\/\/www.w3.org\/2000\/svg\" width = \"201\"\n height = \"146\">\n\t\t\t\t\t\t\t\t\t\n <g stroke = \"#FFF\" stroke-width = \"1\" fill = \"none\">\n <path d = \"M200.5 128.586c0 9.302-7.678\n 16.914-17.06 16.914H17.56C8.18 145.5.5 \n 137.888.5 128.586V29.414C.5 20.112 8.178 \n 12.5 17.56 12.5h165.88c9.382 0 17.06 \n 7.612 17.06 16.914v99.172z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M183.828 80.118c0 26.467-21.644 \n 47.924-48.34 47.924-26.698 \n 0-48.342-21.457-48.342-47.924s21.644-47.924 \n 48.34-47.924c26.698 0 48.342 21.457 48.342\n 47.924z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M171.98 80.118c0 19.978-16.338\n 36.177-36.493 36.177-20.15 \n 0-36.49-16.2-36.49-36.177 0-19.98 \n 16.34-36.177 36.49-36.177 20.155 0 \n 36.494 16.2 36.494 36.178z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M50.18 48.637c0 6.49-5.304 \n 11.747-11.852 11.747-6.543\n 0-11.847-5.258-11.847-11.747 0-6.488 \n 5.305-11.746 11.848-11.746 6.548 0 11.852 \n 5.26 11. 852 11.747z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M17.928 39.877c3.41-7.835 \n 11.258-13.305 20.416-13.305 9.16 0 17.006 \n 5.47 20.416 13.305\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M46 12V4H26v8\"\/>\n <path d = \"M94.833 12l11.5-11.5h59.5l11.5 11.5\"\/>\n <path d = \"M26.333 92.5h35.5\"\/>\n <path d = \"M26.333 105.5h43\"\/>\n <path d = \"M26.333 117.5h52\"\/>\n <\/g>\n\t\t\t\t\t\t\t\t\t\n <\/svg>\n <\/div>\n\n <div class = \"item\">\n <svg viewBox = \"0 0 207 105\" style = \"background-color:#ffffff00\" \n xmlns = \"https:\/\/www.w3.org\/2000\/svg\" width = \"207\" \n height = \"105\">\n\t\t\t\t\t\t\t\t\n <g stroke = \"#FFF\" stroke-width = \"1\" fill = \"none\">\n <path d = \"M127 63.496C127 85.306 144.455 \n 103 165.998 103 187.538 103 205 85.306 \n 205 63.496 205 41.682 187.537 24 165.998\n 24 144.455 24 127 41.682 127 63.496z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M195 63.497C195 47.206 182.015 34 166 34\"\/>\n\t\t\t\t\t\t\t\t\t\t\n <path d = \"M2 63.496C2 85.306 19.455 103 \n 41.002 103 62.542 103 80 85.306 80 63.496 \n 80 41.682 62.54 24 41.002 24 19.455 24 2\n 41.682 2 63.496z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M64.296 22.732C57.656 18.094 \n 47.492 16 41.002 16c-6.49 0-12.675 \n 1.33-18.3 3.732-5.622 2.404-10.686 \n 5.88-14.938 10.178\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M159.715 63.576c0 3.634 2.902 \n 6.575 6.49 6.575 3.582 0 6.484-2.94 \n 6.484-6.574 0-3.63-2.903-6.575-6.486-6.575-3.587\n 0-6.49 2.946-6.49 6.576z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M34.873 64.032c0 3.63 2.907 \n 6.575 6.494 6.575 3.578 0 6.485-2.945 \n 6.485-6.575 0-3.635-2.907-6.575-6.485-6.575-3.587 \n 0-6.494 2.94-6.494 6.575z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M163.25 57.026L141.773 3\"\/>\n <path d = \"M98 63.5H48\"\/>\n <path d = \"M101.73 57.63L70.5 14.013\"\/>\n <path d = \"M70.49 14.5h76.646v-.206\"\/>\n <path d = \"M139.134 14.505L108.468 57.95\"\/>\n <path d = \"M70.894 15.05L42.834 57.05\"\/>\n <path d = \"M70.5 14V3\"\/>\n <path d = \"M141.427 3.23s19.83-7.71 19.83 6.344\"\/>\n\t\t\t\t\t\t\t\t\t\t\n <path d = \"M97.816 62.52c0 3.576 2.86 6.475 \n 6.39 6.475s6.392-2.9 \n 6.392-6.476c0-3.577-2.86-6.476-6.39\n -6.476s-6.392 2.9-6.392 6.476z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M106.642 69.26l2.913 11.044\"\/>\n <path d = \"M105 83l10-5\"\/>\n <path d = \"M62.5 3.5h18\"\/>\n <\/g>\n\t\t\t\t\t\t\t\t\t\n <\/svg>\n <\/div>\n\n <div class = \"item\">\n <svg viewBox = \"0 0 201 116\" style = \"background-color:#ffffff00\" \n xmlns = \"https:\/\/www.w3.org\/2000\/svg\" width = \"201\" \n height = \"116\">\n\t\t\t\t\t\t\t\t\t\n <g stroke = \"#FFF\" stroke-width = \"1\" fill = \"none\">\n <path d = \"M19.5 101.5V6.45C19.5 3.176 23.12.5 \n 26.402.5H175.53c3.282 0 5.97 2.677 5.97\n 5.95v95.05\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M171.5 89.5h-140v-77h140v77z\"\/>\n\t\t\t\t\t\t\t\t\t\t\n <path d = \"M200.5 107.526c0 1.635-1.344 \n 2.974-2.985 2.974H3.485c-1.64 \n 0-2.985-1.34-2.985-2.974v-3.052c0-1.635\n 1.344-2.974 2.985-2.974h194.03c1.64 0 2.985 \n 1.34 2.9852.974v3.052z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M1 110l10.5 5.5\"\/>\n <path d = \"M11.604 115.5H189.46\"\/>\n <path d = \"M189.5 115.5l9.5-5.5\"\/>\n <path d = \"M99.5 7.5h5\"\/>\n <path d = \"M138.5 12.5l28 28\"\/>\n <path d = \"M148.5 12.5l18 18\"\/>\n <path d = \"M159.5 12.5l7 6\"\/>\n <\/g>\n\t\t\t\t\t\t\t\t\t\n <\/svg>\n <\/div>\n\n <div class = \"item\">\n <svg viewBox = \"0 0 200 155\" style = \"background-color:#ffffff00\" \n xmlns = \"https:\/\/www.w3.org\/2000\/svg\" width = \"200\" \n height = \"155\">\n\t\t\t\t\t\t\t\t\t\n <g stroke = \"#FFF\" stroke-width = \"1\" fill = \"none\">\n <path d=\"M161.996 151.39l-33.97-27.178-45.01 \n 30.576-35.67-27.603L.36 154.245 38.662 20.04 \n 80.893 4.034l39.066 17.41L161.995.213l37.792 \n 22.932-37.792 128.246z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M47.346 127.185L80.892 4.035\"\/>\n <path d = \"M83.015 154.788l36.942-133.343\"\/>\n <path d = \"M128.025 124.212l33.97-124\"\/>\n <path d = \"M46.278 23.935L32.29 75.605\"\/>\n <path d = \"M95.802 45.718L81.19 97.225\"\/>\n <path d = \"M106.91 33.115l-22.26 81.39\"\/>\n\t\t\t\t\t\t\t\t\t\t\n <path d = \"M176.768 46.665c0 3.523-2.85\n 6.376-6.366 6.376-3.514 0-6.364-2.852\n -6.364-6.375 0-3.512 2.85-6.37\n 6.364-6.37 3.516 0 6.366 2.858 \n 6.366 6.37z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M180.9 52.392l-10.844 \n 19.91-10.394-19.995s-1.143-3.215-1.\n 143-5.067c0-6.514 5.273-11.81 11.79-11.81 \n 6.508 0 11.782 5.296 11.782 11.81 \n 0 1.852-1.192 5.152-1.192 5.152z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M43.86 92.528c0 3.523-2.85 \n 6.376-6.367 6.376-3.514 0-6.364-2.\n 853-6.364-6.376 0-3.512 2.85-6.37 \n 6.363-6.37 3.517 0 6.366 2.858 \n 6.366 6.37z\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\n <path d = \"M47.99 98.255l-10.843 19.91L26.754 \n 98.17s-1.143-3.215-1.\n 143-5.067c0-6.514 5.275-11.81 \n 11.793-11.81 6.507 0 11.78 5.296 \n 11.78 11.81 0 1.852-1.192 \n 5.152-1.192 5.152z\"\/>\n <\/g>\n\t\t\t\t\t\t\t\t\t\n <\/svg>\n <\/div>\n\t\t\t\t\t\t\t\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\n <div id = \"fb-root\"><\/div>\n <script async src = \"\/\/assets.codepen.io\/assets\/embed\/ei.js\">\n <\/script>\n <script src = \"https:\/\/cdn.jsdelivr.net\/jquery\/1.11.3\/jquery.min.js\">\n <\/script>\n <script \n src = \"https:\/\/cdn.jsdelivr.net\/jquery.easing\/1.3\/jquery.easing.1.3.min.js\">\n <\/script>\n <script src = \"jquery.drawsvg.min.js\"><\/script>\n\t\t\n <script>\n $(function() {\n\n var $doc = $(document),\n $win = $(window);\n\n var $intro = $('.intro'),\n $items = $intro.find('.item'),\n itemsLen = $items.length,\n\t\t\t\t\n svgs = $intro.find('svg').drawsvg({\n callback: animateIntro,\n easing: 'easeOutQuart'\n }),\n\t\t\t\t\n currItem = 0;\n\n function animateIntro() {\n $items.removeClass('active').eq( currItem++ % itemsLen \n ).addClass('active').find('svg').drawsvg('animate');\n }\n\n animateIntro();\n\n var $header = $('header'),\n headerOffTop = $header.offset().top,\n isFixed = false;\n\n function menu() {\n if ( $win.scrollTop() >= headerOffTop ) {\n if ( !isFixed ) {\n isFixed = true;\n $header.addClass('affix');\n }\n } else if ( isFixed ) {\n isFixed = false;\n $header.removeClass('affix');\n }\n }\n\n $win.on('scroll', menu);\n menu();\n\n $header.on('click', 'a[href^=\"#\"]', function(e) {\n e.preventDefault();\n\n var hash = this.hash,\n offset = $(hash).offset().top;\n\n $('body, html').animate({\n scrollTop: offset\n }, 600, 'easeInOutQuart', function() {\n document.location.hash = hash;\n });\n });\n\n });\n <\/script>\n <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"Drawsvg.js \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d jQuery \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 SVG \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 drawsvg, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435 \u2014 <!DOCTYPE html> <html lang […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[154],"tags":[],"class_list":["post-4880","page","type-page","status-publish","hentry","category-jquery"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages\/4880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/comments?post=4880"}],"version-history":[{"count":0,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages\/4880\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/media?parent=4880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/categories?post=4880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/tags?post=4880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}