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');
});Related Pages
- Animations — animate colors, motion, opacity
- Frame Decoration — borders and shadows on layers
SpinetiX Wiki Reference
SVG shapes (rect, circle, ellipse, line, path, polygon) and linear/radial gradients.