diff --git a/src/index.html b/src/index.html
index 83d0abf..1212c53 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,7 @@
         <ul>
             <li> <a href="./konva-ball/index.html">Konva-ball</a>
             <li> <a href="./flow-fields/index.html">Flow-fields</a>
+            <li> <a href="./orbital-trails/index.html">Orbital Trails</a>
         </ul>
     </body>
 </html>
diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js
new file mode 100644
index 0000000..86fae93
--- /dev/null
+++ b/src/orbital-trails/app.js
@@ -0,0 +1,137 @@
+window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
+
+document.onselectstart = function() {
+  return false;
+};
+var c = document.getElementById('c');
+var ctx = c.getContext('2d');
+var dpr = window.devicePixelRatio;
+var cw = window.innerWidth;
+var ch = window.innerHeight;
+c.width = cw * dpr;
+c.height = ch * dpr;
+ctx.scale(dpr, dpr);
+var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
+ctx.lineCap = 'round';
+var orbs = [];
+var orbCount = 30;
+var radius;
+
+var trailCB = document.getElementById('trail');
+var trail = trailCB.checked;
+var clearer = document.getElementById('clear');
+
+function createOrb(mx,my){
+  var dx = (cw/2) - mx;
+	var dy = (ch/2) - my;
+	var dist = Math.sqrt(dx * dx + dy * dy);
+	var angle = Math.atan2(dy, dx);
+	orbs.push({
+		x: mx,
+		y: my,
+		lastX: mx,
+		lastY: my,
+		hue: 0,
+		colorAngle: 0,
+		angle: angle + Math.PI/2,
+		//size: .5+dist/250,
+		size: rand(1,3)/2,
+		centerX: cw/2,
+		centerY: ch/2,		
+		radius: dist,
+		speed: (rand(5,10)/1000)*(dist/750)+.015,
+		alpha: 1 - Math.abs(dist)/cw,
+		draw: function() {			
+			ctx.strokeStyle = 'hsla('+this.colorAngle+',100%,50%,1)';	
+			ctx.lineWidth = this.size;			
+			ctx.beginPath();
+			ctx.moveTo(this.lastX, this.lastY);
+			ctx.lineTo(this.x, this.y);
+			ctx.stroke();
+		},	
+		update: function(){
+			var mx = this.x;
+			var my = this.y;	
+			this.lastX = this.x;
+			this.lastY = this.y;
+			var x1 = cw/2;
+			var y1 = ch/2;
+			var x2 = mx;
+			var y2 = my;		
+			var rise = y1-y2;
+			var run = x1-x2;
+			var slope = -(rise/run);
+			var radian = Math.atan(slope);
+			var angleH = Math.floor(radian*(180/Math.PI));		
+			if(x2 < x1 && y2 < y1){angleH += 180;}		
+			if(x2 < x1 && y2 > y1){angleH += 180;}		
+			if(x2 > x1 && y2 > y1){angleH += 360;}		
+			if(y2 < y1 && slope =='-Infinity'){angleH = 90;}		
+			if(y2 > y1 && slope =='Infinity'){angleH = 270;}		
+			if(x2 < x1 && slope =='0'){angleH = 180;}
+			if(isNaN(angleH)){angleH = 0;}
+			
+			this.colorAngle = angleH;
+			this.x = this.centerX + Math.sin(this.angle*-1) * this.radius;
+			this.y = this.centerY + Math.cos(this.angle*-1) * this.radius;
+			this.angle += this.speed;
+		
+		}
+	});
+}
+
+function orbGo(e){
+	var mx = e.pageX - c.offsetLeft;
+	var my = e.pageY - c.offsetTop;		
+	createOrb(mx,my);
+}
+
+function turnOnMove(){
+	c.addEventListener('mousemove', orbGo, false);	
+}
+
+function turnOffMove(){
+	c.removeEventListener('mousemove', orbGo, false);	
+}
+
+function toggleTrails(){
+	trail = trailCB.checked;
+}
+
+function clear(){
+ orbs = []; 
+}
+
+c.addEventListener('mousedown', orbGo, false);
+c.addEventListener('mousedown', turnOnMove, false);
+c.addEventListener('mouseup', turnOffMove, false);
+trailCB.addEventListener('change', toggleTrails, false);
+clearer.addEventListener('click', clear, false);
+
+var count = 100;
+while(count--){
+		createOrb(cw/2, ch/2+(count*2));
+}
+
+var loop = function(){
+  window.requestAnimFrame(loop);
+	if(trail){
+		ctx.fillStyle = 'rgba(0,0,0,.1)';
+		ctx.fillRect(0,0,cw,ch);
+	} else {
+		ctx.clearRect(0,0,cw,ch);
+	}
+	var i = orbs.length;
+	while(i--){	
+		var orb = orbs[i];	
+		var updateCount = 3;
+		while(updateCount--){
+		orb.update();		
+		orb.draw(ctx);
+		}
+		
+	}
+}
+            
+loop();
+
diff --git a/src/orbital-trails/index.html b/src/orbital-trails/index.html
new file mode 100644
index 0000000..309be03
--- /dev/null
+++ b/src/orbital-trails/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Orbital Trails</title>
+        <link href="style.css" rel="stylesheet" />
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <div id="control-panel">
+        <p>Click and drag to make more!</p>
+        <label>Trails: </label>
+        <input type="checkbox" id="trail" name="trail" checked />
+        <button id="clear">Clear</button>
+        <a href="https://codepen.io/jackrugile/pen/aCzHs" target="_blank">View Version 2</a>
+        </div>
+        <canvas id="c"></canvas>
+    </body>
+</html>
+
+
+
diff --git a/src/orbital-trails/style.css b/src/orbital-trails/style.css
new file mode 100644
index 0000000..c5bae06
--- /dev/null
+++ b/src/orbital-trails/style.css
@@ -0,0 +1,48 @@
+body {
+  background: #000;
+  color: #aaa;
+  font: 100%/20px helvetica, arial, sans-serif;
+}
+
+canvas {
+  display: block;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%
+}
+
+#control-panel {
+  background: rgba(0,0,0,.75);
+  border: 1px solid #333;
+  left: 20px;
+  padding: 10px 15px;
+  position: absolute;
+  top: 20px;
+  z-index: 2;
+}
+
+p {
+	font-size: 12px;
+  margin: 0 0 5px;
+}
+
+label {
+  font-size: 12px;
+  font-weight: bold;
+}	
+
+button {
+  display: block; 
+  margin: 10px 0 5px;
+}
+
+a {
+  border-bottom: 1px dotted #444;
+  color: #fff;
+  font-size: 12px;
+  text-decoration: none;
+}