SVG.Mask

by tmtron

HTML

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

JavaScript

var draw = SVG().addTo('body').size(300, 130)
var circle = draw.circle(50).fill('#FFF')

var mask = draw.mask()
mask.add(circle.center(35, 35))
mask.add(circle.clone().center(70, 70).size(70).fill('blue'))
mask.add(circle.clone().center(90, 30).size(30).fill('red'))
mask.add(circle.clone().center(105, 115).size(50).fill('green'))

var rect = draw.rect(100, 100).move(20, 20).fill('grey')
rect.maskWith(mask)

rect.on('mouseover', function() {
	this.animate(300, '<>').fill('#0f9')
})
rect.on('mouseout', function() {
	this.animate(300, '<>').fill('#f06')
})