2 files changed, 22 insertions, 14 deletions
diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html
index 89dc419..a165dd9 100644
--- a/playgrounds/transforms/transforms.html
+++ b/playgrounds/transforms/transforms.html
@@ -17,13 +17,7 @@
       box in your console with its variable name: <code>mover</code>
     </p>
 
-    <svg viewBox="0 0 1500 1500">
-
-      <rect id="old" x=200 y=400 width=200 height=400 class="green"/>
-      <rect id="new" x=200 y=400 width=200 height=400 class="pink"/>
-      <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/>
-
-    </svg>
+    <svg viewBox="0 0 1500 1500" id="canvas"></svg>
 
   </body>
 
diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js
index b27e1c3..1918cd7 100644
--- a/playgrounds/transforms/transforms.js
+++ b/playgrounds/transforms/transforms.js
@@ -1,9 +1,23 @@
 
 
-let mover = SVG.select("#new")[0]
-mover.transform({
-  position: [800, 500],
-  origin: [200, 400],
-  skew: [20, 0],
-  rotate: 30,
-})
+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' })
+
+debugger
+  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')