Creates a drawing surface or wraps existing SVG element.

or

or

or

Returns: object Element

Replaces construction of type {<name>} to the corresponding argument

Returns: string formatted string

Usage

// this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
    x: 10,
    y: 20,
    dim: {
        width: 40,
        height: 50,
        "negative width": -40
    }
}));

Transform angle to radians

Returns: number angle in radians

Transform angle to degrees

Returns: number angle in degrees

Equivalent to Math.sin() only works with degrees, not radians.

Returns: number sin

Equivalent to Math.tan() only works with degrees, not radians.

Returns: number tan

Equivalent to Math.cos() only works with degrees, not radians.

Returns: number cos

Equivalent to Math.asin() only works with degrees, not radians.

Returns: number asin in degrees

Equivalent to Math.acos() only works with degrees, not radians.

Returns: number acos in degrees

Equivalent to Math.atan() only works with degrees, not radians.

Returns: number atan in degrees

Equivalent to Math.atan2() only works with degrees, not radians.

Returns: number atan2 in degrees

Returns an angle between two or three points

Parameters

Returns: number angle in degrees

Returns distance between two points

Parameters

Returns: number distance

Returns squared distance between two points

Parameters

Returns: number distance

Returns closest point to a given one on a given path.

Parameters

Returns: object in format

Handy replacement for the typeof operator

Returns: boolean true if given value is of given type

Snaps given value to given grid

Returns: number adjusted value

Parses color string as RGB object

• Color name (red, green, cornflowerblue, etc)
• #••• — shortened HTML color: (#000, #fc0, etc.)
• #•••••• — full length HTML color: (#000000, #bd2300)
• rgb(•••, •••, •••) — red, green and blue channels values: (rgb(200, 100, 0))
• rgba(•••, •••, •••, •••) — also with opacity
• rgb(•••%, •••%, •••%) — same as above, but in %: (rgb(100%, 175%, 0%))
• rgba(•••%, •••%, •••%, •••%) — also with opacity
• hsb(•••, •••, •••) — hue, saturation and brightness values: (hsb(0.5, 0.25, 1))
• hsba(•••, •••, •••, •••) — also with opacity
• hsb(•••%, •••%, •••%) — same as above, but in %
• hsba(•••%, •••%, •••%, •••%) — also with opacity
• hsl(•••, •••, •••) — hue, saturation and luminosity values: (hsb(0.5, 0.25, 0.5))
• hsla(•••, •••, •••, •••) — also with opacity
• hsl(•••%, •••%, •••%) — same as above, but in %
• hsla(•••%, •••%, •••%, •••%) — also with opacity

Note that % can be used any time: rgb(20%, 255, 50%).

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••,
   5. error boolean true if string can't be parsed
2. }

Converts HSB values to a hex representation of the color

Returns: string hex representation of the color

Converts HSL values to a hex representation of the color

Returns: string hex representation of the color

Converts RGB values to a hex representation of the color

Returns: string hex representation of the color

Parses the color string and returns an object featuring the color's component values

Returns: object Combined RGB/HSB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••,
   5. error boolean true if string can't be parsed,
   6. h number hue,
   7. s number saturation,
   8. v number value (brightness),
   9. l number lightness
2. }

Converts HSB values to an RGB object

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••
2. }

Converts HSL values to an RGB object

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••
2. }

Converts RGB values to an HSB object

Returns: object HSB object in the following format:

1. {
   1. h number hue,
   2. s number saturation,
   3. b number brightness
2. }

Converts RGB values to an HSL object

Returns: object HSL object in the following format:

1. {
   1. h number hue,
   2. s number saturation,
   3. l number luminosity
2. }

Utility method Parses given path string into an array of arrays of path segments

Returns: array array of segments

Utility method Parses given transform string into an array of transformations

Returns: array array of transformations

Wraps a DOM element specified by CSS selector as Element

Returns: Element the current element

Wraps DOM elements specified by CSS selector as set or array of Element

Returns: Element the current element

Parses SVG fragment and converts it into a Fragment

Returns: Fragment the Fragment

Creates a DOM fragment from a given list of elements or strings

Returns: Fragment the Fragment

Simple implementation of Ajax

or

Returns: XMLHttpRequest the XMLHttpRequest object, just in case

Loads external SVG file as a Fragment (see Snap.ajax for more advanced AJAX)

Returns you topmost element under given point.

Returns: object Snap element object

Usage

Snap.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});

Let you write plugins. You pass in a function with five arguments, like this:

Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
    Snap.newmethod = function () {};
    Element.prototype.newmethod = function () {};
    Paper.prototype.newmethod = function () {};
});

Inside the function you have access to all main objects (and their prototypes). This allow you to extend anything you want.

Creates an animation object

Returns: object animation object

Runs generic animation of one number into another with a caring function

Returns: object animation object in mina format

1. {
   1. id string animation id, consider it read-only,
   2. duration function gets or sets the duration of the animation,
   3. easing function easing,
   4. speed function gets or sets the speed of the animation,
   5. status function gets or sets the status of the animation,
   6. stop function stops the animation
2. }

var rect = Snap().rect(0, 0, 10, 10);
Snap.animate(0, 10, function (val) {
    rect.attr({
        x: val
    });
}, 1000);
// in given context is equivalent to
rect.animate({x: 10}, 1000);

Matrix constructor, extend on your own risk. To create matrices use Snap.matrix.

Utility method Returns a matrix based on the given parameters

or

Returns: object Matrix

Returns an SVG markup string for the blur filter

Returns: string filter representation

Usage

var f = paper.filter(Snap.filter.blur(5, 10)),
    c = paper.circle(10, 10, 10).attr({
        filter: f
    });

Returns an SVG markup string for the shadow filter

or

which makes blur default to 4. Or

Returns: string filter representation

Usage

var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
    c = paper.circle(10, 10, 10).attr({
        filter: f
    });

Returns an SVG markup string for the grayscale filter

Returns: string filter representation

Returns an SVG markup string for the sepia filter

Returns: string filter representation

Returns an SVG markup string for the saturate filter

Returns: string filter representation

Returns an SVG markup string for the hue-rotate filter

Returns: string filter representation

Returns an SVG markup string for the invert filter

Returns: string filter representation

Returns an SVG markup string for the brightness filter

Returns: string filter representation

Returns an SVG markup string for the contrast filter

Returns: string filter representation

Returns the length of the given path in pixels

Returns: number length

Returns the coordinates of the point located at the given length along the given path

Returns: object representation of the point:

1. {
   1. x: number x coordinate,
   2. y: number y coordinate,
   3. alpha: number angle of derivative
2. }

Returns the subpath of a given path between given start and end lengths

Returns: string path string definition for the segment

Utility method Finds dot coordinates on the given cubic beziér curve at the given t

Returns: object point information in format:

1. {
   1. x: number x coordinate of the point,
   2. y: number y coordinate of the point,
   3. m: {
      1. x: number x coordinate of the left anchor,
      2. y: number y coordinate of the left anchor
   4. },
   5. n: {
      1. x: number x coordinate of the right anchor,
      2. y: number y coordinate of the right anchor
   6. },
   7. start: {
      1. x: number x coordinate of the start of the curve,
      2. y: number y coordinate of the start of the curve
   8. },
   9. end: {
      1. x: number x coordinate of the end of the curve,
      2. y: number y coordinate of the end of the curve
   10. },
   11. alpha: number angle of the curve derivative at the point
2. }

Utility method Returns the bounding box of a given cubic beziér curve

or

Returns: object bounding box

1. {
   1. x: number x coordinate of the left top point of the box,
   2. y: number y coordinate of the left top point of the box,
   3. x2: number x coordinate of the right bottom point of the box,
   4. y2: number y coordinate of the right bottom point of the box,
   5. width: number width of the box,
   6. height: number height of the box
2. }

Utility method Returns true if given point is inside bounding box

Returns: boolean true if point is inside

Utility method Returns true if two bounding boxes intersect

Returns: boolean true if bounding boxes intersect

Utility method Finds intersections of two paths

Returns: array dots of intersection

1. [
2. {
   1. x: number x coordinate of the point,
   2. y: number y coordinate of the point,
   3. t1: number t value for segment of path1,
   4. t2: number t value for segment of path2,
   5. segment1: number order number for segment of path1,
   6. segment2: number order number for segment of path2,
   7. bez1: array eight coordinates representing beziér curve for the segment of path1,
   8. bez2: array eight coordinates representing beziér curve for the segment of path2
3. }
4. ]

Utility method Returns true if given point is inside a given closed path.

Note: fill mode doesn’t affect the result of this method.

Returns: boolean true if point is inside the path

Utility method Returns the bounding box of a given path

Returns: object bounding box

1. {
   1. x: number x coordinate of the left top point of the box,
   2. y: number y coordinate of the left top point of the box,
   3. x2: number x coordinate of the right bottom point of the box,
   4. y2: number y coordinate of the right bottom point of the box,
   5. width: number width of the box,
   6. height: number height of the box
2. }

Utility method Converts path coordinates into relative values

Returns: array path string

Utility method Converts path coordinates into absolute values

Returns: array path string

Utility method Converts path to a new path where all segments are cubic beziér curves

Returns: array array of segments

Transform the path string with the given matrix

Returns: string transformed path string