<div id="ap"></div>

#ap, #app {background: 
repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222, #666, #8ce, #666 2%) fixed; }

var draw = SVG('ap').size(300, 220).style('border: 1px solid #0006;')
var rad = draw.gradient
('radial', function(stop)
 {stop.at(0, '#ddd', 1), stop.at(1, '#444', 1) })
var mask = draw.mask()
var лист = draw.rect(280, 200).move(10, 10).radius(20).fill('#0cc')
mask.add(лист.clone().move(10, 10).fill('#fff'))
лист.maskWith(mask) //circle.maskWith(mask)
var круг = draw.circle(40).center(50, 50)
mask.add(круг.clone().center(50, 100)), mask.add(круг.clone().center(50, 50))
mask.add(круг.clone().center(100, 100)), mask.add(круг.clone().center(100, 50))
mask.add(круг.clone().center(150, 100)), mask.add(круг.clone().center(150, 50))
mask.add(круг.clone().center(200, 100)), mask.add(круг.clone().center(200, 50))
mask.add(круг.clone().center(250, 100)), mask.add(круг.clone().center(250, 50))
var шар  = draw.use(круг).fill(rad) 
шар.clone().center(0, 0)
шар.clone().center(50, 0)
шар.clone().center(100, 0)
шар.clone().center(150, 0)
шар.clone().center(200, 0)

var стик = draw.rect(240,40).center(150, 150).radius(20) 
стик.style('cursor:pointer; fill:#ff0; stroke:#000; stroke-width: 10px') 
mask.add(стик.clone().fill('#000')), стик.maskWith(mask)

var тост = draw.text('').font({ fill: '#800', size: 24 })
тост.style('cursor:help; font-weight: 800; fill:#800; stroke:#ccc; stroke-width: .4px')
mask.add(тост.clone().center(150, 180).fill('#000')) //,тост.maskWith(mask)
// тост.text('').center(0, 0)
var butt = draw.rect(260,76).center(150, 163).radius(20) 
butt.style('cursor:pointer; fill:#0ff2; stroke:#0006; stroke-width: 2px')
mask.add(butt.clone().fill('#000')) //,butt.maskWith(mask)
тост.text('Мышкуем здесь').center(150, 150)
лист.on('mouseover', 
function(){this.animate(200, '<>', 20).fill('#c8c'), тост.text('Заходи ежли чё').center(150, 150) }) 
лист.on('mouseout', 
function(){this.animate(200, '<>', 20).fill('#ccc'), тост.text('— Спасибо! —').center(150, 150) })
//var цикл = function(){ } 
butt.on('mouseover', 
 function(){
  круг.animate(200, '<>', 20).center(50, 20)
      .animate(200, '<>', 20).center(50, 120)
      .animate(200, '<>', 20).center(50, 50)
      .animate(200, '<>', 20).center(50, 120)
      .animate(200, '<>', 20).center(50, 80)
      .animate(200, '<>', 20).center(50, 120)
      .animate(200, '<>').center(50, 100) 
  тост.text('— Ща спою —').center(150, 150)  })
butt.on('mouseout', 
function(){
  стик.animate(1000, '<>', 20).reverse(true).center(150, 50).reverse()
      .animate(1000, '<>', 20).reverse(true).center(150, 150).reverse()
  круг.animate(1000, '<>', 10).center(50, 50) //.reverse(false)
  тост.animate(1000, '<>', 20).reverse(true).center(150, 50).reverse()
      .delay(1000).animate(1000, '<>', 20).reverse(true).center(150, 150).reverse() 
  butt.delay(1000).animate(1000, '<>', 20).reverse(true).center(150, 50).reverse()
      .animate(1000, '<>', 20).reverse(true).center(150, 163).reverse()
})//.loop(1) .delay(500)//.loop(1, true)