summaryrefslogtreecommitdiffstats
path: root/playgrounds/transforms/transforms.js
blob: 7b9722ce87ff2577937439da66a309ec8c69bfb7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let canvas = SVG('#canvas')

// Make the green rectange
canvas.rect(200, 400).move(200, 400)
  .attr('opacity', 0.3)
  .addClass('green')

// Make the pink rectangle
let a = canvas.rect(200, 400).move(200, 400)
  .attr('opacity', 0.3)
  .addClass('pink')
  .transform({ px: 100, py: 500, origin: 'top-left' })

  a.animate()
  .rotate({ rotate: 500, origin: 'top-right' })

// Put an ellipse where we expect the object to be
canvas.ellipse(30, 30).center(100, 500)
  .attr('opacity', 0.3)
  .addClass('dark-pink')