Shapes & Gradients

Name: Media La Vista FZCO
Address: Dubai Silicon Oasis, Dubai, AE
Telephone: +971 55 581 01 49

SVG primitive shapes and gradient fills. All shapes support animations.

Shape Constructors

Constructor	Key Attributes
`$.rect()`	`x, y, width, height, rx, ry`
`$.circle()`	`cx, cy, r`
`$.ellipse()`	`cx, cy, rx, ry`
`$.line()`	`x1, y1, x2, y2`
`$.path()`	`d` (SVG path data)
`$.polygon()`	`points`

Common: fill, stroke, strokeWidth, opacity

Rounded Rectangle

$.rect({ x: 200, y: 100, width: 600, height: 400,
         rx: 20, ry: 20, fill: 'green'}).addTo('svg');

Gradients

Linear Gradient

$(function() {
  var gr = $.linearGradient({
    x1: 0, y1: 0, x2: 1280, y2: 0,
    stops: [{ offset: 0, color: 'blue'}, { offset: 1, color: 'red'}]
  }).addTo('svg');
  $.rect({ width: '100%', height: '100%', fill: gr.ref() }).addTo('svg');
});

Radial Gradient

$(function() {
  var gr = $.radialGradient({
    cx: 640, cy: 360, r: 300,
    stops: [{ offset: 0, color: 'white'}, { offset: 1, color: 'blue'}]
  }).addTo('svg');
  $.circle({ cx: 640, cy: 360, r: 300, fill: gr.ref() }).addTo('svg');
});

Animations — animate colors, motion, opacity
Frame Decoration — borders and shadows on layers