Updated rand example

Author: Sandstedt

docs/api/shape-swirl/README.md

@@ -1,7 +1,7 @@
 # ShapeSwirl
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/pbebwQ?editors=0010)
-- [Shape API](shape.md)
+- [Shape API](../shape/README.md)
 - [Tween API](../tweens/tween.md)
 
 Full API reference:

docs/api/syntax/rand.md

@@ -15,30 +15,36 @@ Full API reference:
 ```
 
 ::: tip
-If you wanna update the random value after it's been declared, you can use the `generate()` function:
-```js
-const example = new mojs.Burst({
-  radius:   { 'rand(4, 40)' : 'rand(50, 100)' }
-});
-
-document.addEventListener( 'click', function (e) {
-  example.generate().replay();
-});
-```
+If you wanna update the random value after it's been declared, you can use the `generate()` function.
 :::
 
+## Example usage
+
 <MojsInteractive
   id="example"
   autoplay
-  height="200px"
+  height="400px"
   global="example"
+  :controller=false
+  notice="Click anywere to see the updated random value"
   code=
-"const example = new mojs.Burst({
-  radius:   { 'rand(4, 40)' : 'rand(50, 100)' }
+"const example = new mojs.ShapeSwirl({
+  parent: '#example',
+  left: 0, top: 0,
+  duration:       'rand(600, 1000)',
+  radius:         'rand(10, 20)',
+  pathScale:      'rand(.5, 1)',
+  swirlFrequency: 'rand(2, 4)',
+  swirlSize:      'rand(6, 14)',
 });
 
-document.addEventListener( 'click', function (e) {
-  example.generate().replay();
+document.getElementById('example').addEventListener( 'click', function (e) {
+  const x = e.layerX,
+    y = { [e.layerY]: e.layerY - 150 };
+  example
+    .tune({ x, y })
+    .generate()
+    .replay();
 });
 
 example.play();"