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

// Make the green rectangle
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')