requirebin sketch

index.js

var svgLine = require('svg-line')
var raf = require('raf')

var ns      = 'http://www.w3.org/2000/svg'
var tau     = Math.PI * 2
var svg     = document.createElementNS(ns, 'svg')
var line    = document.createElementNS(ns, 'path')
var points  = []
var path    = svgLine()
  .x(function(d) { return d.x })
  .y(function(d) { return d.y })

var sides = 10
for (var i = 0; i < sides; i++) {
  points.push({ x: 0, y: 0 })
}

raf().on('data', tick)

var t = 0

function tick() {
	t++
  var angle  = t * 0.05
  var inner  = 60 + Math.sin(t * 0.0925) * 45
  var outer  = 60
  var origin = 200

  for (var i = 0; i < sides; i++) {
    var radius  = i % 2 ? inner : outer
    points[i].x = origin + Math.cos(angle + i / sides * tau) * radius
    points[i].y = origin + Math.sin(angle + i / sides * tau) * radius
  }

  line.setAttribute('d', path(points))
}

line.setAttribute('fill', '#FBBF60')
svg.appendChild(line)
document.body.appendChild(svg)
document.body.style.backgroundColor = '#654881'

minified.js

function tick(){t++;for(var e=.05*t,n=60+45*Math.sin(.0925*t),r=60,i=200,s=0;sides>s;s++){var o=s%2?n:r;points[s].x=i+Math.cos(e+s/sides*tau)*o,points[s].y=i+Math.sin(e+s/sides*tau)*o}line.setAttribute("d",path(points))}require=function e(t,n,r){function i(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(s)return s(o,!0);throw Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return i(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var s="function"==typeof require&&require,o=0;r.length>o;o++)i(r[o]);return i}({"cz+wpy":[function(e,t){function n(){function e(e){var t=[];t.push("M",s(e[0],0),",",o(e[0],0));for(var n=1;e.length>n;n++)t.push("L",s(e[n],n),",",o(e[n],n));return t.join("")}function t(t){return arguments.length?(s=r(t),e):s}function n(t){return arguments.length?(o=r(t),e):o}var s=i("x"),o=i("y");return e.x=t,e.y=n,e}function r(e){return"function"!=typeof e?function(){return e}:e}var i=e("plucker");t.exports=n},{plucker:3}],"svg-line":[function(e,t){t.exports=e("cz+wpy")},{}],3:[function(e,t){function n(e,t){return arguments.length>=2?r(e)(t):r(e)}function r(e){function t(t){return t[e]}function n(t){for(var n=0;r>n&&t!==void 0;n++)t=t[e[n]];return t}if(e="string"==typeof e?(e+"").trim().split("."):e,2>e.length)return e=e[0],t;var r=e.length;return n}t.exports=n},{}]},{},[]),require=function e(t,n,r){function i(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(s)return s(o,!0);throw Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return i(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var s="function"==typeof require&&require,o=0;r.length>o;o++)i(r[o]);return i}({1:[function(e,t){function n(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function r(e){return"function"==typeof e}function i(e){return"number"==typeof e}function s(e){return"object"==typeof e&&null!==e}function o(e){return void 0===e}t.exports=n,n.EventEmitter=n,n.prototype._events=void 0,n.prototype._maxListeners=void 0,n.defaultMaxListeners=10,n.prototype.setMaxListeners=function(e){if(!i(e)||0>e||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},n.prototype.emit=function(e){var t,n,i,u,a,f;if(this._events||(this._events={}),"error"===e&&(!this._events.error||s(this._events.error)&&!this._events.error.length))throw t=arguments[1],t instanceof Error?t:TypeError('Uncaught, unspecified "error" event.');if(n=this._events[e],o(n))return!1;if(r(n))switch(arguments.length){case 1:n.call(this);break;case 2:n.call(this,arguments[1]);break;case 3:n.call(this,arguments[1],arguments[2]);break;default:for(i=arguments.length,u=Array(i-1),a=1;i>a;a++)u[a-1]=arguments[a];n.apply(this,u)}else if(s(n)){for(i=arguments.length,u=Array(i-1),a=1;i>a;a++)u[a-1]=arguments[a];for(f=n.slice(),i=f.length,a=0;i>a;a++)f[a].apply(this,u)}return!0},n.prototype.addListener=function(e,t){var i;if(!r(t))throw TypeError("listener must be a function");if(this._events||(this._events={}),this._events.newListener&&this.emit("newListener",e,r(t.listener)?t.listener:t),this._events[e]?s(this._events[e])?this._events[e].push(t):this._events[e]=[this._events[e],t]:this._events[e]=t,s(this._events[e])&&!this._events[e].warned){var i;i=o(this._maxListeners)?n.defaultMaxListeners:this._maxListeners,i&&i>0&&this._events[e].length>i&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),console.trace())}return this},n.prototype.on=n.prototype.addListener,n.prototype.once=function(e,t){function n(){this.removeListener(e,n),i||(i=!0,t.apply(this,arguments))}if(!r(t))throw TypeError("listener must be a function");var i=!1;return n.listener=t,this.on(e,n),this},n.prototype.removeListener=function(e,t){var n,i,o,u;if(!r(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(n=this._events[e],o=n.length,i=-1,n===t||r(n.listener)&&n.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(s(n)){for(u=o;u-->0;)if(n[u]===t||n[u].listener&&n[u].listener===t){i=u;break}if(0>i)return this;1===n.length?(n.length=0,delete this._events[e]):n.splice(i,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},n.prototype.removeAllListeners=function(e){var t,n;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n=this._events[e],r(n))this.removeListener(e,n);else for(;n.length;)this.removeListener(e,n[n.length-1]);return delete this._events[e],this},n.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?r(this._events[e])?[this._events[e]]:this._events[e].slice():[]},n.listenerCount=function(e,t){var n;return n=e._events&&e._events[t]?r(e._events[t])?1:e._events[t].length:0}},{}],"5kejYY":[function(e,t){function n(e){function t(){var r=n.now(),u=r-i;i=r,s.emit("data",u),s.paused||o(t,e)}var i=n.now(),s=new r;return s.pause=function(){s.paused=!0},s.resume=function(){s.paused=!1},o(t,e),s}t.exports=n;var r=e("events").EventEmitter,i="undefined"==typeof window?this:window,s=i.performance&&i.performance.now?function(){return performance.now()}:Date.now||function(){return+new Date},o=i.requestAnimationFrame||i.webkitRequestAnimationFrame||i.mozRequestAnimationFrame||i.msRequestAnimationFrame||i.oRequestAnimationFrame||(i.setImmediate?function(e){setImmediate(e)}:function(e){setTimeout(e,0)});n.polyfill=o,n.now=s},{events:1}],raf:[function(e,t){t.exports=e("5kejYY")},{}]},{},[]);for(var svgLine=require("svg-line"),raf=require("raf"),ns="http://www.w3.org/2000/svg",tau=2*Math.PI,svg=document.createElementNS(ns,"svg"),line=document.createElementNS(ns,"path"),points=[],path=svgLine().x(function(e){return e.x}).y(function(e){return e.y}),sides=10,i=0;sides>i;i++)points.push({x:0,y:0});raf().on("data",tick);var t=0;line.setAttribute("fill","#FBBF60"),svg.appendChild(line),document.body.appendChild(svg),document.body.style.backgroundColor="#654881";

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "svg-line": "0.0.0",
    "raf": "0.1.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin