Create Gradients

Why Create

<svg> elements - like <circle>, <rect>, and <ellipse> ... can have a reference to a <linearGradient> or <radialGradient> as their fill attribute, so I wanted to create a system where users can create gradients, save the gradients (not yet implemented, but the gradients should be saved as an svg and parsed client side), nad then use the gradients when creating svgs / svg animations on the Create SVG page.

Create Gradient

See the MDN Web Docs for more information about svg Radial Gradients and Linear Gradients. In the form below, edit the various inputs to change the appearance of the gradient. SUBMIT the form to save the gradient. For more information on transformation types, see the MDN docs on transformation types.

cx:

cy:

fx:

fy:

fr:

Spread Method: Pad Reflect Repeat

Add Transforms:

Transformation Type:

Matrix Translate Scale Rotate SkewX SkewY

Add Stops:

Stop Offset:

Stop Color:

#FF0000

Stop Opacity:

Stop Offset:

Stop Color:

#0000FF

Stop Opacity:

Saved Gradients:

Copied $TeX$ code to clipboard.