SVG (snap + datGUI)

script.js

//     SVG snap reference links
//http://svg.dabbles.info/
//http://snapsvg.io/docs/
//https://groups.google.com/forum/#!forum/snapsvg
//Examples on codepen http://codepen.io/collection/edpyJ/

// setup snap window
s = Snap(window.innerWidth, window.innerHeight);
//makes a group
circles = s.group();

var t1 = s.text(10, 25, 'Click spawnCircles -->');
t1.drag();
t1.dblclick(function() {
  this.animate({
    transform: 'T' + Math.random() * window.innerWidth * 0.9 + ',' + Math.random() * window.innerHeight * 0.9
  }, 4000, mina.elastic);
})

var balls = [];
var settings = new function() {
    this.radius = 100;
    this.number = 20;
    this.fillOpacity = 1;
    this.stroke = false;
    this.strokeColor = "#000000";
    this.strokeWidth = 0;
    this.runAway = true;

    this.fillColor = '#ced3d4';//"#26c5bc";
    this.gradient = true;
    this.gradientColor = "#032c2f";
    this.randomFill = false;
    this.clear = function() {
      circles.remove();
      circles = s.group();
    };
    this.spawnCircles = function() {
      var l = balls.length
      for (var i = l; i < settings.number + l; i++) {
        balls.push(s.circle(0, 0, 1));
        circles.add(balls[i]);
        balls[i].dblclick(function() {
          this.remove();
        });
        balls[i].attr({
          fillOpacity: settings.fillOpacity
        })
        if (settings.randomFill) {
          balls[i].attr({
            fill: '#' + Math.floor(Math.random() * 16777216).toString(16),
          });
        } else if (settings.gradient) {
          balls[i].attr({
            fill: "r()"+settings.fillColor+'-'+settings.gradientColor,
          });
        } else {
          balls[i].attr({
            fill: settings.fillColor,
          });
        }
        balls[i].attr({
          stroke: settings.strokeColor,
          'strokeWidth': settings.strokeWidth
        });
        if (settings.runAway) {
          balls[i].hover(function() {
            this.animate({
              transform: 'T' + Math.random() * window.innerWidth + ',' + Math.random() * window.innerHeight
            }, 2000, mina.elastic);
          });
        } else balls[i].drag();
        balls[i].animate({
          transform: 'T' + Math.random() * window.innerWidth + ',' + Math.random() * window.innerHeight
        }, 500, mina.bounce);

        balls[i].animate({
          r: 7 + Math.random() * 100
        }, 1000);

      }
    };
  }
settings.spawnCircles();
  //dat GUI is a library that lets you change properties of an object with sliders
  //be sure to add the library.  It is at 
  // http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js
var gui = new dat.GUI();
gui.add(settings, 'spawnCircles');
gui.add(settings, 'clear');
gui.add(settings, 'number', 0, 50).step(1);
gui.add(settings, 'runAway');

var fillandstroke_folder = gui.addFolder('fill and stroke');

fillandstroke_folder.add(settings, 'fillOpacity', 0, 1);
fillandstroke_folder.add(settings, 'randomFill');
fillandstroke_folder.add(settings, 'strokeWidth', 0, 20);
fillandstroke_folder.addColor(settings, 'fillColor');
fillandstroke_folder.addColor(settings, 'strokeColor');
var gradientController = fillandstroke_folder.add(settings, 'gradient');
var gradient_Folder = fillandstroke_folder.addFolder('gradient');
gradientController.onChange(function(value) {
  if (settings.gradient) gradient_Folder.open();
  else gradient_Folder.close();

});
gradient_Folder.addColor(settings, 'gradientColor');

function circlethings() {
  var circle_template = s.circle(0, 0, 50);
  circle_template.animate({
    transform: 'T' + window.innerWidth * 0.5 + ',' + window.innerHeight * 0.5
  }, 1000, mina.bounce);
  //circle_template.drag();
  circle_template.hover(function() {
    var x = Math.random() * window.innerWidth
    var y = Math.random() * window.innerHeight
      //circle_template.transform('T' + x + ',' + y);
    circle_template.animate({
      transform: 'T' + x + ',' + y
    }, 1000, mina.bounce);
  })

  function cycle() {

    circle_template.attr({
      radius: settings.radius,
      fill: settings.fillColor,
      fillOpacity: settings.fillOpacity,
      stroke: settings.strokeColor,
      strokeWidth: settings.strokeWidth
    });

    requestAnimationFrame(cycle);
  }
  requestAnimationFrame(cycle);
}

function snapFun() {

  //spawns an array of svg circles with random properties
  // the circles are also dragable
  var balls = [];
  for (var i = 0; i < 0; i++) {
    balls.push(s.circle(Math.random() * window.innerWidth, Math.random() * window.innerHeight, 7 + Math.random() * 55));
    balls[i].attr({
      fill: '#' + Math.floor(Math.random() * 16777216).toString(16),
      fillOpacity: .6,
    });
    balls[i].drag();
  }

  var r = s.rect(0.9 * window.innerWidth - 100, 0.9 * window.innerHeight - 100, 100, 100, 5, 5).attr({
    stroke: '#123456',
    'strokeWidth': 3,
    fill: 'coral',
    'opacity': 0.5
  });
  r.drag();

  for (var i = 0; i < 2; i++) {
    rclone = r.clone();
    rclone.drag();
    var y = Math.random() * 30
    var x = Math.random() * 30
    rclone.transform('T' + x + ',' + y);
    //rclone.transform( 't100,100');
  }

  /* function blink(){
    balls[0].animate({r:1}, 220, function(){
      balls[0].animate({r: 90}, 300);
    });
  };
  setInterval(blink, 3000); */

  /* var test = s.rect(10,10,50,50);
  test.transform(new Snap.matrix().translate(100, 100));
  test.transform('t100,100'); */

  var t = s.text(10, 25, 'You can drag stuff');
  t.drag();

  //get info about svg element
  //balls[0].getBBox()
  //balls[0].getBBox().cx

}

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

style.css

body {
  overflow:hidden;
}

svg{
    position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

SVG (snap + datGUI).markdown

SVG (snap + datGUI)

A Pen by lilgreenland on CodePen.

License.