HTML, CSS and JavaScript playground

var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')

var size = [ 800 , 600 ]
var mult = 1
var prec = .1

function resize( ) {
  size[0] = canvas.width = document.documentElement.offsetWidth
  size[1] = canvas.height = document.documentElement.offsetHeight
  mult = Math.min( size[0] , size[1] ) / 2
  context.fillStyle = "#000000"
  context.fillRect( 0 , 0 , size[0] , size[1] )
}

resize()
window.onresize = resize

var obj = [
  {
    pos : [ 0 , 0 ],
    vel : [ 0 , -.000085 ],
    acc : [ 0 , 0 ],
    size : .1
  },
  {
    pos : [ .2 , 0 ],
    vel : [ 0 , .085 ],
    acc : [ 0 , 0 ],
    size : .0001
  }
]

function draw( ) {
  context.fillStyle = "#000000"
  context.globalAlpha = .02
  context.fillRect( 0 , 0 , size[0] , size[1] )
  context.globalAlpha = 1
  obj.forEach( function( o ) {
    context.beginPath()
    context.strokeStyle = "#00FF00"
    context.arc( size[0] / 2 + o.pos[0] * mult , size[1] / 2 + o.pos[1] * mult , o.size * mult , 0 , 2*Math.PI )
    context.stroke()
  })
}

function dist( p1 , p2 ) {
  return Math.sqrt( Math.pow( p2[0] - p1[0] , 2 ) + Math.pow( p2[1] - p1[1] , 2 ) )
}

function calc() {
  obj.forEach( function( o1 ) {
    if( o1.size === 0 ) return 
    var pow = [ 0 , 0 ]
    obj.forEach( function( o2 ) {
      if( o1 === o2 ) return
      if( o2.size === 0 ) return
      var r = dist( o1.pos , o2.pos )
      var f = o1.size * o2.size / Math.pow( r , 2 ) / 100 - ( .00000001 / ( 1 + r ) )
      pow[0] += ( o2.pos[0] - o1.pos[0] ) * f / r
      pow[1] += ( o2.pos[1] - o1.pos[1] ) * f / r
    })
    o1.acc[0] = pow[0] / o1.size
    o1.acc[1] = pow[1] / o1.size
  } )
  obj.forEach( function( o ) {
    o.vel[0] += o.acc[0] * prec
    o.vel[1] += o.acc[1] * prec
  } )
  obj.forEach( function( o ) {
    o.pos[0] += o.vel[0] * prec
    o.pos[1] += o.vel[1] * prec
  } )
}

draw()

var speed = 1
requestAnimationFrame( function step(){
  for( var i = 0 ; i < speed ; ++i ) calc()
  draw()
  requestAnimationFrame( step )
} )