This demo illustrates the following concepts:

• How to use SVG to create visual objects not easily create with standard DOM elements and how to use them in conjunction with other elements inside the page.
• How to create and manipulate SVG elements with jQuery. You must create the element outside of jQuery using document.createElementNS(). This object can be passed used with jQuery to create a jQuery object and then all the jQuery functions can be used on the element (attach events, animate, selectors, etc).
• How to use jQuery to animate SVG elements without any other plugins. The animate function is not natively capable of animating SVG attributes so the step callback is required to manually calculate and set the attributes. The fx.pos value provides the means to find the in-between values in the animation and jQuery.attr() can be used to set the value.
• How to create sequenced animations using the jQuery animate function. This demo has several stages to create the pulse wave effect. First, the wave is charged by expending the radius of the circle. Once charged, as long as the mouse button is held, a red pulsing circle is shown to indicate the pulse is fully charged. After the mouse is release, the wave contracts to begin the discharge and, finally, the pulse is released by expending the circle of the page. Each stage is started via the mouse event or the completion of one of the other animations.

Hold the mouse down anywhere on the page to charge the wave. Release the mouse to emit the pulse wave outward from the selected charging point.