Lightweight, simple to use jQuery plugin to animate SVG paths

Related tags

Effect svg jquery jquery-plugin animation svg-animations
Overview

jQuery DrawSVG

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

  • Weighs less than 2KB minified and 800 bytes gzipped.
  • Easy to use.
  • Easing and stagger support.
  • Free!

Usage

Include jQuery DrawSVG after jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script>

Initialize the plugin on the element you want to animate and store in a variable

var mySVG = $('#my_svg_element').drawsvg();

Run the animation

mySVG.drawsvg('animate');

Look at the demos for more advanced usages.

Options

Option Type Default Description
duration Integer 1000 The time to complete the animation of each path.
stagger Integer 200 Delay to start animating each individual path.
easing String swing Which easing function each path will use to transition.
Use jQuery Easing Plugin for different easing functions.
reverse Boolean false Direction that the line will be drawn.
callback Function function() {} A function to call once the animation has been completed.

Demos

Simple usage

Draw on scroll

Callback example

Animate mask path

Comments
  • Question - Is it possible to draw dashed lines?

    Question - Is it possible to draw dashed lines?

    Hi! Thanks for the plugin!

    Is it possible to draw dashed lines? I exported a dashed line from Sketch but when I use the plugin to draw the line it removes the dashed.

    Cheers!

    opened by ghost 2
  • Add npm install

    Add npm install

    As ES2016 becomes more and more popular, it would be awesome, if you would add an install method for node, so that we could use your awesome library by simply importing the drawsvg module. This would also make it a breeze to update the code without re-downloading your source files.

    opened by SamThilmany 1
  • 'SVGElement.offsetHeight' is deprecated

    'SVGElement.offsetHeight' is deprecated

    Chrome Canary reports "'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details". Obviously not too pressing yet but I thought I'd mention it.

    opened by johnslipper 1
  • Safari (possible iOS) Problem

    Safari (possible iOS) Problem

    In Safari, 'use strict'; is throwing a syntax error...

    SyntaxError: Cannot declare a parameter named 'progress' as it shadows the name of a strict mode function. (anonymous function)jquery.drawsvg.js:53

    opened by JayVerb 0
  • Callback on multiple drawsvg elements

    Callback on multiple drawsvg elements

    I'm running .drawsvg within a .each loop to draw all the SVGs on my page, however when I try and use $(this) or any variable scoped within the .each, it does not work - my variables are not passing to the callback. Or rather, the LAST variable defined in the each (so my last item) is the variable that gets passed to ALL the callbacks.

    For example, I have the letters: R E N - and every callback returns N in the console.log - instead of each returning the correctly scoped variable letter.

    I've tried passing the variable through like callback: function(letter) - but this has no effect.

    Help?

    $('.logo-letter').each(function(){
var letter 	= 	$(this),
	thisSvg = 	$(this).find('svg'),
	mySvg 	= 	thisSvg.drawsvg({
			callback: function() {
						console.log($(this));
						letter.addClass('loaded');
					}
				});
	mySvg.drawsvg('animate');
});
    opened by danielucas 4
  • TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)

    TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)

    Here's the stack error.

    [Error] TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined) animate (jquery.drawsvg.js:101) (anonymous function) (jquery.drawsvg.js:129) each (jquery-3.1.1.slim.min.js:2:3036) (anonymous function) (index.html:873) dispatch (jquery-3.1.1.slim.min.js:3:10565) trigger (jquery-3.1.1.slim.min.js:3:30395) (anonymous function) (jquery-3.1.1.slim.min.js:3:30907) each (jquery-3.1.1.slim.min.js:2:3036) h (bootstrap.min.js:7:1953) _transitionComplete (bootstrap.min.js:7:2910) l (bootstrap.min.js:7:2299) _activate (bootstrap.min.js:7:2369) show (bootstrap.min.js:7:1974) (anonymous function) (bootstrap.min.js:7:3117) each (jquery-3.1.1.slim.min.js:2:3036) _jQueryInterface (bootstrap.min.js:7:2961) (anonymous function) (bootstrap.min.js:7:3289) dispatch (jquery-3.1.1.slim.min.js:3:10565)

    opened by CSFlorin 2
  • Animation of a SVG graph does not work

    Animation of a SVG graph does not work

    Dear Leonardo and users of jQuery DrawSVG,

    first of all many thanks to Leonardo for providing this plugin! I would like to apply it to animate an SVG graph attached to this post (as SVG file in the folder GerIPI.zip). In my attempts to bring it to work, I added the code directly in the html document and tried the simplest code: var $svg = $('svg').drawsvg(); $svg.drawsvg('animate'); However, this did not work. Maybe there is some problem with the SVG file (which I unfortunately cannot find) since an attempt with some simple manually entered SVG code was successful.

    I would be very grateful if someone could give me any hint what could possibly go wrong while trying to animate my SVG graph. Many thanks in advance for your help!

    GerIPI.zip

    opened by marmarczak 0
  • Doesnt work?

    Doesnt work?

    Hi i have a problem with the following svg. Could you please help me?

    <svg id="3a48f74e-9e7c-4e03-a044-8ba0ff6767d9" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1928 589.63"> <defs> <style> .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .\36 54927d5-6c4b-4569-b4a9-835e32d551de, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .e473867e-952b-4d84-9e9a-b9f1b1214905, .fc333939-3a0a-4b35-9590-309d95aa77e8 { fill: none; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d { stroke: #68c6e0; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke-linecap: round; stroke-width: 8px; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .\36 54927d5-6c4b-4569-b4a9-835e32d551de, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .e473867e-952b-4d84-9e9a-b9f1b1214905, .edffdee3-8d93-4425-8276-e050fc9a1ad6, .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke-miterlimit: 10; } .bf718539-5a3a-4784-8756-0b3107cf9dc1 { stroke: url(#b59b411d-93a9-45ab-854f-99ff759dd406); } .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke: #406d76; } .bb93fe99-5498-4272-8c33-3acaf7dd2c1c { stroke: #003d48; } .ab532fbc-993f-4371-9fb0-504681daa114 { stroke: url(#9d0856c7-09e7-46fd-81e7-a70b65c018e6); } .\33 574d1ea-ea26-4368-861a-c621e7a22e4b { stroke: url(#16abb108-c869-4531-9dfe-d0111b19fe5b); } .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82 { stroke: url(#c51dd902-474d-4f1c-8bc8-c52955b0b665); } .\32 b7efd01-1675-46a5-8255-cdd88ed222a6 { fill: url(#95d6e285-e783-4df5-bc5e-aab40f48b5a9); } .\31 ce0d2b4-af1f-4a4d-950c-45a9f3e88db7, .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408, .edffdee3-8d93-4425-8276-e050fc9a1ad6 { fill: #fff; } .a82f478d-939b-4dff-bcff-ff4e56487ea7 { fill: url(#ecedf608-7f1b-4b07-a07e-109ca9370224); } .\36 54927d5-6c4b-4569-b4a9-835e32d551de { stroke: #fff; stroke-width: 1.33px; } .c18e6e86-e703-4aee-a4aa-ff2554f372ba { fill: url(#6ca99cff-da8a-4e1f-be1d-6ed5909b4e8d); } .\36 fd08600-4390-4cbd-8b2c-8c173408944b { fill: url(#770aa32b-0dbe-4939-bfc6-712325be20ba); } .c712a589-6dea-47cd-b186-020daf4cc9ef { fill: url(#eb09081a-6a6e-47be-8984-df1ccd04b32b); } .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408 { stroke-width: 3.86px; stroke: url(#eb4760b8-3c56-4e66-b3e0-7a0afc3d4a73); } .f3cb12af-65d6-4e2a-b4ce-5dad7f5f94cb { fill: url(#1287529a-3aa9-4cee-b604-6c786d35a551); } .\39 54881f4-32ba-4ff8-ba1f-e7f562cd5dc7 { fill: url(#8e1ca799-e9f1-475c-956b-3e9a3f761b89); } .\31 d30ed1b-fdd2-4afd-9191-b90b4fe58f6f { fill: url(#60916754-3be7-422c-8891-0ab7c7ffc955); } .e473867e-952b-4d84-9e9a-b9f1b1214905, .edffdee3-8d93-4425-8276-e050fc9a1ad6 { stroke-width: 3.26px; } .edffdee3-8d93-4425-8276-e050fc9a1ad6 { stroke: url(#99300956-f02f-4c8a-92dd-4ecf915210a9); } .\39 240911c-d1e9-40a2-88ec-62ad59367ac4 { fill: url(#12af0959-8be6-4f88-87fa-387d8ddee9a9); } .e473867e-952b-4d84-9e9a-b9f1b1214905 { stroke: url(#32e39175-1846-4e20-911d-ebab691a2442); } </style> <linearGradient id="b59b411d-93a9-45ab-854f-99ff759dd406" x1="897.1" y1="-154.5" x2="897.1" y2="292.6" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0.24" stop-color="#809ea4" /> <stop offset="0.37" stop-color="#7e9ca3" /> <stop offset="0.43" stop-color="#77979d" /> <stop offset="0.47" stop-color="#6b8e95" /> <stop offset="0.5" stop-color="#598188" /> <stop offset="0.53" stop-color="#426f78" /> <stop offset="0.55" stop-color="#265a64" /> <stop offset="0.57" stop-color="#06414c" /> <stop offset="0.58" stop-color="#003d48" /> <stop offset="0.67" stop-color="#08434e" /> <stop offset="0.83" stop-color="#1e545e" /> <stop offset="1" stop-color="#406d76" /> </linearGradient> <linearGradient id="9d0856c7-09e7-46fd-81e7-a70b65c018e6" x1="774.4" y1="-62" x2="901.1" y2="-62" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0.13" stop-color="#c1272d" /> <stop offset="1" stop-color="#809ea4" /> </linearGradient> <linearGradient id="16abb108-c869-4531-9dfe-d0111b19fe5b" x1="774.4" y1="22.1" x2="901.1" y2="22.1" xlink:href="#9d0856c7-09e7-46fd-81e7-a70b65c018e6" /> <linearGradient id="c51dd902-474d-4f1c-8bc8-c52955b0b665" x1="774.4" y1="-151.1" x2="901.1" y2="-151.1" xlink:href="#9d0856c7-09e7-46fd-81e7-a70b65c018e6" /> <linearGradient id="95d6e285-e783-4df5-bc5e-aab40f48b5a9" x1="723.4" y1="111.1" x2="783.4" y2="111.1" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#68c6e0" /> <stop offset="1" stop-color="#003d48" /> </linearGradient> <linearGradient id="ecedf608-7f1b-4b07-a07e-109ca9370224" x1="723.4" y1="22.1" x2="783.4" y2="22.1" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="6ca99cff-da8a-4e1f-be1d-6ed5909b4e8d" x1="723.6" y1="-62.4" x2="783.6" y2="-62.4" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="770aa32b-0dbe-4939-bfc6-712325be20ba" x1="736.27" y1="-70.97" x2="759.27" y2="-70.97" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="eb09081a-6a6e-47be-8984-df1ccd04b32b" x1="723.4" y1="-149" x2="783.4" y2="-149" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="eb4760b8-3c56-4e66-b3e0-7a0afc3d4a73" x1="185.77" y1="353.9" x2="294.63" y2="353.9" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="1287529a-3aa9-4cee-b604-6c786d35a551" x1="220.78" y1="324.89" x2="259.1" y2="324.89" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="8e1ca799-e9f1-475c-956b-3e9a3f761b89" x1="220.78" y1="374.5" x2="259.1" y2="374.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="60916754-3be7-422c-8891-0ab7c7ffc955" x1="220.78" y1="367.15" x2="259.1" y2="367.15" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="99300956-f02f-4c8a-92dd-4ecf915210a9" x1="1668.97" y1="356.5" x2="1777.23" y2="356.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="12af0959-8be6-4f88-87fa-387d8ddee9a9" x1="1707.86" y1="362.84" x2="1739.61" y2="362.84" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="32e39175-1846-4e20-911d-ebab691a2442" x1="1704.8" y1="356.5" x2="1741.36" y2="356.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> </defs> <title>Trinkwasserkreislauf</title> <g id="d99eabcb-5782-4741-9198-87e91e4d0d8d" data-name="Linien"> <g id="b8c0d69d-89e5-4c71-aca2-80d228267aea" data-name="Regenrohre ohne Nachhaltigkeit Kopie"> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="716" y1="467.6" x2="716" y2="30.1" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="4" y1="467.6" x2="716" y2="467.6" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="201.1" x2="716" y2="201.1" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="117" x2="716" y2="117" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="290.3" x2="716" y2="290.3" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="28.3" x2="716" y2="28.3" /> </g> <line class="bf718539-5a3a-4784-8756-0b3107cf9dc1" x1="901.1" y1="28.5" x2="901.1" y2="467.6" /> <line class="fc333939-3a0a-4b35-9590-309d95aa77e8" x1="901.1" y1="467.6" x2="1924" y2="467.6" /> <line class="bb93fe99-5498-4272-8c33-3acaf7dd2c1c" x1="901.1" y1="289.1" x2="782.4" y2="289.1" /> <line class="ab532fbc-993f-4371-9fb0-504681daa114" x1="901.1" y1="117" x2="782.4" y2="117" /> <line class="3574d1ea-ea26-4368-861a-c621e7a22e4b" x1="901.1" y1="201.1" x2="782.4" y2="201.1" /> <line class="359d65b9-4f8b-4a97-b95c-71bb4e050c82" x1="901.1" y1="27.9" x2="782.4" y2="27.9" /> </g> <g id="a23aaddc-4b70-4ed7-a74e-e21dbd319bd8" data-name="Icons"> <circle class="2b7efd01-1675-46a5-8255-cdd88ed222a6" cx="757.4" cy="290.1" r="30" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M760.5,639h-9.8a5.19,5.19,0,0,0-4.8,3.3,19.32,19.32,0,0,0-1,6.3.68.68,0,0,0,.7.7h15.9a.68.68,0,0,0,.7-.7h0C762.3,648.7,760.7,640.2,760.5,639Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M767.8,627.9H752.4a.68.68,0,0,0-.7.7h0v.3a.68.68,0,0,0,.7.7h14.7a.68.68,0,0,0,.7-.7h0v-1Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M767.8,630.4H746.4a1.5,1.5,0,0,0-1.6,1.5s3.3,6.3,4.2,6.3h12.6a7.22,7.22,0,0,0,6.2-6.3Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M743.6,612.7h7.6v14.6a2.43,2.43,0,0,1-2.4,2.4h-5.2a2.43,2.43,0,0,1-2.4-2.4V615.1A2.37,2.37,0,0,1,743.6,612.7Z" transform="translate(4 -341)" /> <circle class="a82f478d-939b-4dff-bcff-ff4e56487ea7" cx="757.4" cy="201.1" r="30" /> <circle class="654927d5-6c4b-4569-b4a9-835e32d551de" cx="757.4" cy="202.4" r="5.8" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M742.6,526.9a2.8,2.8,0,0,0-2.8,2.8h0v24.5a2.8,2.8,0,0,0,2.8,2.8h21.7a3,3,0,0,0,3-3V526.9Zm8.4,1.6a1.43,1.43,0,1,1-1.1,1.7v-.6a1.39,1.39,0,0,1,1.1-1.1Zm-4.1,0a1.43,1.43,0,1,1-1.1,1.7v-.6A1.53,1.53,0,0,1,746.9,528.5Zm-3.4,2.9a1.43,1.43,0,1,1,1.1-1.7v.6a1.72,1.72,0,0,1-1.1,1.1Zm10.7,19.7a7.69,7.69,0,1,1,6.9-8.4,4.3,4.3,0,0,1,0,1.6,7.86,7.86,0,0,1-6.9,6.8Z" transform="translate(4 -341)" /> <circle class="c18e6e86-e703-4aee-a4aa-ff2554f372ba" cx="757.6" cy="116.6" r="30" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="748" y="104.5" width="12" height="2" /> <path class="6fd08600-4390-4cbd-8b2c-8c173408944b" d="M745.8,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,745.8,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M745.8,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,745.8,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.2,449.7a.61.61,0,0,0,0-.8,2.51,2.51,0,0,1-.4-.7h0a1.61,1.61,0,0,1-.4.7.57.57,0,0,0,.8.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M751.8,449.9c.1,0,.3-.1.4-.1a.61.61,0,0,0,0-.8,2.51,2.51,0,0,1-.4-.7h0a1.61,1.61,0,0,1-.4.7.61.61,0,0,0,0,.8C751.5,449.8,751.6,449.9,751.8,449.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.7,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,748.7,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M745.3,450.7h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9.61.61,0,0,0,.8,0,.75.75,0,0,0,0-.9C745.6,451.2,745.4,451,745.3,450.7Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.6,452.4a.75.75,0,0,0,0-.9,2,2,0,0,1-.4-.8h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9A.61.61,0,0,0,755.6,452.4Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M751.9,452.5a.52.52,0,0,0,.4-.2.75.75,0,0,0,0-.9,2,2,0,0,1-.4-.8h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9A.4.4,0,0,0,751.9,452.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.5,450.7h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9.61.61,0,0,0,.8,0,.75.75,0,0,0,0-.9A3,3,0,0,1,748.5,450.7Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.9,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,744.9,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.7,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,755.7,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M752.1,455.2c.2,0,.3-.1.5-.2a.67.67,0,0,0,0-1,2.47,2.47,0,0,1-.4-.9h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1C751.7,455.2,751.9,455.2,752.1,455.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.4,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,748.4,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.4,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,744.4,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M756.1,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.76.76,0,0,0,.2-.5,1.42,1.42,0,0,0-.2-.6A1.93,1.93,0,0,1,756.1,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M752.2,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,752.2,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.2,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,748.2,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.6,445.5H756a5.74,5.74,0,0,0-5-5.2v-3.2h0v-.7H738v24h1v-23h10v2.8C747,440.6,744.6,443.5,744.6,445.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M739.3,475.1c0,.4-.1.4-.3.4a1,1,0,0,0-1,1,1.42,1.42,0,0,0,.2.6h2.1a2.61,2.61,0,0,0,1-2c0-.4.1-.4.3-.4a1.05,1.05,0,0,0,.9-.5,16,16,0,0,1-2.3-1A2.65,2.65,0,0,0,739.3,475.1Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M768.1,475.5c-.2,0-.3,0-.3-.4a2.36,2.36,0,0,0-1.1-2.1,20,20,0,0,1-2.1,1,1,1,0,0,0,.9.7c.2,0,.3,0,.3.4a2.22,2.22,0,0,0,1,2h2.1a1,1,0,0,0-.2-1.4,1.42,1.42,0,0,0-.6-.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M736.7,463h-2.9l1.8,4.2c1.6,3.8,6,6.8,9.7,6.8h16.2c3.7,0,8.2-3,9.9-6.7l2-4.3Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M773.9,460.4H733.1c-.8,0-1.5.4-1.5,1v.5c0,.5.7.6,1.5.6h40.8c.8,0,1.5,0,1.5-.6v-.5C775.5,460.8,774.8,460.4,773.9,460.4Z" transform="translate(4 -341)" /> <circle class="c712a589-6dea-47cd-b186-020daf4cc9ef" cx="757.4" cy="30" r="30" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.8,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,744.8,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M764.4,361.9H741.8c0-5,5.1-9,11.3-9S764.4,356.9,764.4,361.9Z" transform="translate(4 -341)" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="745.8" y="22.2" width="22.6" height="3" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M763.9,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,763.9,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M757.5,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,757.5,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.9,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,750.9,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,744,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M764.8,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,764.8,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M757.9,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,757.9,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.7,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,750.7,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M743.1,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.55,1.55,0,0,0,743.1,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M765.9,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.81,1.81,0,0,0,765.9,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M758.3,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.66,1.66,0,0,0,758.3,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.4,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.55,1.55,0,0,0,750.4,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M742.3,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,742.3,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M766.9,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,766.9,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M758.7,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,758.7,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.2,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,750.2,385.8Z" transform="translate(4 -341)" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="755.9" y="2.2" width="3.1" height="12.4" /> <g id="4c216e04-5abc-4a21-9662-4a9aedcd64e8" data-name="ICONS ANSCHLÜSSE"> <circle class="303b154c-1561-49ef-b7bc-7a8ee2f68408" cx="244.2" cy="532.9" r="52.5" /> <path class="f3cb12af-65d6-4e2a-b4ce-5dad7f5f94cb" d="M235.2,853.9a7.34,7.34,0,0,0,9.8,0c2.7-2.2,2.7-6.9-.1-10.6a34.77,34.77,0,0,1-4.7-9.2V834a34.25,34.25,0,0,1-4.8,9.3C232.4,847,232.4,851.7,235.2,853.9Z" transform="translate(4 -341)" /> <polygon class="954881f4-32ba-4ff8-ba1f-e7f562cd5dc7" points="234.6 569.5 253.6 569.5 256.3 537.5 231.9 537.5 234.6 569.5" /> <path class="1d30ed1b-fdd2-4afd-9191-b90b4fe58f6f" d="M224.2,862.7l4.3,47.9a1.38,1.38,0,0,0,1.3,1.1h20.7a1.22,1.22,0,0,0,1.3-1.1l4.3-47.9.2-1.2a1.9,1.9,0,0,1,.7-1.1h0a.75.75,0,0,1,.9,0c.1.1.2.1.2.2a1.4,1.4,0,0,1,.3.9L254,910.8a3.6,3.6,0,0,1-3.6,3.3H229.7a3.76,3.76,0,0,1-3.6-3.3l-4.4-49.3a1.21,1.21,0,0,1,1.1-1.3h.1S223.9,860.3,224.2,862.7Z" transform="translate(4 -341)" /> </g> <rect class="edffdee3-8d93-4425-8276-e050fc9a1ad6" x="1674.6" y="483" width="105" height="105" /> <path class="9240911c-d1e9-40a2-88ec-62ad59367ac4" d="M1732.6,876.2a1.42,1.42,0,0,0-2,.1,2.81,2.81,0,0,1-3.9-.1,1.55,1.55,0,0,0-2.1-.1,2.66,2.66,0,0,1-3.7,0,1.52,1.52,0,0,0-2-.1,2.81,2.81,0,0,1-3.9.1,1,1,0,0,0-1.6,0c-1.1.8-2.4.5-2.4.2v.8a12.59,12.59,0,0,0,12.5,12.9,12.74,12.74,0,0,0,12.7-12.8v-.1l-.1-.4A3,3,0,0,1,1732.6,876.2Z" transform="translate(4 -341)" /> <circle class="e473867e-952b-4d84-9e9a-b9f1b1214905" cx="1727.1" cy="535.5" r="16.6" /> </g> </svg>

    opened by tilight 0
  • reverse option

    reverse option

    Hi,

    I'm trying to reverse the animation using the 'reverse' option, but the plays still forward :( I pasted below the code

    var schengenMap = $('#schengen').drawsvg({reverse: true}); schengenMap.drawsvg('animate');

    thank you in advance, matteo

    opened by piskello 2
Releases(1.1.0)
Owner
Leonardo Santos
JavaScript Developer
Leonardo Santos
GitHub http://lcdsantos.github.io/jquery-drawsvg/
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

GibboK 477 Nov 12, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
Javascript library to draw and animate images on hover

Hover effect Javascript library to draw and animate images on hover. If this project help you, you like this library or you just want to thank me, you

Robin Delaporte 1.5k Dec 23, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Modern ways of revealing new content using SVG animations.

Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe

Codrops 635 Dec 30, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

Sergey Korn 24 Aug 18, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow

Codrops 135 Dec 12, 2022
Lazy Line Painter - A Modern JS library for SVG path animation

Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett

Cam O'Connell 1.9k Jan 3, 2023
The Illusion of Life: An SVG Animation Case Study

svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani

Michael Ngo 116 Nov 8, 2022
Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Alex Kaul 301 Dec 24, 2022
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Codrops 33 Sep 23, 2022
Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Rian Ariona 333 Jan 4, 2023
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.

jquery.adaptive-backgrounds.js A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Brian Gonzalez 6.6k Dec 21, 2022