SVG.Gradient

by Fuzzy

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

JavaScript

var draw = SVG().addTo('body').size(500, 130)

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#f06')
  add.stop(1, '#0f9')
})

draw.rect(100, 100).move(20, 20).radius(10).fill(linear)

var radial = draw.gradient('radial', function(add) {
	add.stop(0, '#0f9')
  add.stop(1, '#f06')
})

draw.rect(100, 100).move(140, 20).radius(10).fill(radial)