requirebin sketch

index.js

var vsvg = require( 'vsvg' ),
  paths = require( 'vsvg-paths' ),
  svg = vsvg.svg,
  g = vsvg.g,
  rect = vsvg.rect,
  text = vsvg.text;

el = (
  svg( { xmlns: 'http://www.w3.org/2000/svg', width: 500, height: 500 }, 
    g ( { className: 'group-rects' }, 
      g ( { className: 'rects' },
        rect( { x: 5, y: 50, width: 50, height: 50, fill: 'powderblue' } ),
        rect( { x: 5, y: 105, width: 105, height: 50, fill: 'skyblue' } ),
        rect( { x: 5, y: 160, width: 160, height: 50, fill: 'dodgerblue' } ),
        rect( { x: 60, y: 50, width: 50, height: 50, fill: 'powderblue' } ),
        rect( { x: 115, y: 50, width: 50, height: 105, fill: 'skyblue' } ),
        rect( { x: 170, y: 50, width: 50, height: 160, fill: 'orangered' } )
      ),
      g ( { className: 'rects', transform: 'rotate(180) translate(-225,-425)' },
        rect( { x: 5, y: 50, width: 50, height: 50, fill: 'powderblue' } ),
        rect( { x: 5, y: 105, width: 105, height: 50, fill: 'skyblue' } ),
        rect( { x: 5, y: 160, width: 160, height: 50, fill: 'dodgerblue' } ),
        rect( { x: 60, y: 50, width: 50, height: 50, fill: 'powderblue' } ),
        rect( { x: 115, y: 50, width: 50, height: 105, fill: 'skyblue' } ),
        rect( { x: 170, y: 50, width: 50, height: 160, fill: 'orangered' } )
      )
    ),
    g ( { className: 'group-rects', transform: 'translate(220,0)' }, 
      g ( { className: 'rects' },
        rect( { x: 5, y: 50, width: 50, height: 50, fill: 'papayawhip' } ),
        rect( { x: 5, y: 105, width: 105, height: 50, fill: 'orange' } ),
        rect( { x: 5, y: 160, width: 160, height: 50, fill: 'orangered' } ),
        rect( { x: 60, y: 50, width: 50, height: 50, fill: 'papayawhip' } ),
        rect( { x: 115, y: 50, width: 50, height: 105, fill: 'orange' } ),
        rect( { x: 170, y: 50, width: 50, height: 160, fill: 'dodgerblue' } )
      ),
      g ( { className: 'rects', transform: 'rotate(180) translate(-225,-425)' },
        rect( { x: 5, y: 50, width: 50, height: 50, fill: 'papayawhip' } ),
        rect( { x: 5, y: 105, width: 105, height: 50, fill: 'orange' } ),
        rect( { x: 5, y: 160, width: 160, height: 50, fill: 'orangered' } ),
        rect( { x: 60, y: 50, width: 50, height: 50, fill: 'papayawhip' } ),
        rect( { x: 115, y: 50, width: 50, height: 105, fill: 'orange' } ),
        rect( { x: 170, y: 50, width: 50, height: 160, fill: 'dodgerblue' } )
      )
    )
  )
);

document.body.appendChild( el._node );

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var sortValues={x1:0,y1:1,x2:2,y2:3,rx:4,ry:5,xrotate:6,largearc:7,sweep:8,x:9,y:10};module.exports.encode=function encode(path,isRelative){if(!Array.isArray(path)){return}var instructions=path.map(getInstruction),values;if(isRelative){instructions=instructions.map(mapLowerCase)}values=path.map(keyValueArray).map(sortPoints).map(stringifyPoints(instructions));return values.join(" ")};var keyValueArray=module.exports._keyValueArray=function keyValueArray(points){var ret=[];for(var key in points){ret.push([key,points[key]])}return ret};var mapLowerCase=module.exports._mapLowerCase=function mapLowerCase(str){return str.toLowerCase()};var getValue=module.exports._getValue=function getValue(instr){return function(point,index){return(!index?instr:"")+point[1]}};var sortValue=module.exports._sortValue=function sortValue(prev,cur){return sortValues[prev[0]]-sortValues[cur[0]]};var sortPoints=module.exports._sortPoints=function sortPoints(points){return points.sort(sortValue)};var stringifyPoints=module.exports._stringifyPoints=function stringifyPoints(instructions){return function(point,index){if(!point.length){return instructions[index]}return point.map(getValue(instructions[index])).join(" ")}};var isValid=module.exports._isValid=function isValid(value){if(isNaN(value)){return false}return value||typeof value==="number"};var getInstruction=module.exports._getInstruction=function getInstruction(points,index){if(isValid(points.x2)&&isValid(points.y2)&&isValid(points.x1)&&isValid(points.y1)){return"C"}if(isValid(points.rx)&&isValid(points.ry)){return"A"}if(isValid(points.x1)&&isValid(points.y1)){return"Q"}if(isValid(points.x2)&&isValid(points.y2)){return"S"}if(isValid(points.x)&&isValid(points.y)){if(!index){return"M"}return"L"}if(isValid(points.x)){return"H"}if(isValid(points.y)){return"V"}return"Z"}},{}],"vsvg-paths":[function(require,module,exports){module.exports.encode=require("./src/encode").encode},{"./src/encode":1}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var startTag=/^<([-A-Za-z0-9_:]+)(.*?)(\/?)>/g,endTag=/<\/([-A-Za-z0-9_:]+)[^>]*>/,attr=/([-A-Za-z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;exports.parse=parse;function makeArray(arr){return Array.prototype.slice.call(arr,0)}var getAttributes=exports.getAttributes=function getAttributes(attributes){var _attributes={};function addToAttributes(keyvalue){var arr=keyvalue.split(/=/),key=arr[0],value=arr[1]?arr[1].slice(1).slice(0,-1):"";_attributes[key]=value}attributes.forEach(addToAttributes);return _attributes};var getTagIndex=exports.getTagIndex=function getTagIndex(tagName,tags){for(var i=tags.length-1;i>=0;i-=1){if(tags[i].tagName===tagName){return i}}return-1};var getLastOpenTag=exports.getLastOpenTag=function getLastOpenTag(tags){for(var i=tags.length-1;i>=0;i-=1){if(!tags[i].closed){return i}}return-1};var createTree=exports.createTree=function createTree(tags){var _tags=[];function getArray(position,arr){var _position=makeArray(position);if(_position.length===1){return arr}var next=arr[_position[0]].children;_position.shift();return getArray(_position,next)}function addTagToTree(tag){var arr=getArray(tag.position,_tags);arr.push(tag)}tags.forEach(addTagToTree);return _tags};function parse(xml){xml=xml.replace(/(\r\n|\n|\r)/gm,"");var tags=[],position=[0],openTag,attributes,end,text,index,prevTag,prevLength,closed,tagName,tag;while(xml){if(xml.length===prevLength){throw new Error("Failed to parse SVG at chars: "+xml.substring(0,5))}prevLength=xml.length;xml=xml.trim();openTag=xml.match(startTag);if(openTag){openTag=openTag[0];attributes=openTag.match(attr);xml=xml.substring(openTag.length);text=null;prevTag=null;closed=null;if(/\/>$/.test(openTag)){closed=true}}else{end=xml.match(endTag);attributes=[];if(end){index=getTagIndex(end[1],tags);prevTag=tags[index];text=xml.slice(0,end.index);xml=xml.substring(end.index+end[0].length)}}tagName=attributes.shift();if(tagName||text){tag={tagName:tagName,attributes:getAttributes(attributes),children:[],text:text,inside:getLastOpenTag(tags),closed:closed||!!text};if(tag.inside>-1){position.push(-1);position[tags[tag.inside].position.length]+=1;position=position.slice(0,tags[tag.inside].position.length+1)}tag.position=makeArray(position);tags.push(tag)}if(prevTag){prevTag.closed=true}}return createTree(tags)}},{}],2:[function(require,module,exports){"use strict";var tags=require("./tags"),SvgNode=require("./svgNode"),parser=require("vsvg-parser"),methods={};module.exports=function(){tags.forEach(function(tagName){methods[tagName]=SvgNode.bind(null,tagName)});return methods}();var _eachTag=methods._eachTag=function _eachTag(tag){var elem;if(tag.tagName&&methods[tag.tagName]){elem=methods[tag.tagName](tag.attributes);if(elem.children){for(var i=0;i<tag.children.length;i+=1){var _elem=_eachTag(tag.children[i]);if(typeof _elem==="string"){elem.innerText=_elem}else{elem.appendChild(_elem)}}}return elem}return tag.text||""};var parse=methods.parse=function(svg){var parsedSVG;try{parsedSVG=parser.parse(svg)}catch(e){return null}return parsedSVG.map(_eachTag)};var addNodeToVNode=methods._addNodeToVNode=function(node,vNode){function eachChild(_vNode,index){addNodeToVNode(node.children[index],_vNode)}vNode.children.forEach(eachChild);vNode._node=node};methods.mount=function(el){var svg=el.outerHTML,tagTree=parse(svg);addNodeToVNode(el,tagTree[0]);return tagTree[0]}},{"./svgNode":3,"./tags":4,"vsvg-parser":1}],3:[function(require,module,exports){"use strict";var utils=require("./utils"),TextNode=require("./textNode"),namespace="http://www.w3.org/2000/svg";module.exports=SvgNode;function SvgNode(tagName,attributes,vnodes){var rest=utils.makeArray(arguments,2);if(!(this instanceof SvgNode)){return new SvgNode(tagName,attributes,rest)}attributes=Object.create(attributes||{});this.guid=utils.guid();this.tagName=tagName;this._children=[];this.styles=attributes.style?utils.styleToObject(attributes.style):{};attributes.style=this.styles;this._attributes=attributes;if(typeof document==="object"){this._node=document.createElementNS(namespace,tagName);for(var attribute in attributes){var value=attributes[attribute];if(attribute==="style"){value=utils.objToStyles(value)}this._node.setAttribute(attribute,value)}}if(Array.isArray(vnodes)&&vnodes.length){vnodes.filter(SvgNode.isNode).forEach(this.appendChild.bind(this))}}SvgNode.isNode=function(vnode){return vnode instanceof SvgNode};SvgNode.prototype={insertBefore:function(elem,refElem){var index=utils.getElementIndex(refElem,this._children);this.removeChild(elem);this._children.splice(index,0,elem);if(this._node&&elem._node&&refElem._node){this._node.insertBefore(elem._node,refElem._node)}},removeChild:function(elem){var index=utils.getElementIndex(elem,this._children);if(index===-1){return}this._children.splice(index,1);if(this._node&&elem._node){this._node.removeChild(elem._node)}},replaceChild:function(elem,replaceElem){var index=utils.getElementIndex(elem,this._children);if(index===-1){return}this._children.splice(index,1,replaceElem);if(this._node&&elem._node&&replaceElem._node){this._node.replaceChild(replaceElem._node,elem._node)}},appendChild:function(elem){this.removeChild(elem);elem.parentNode=this;this._children.push(elem);if(this._node&&elem._node){this._node.appendChild(elem._node)}},_removeTextNodes:function(node){return!!node.tagName},get children(){return this._children.filter(this._removeTextNodes)},get firstChild(){return this._children[0]},toHTML:function(){return"<"+this.tagName+" "+utils.objToAttributes(this._attributes||{})+">"+this._children.map(utils.mapElementsToHTML).join("")+"</"+this.tagName+">"},toText:function(){return this._children.map(utils.mapElementsToText).join("")},getAttribute:function(key){return this._attributes[key]},setAttribute:function(key,value){this._attributes[key]=value;if(this._node){this._node.setAttribute(key,value)}},get attributes(){return this._attributes},set attributes(value){return value},get outerHTML(){return this.toHTML()},get innerHTML(){return this._children.map(utils.mapElementsToHTML).join("")},set innerHTML(html){var vsvg=require("../");if(this._node){this._node.innerHTML=html;this._children=vsvg.mount(this._node).children}else{this._children=vsvg.parse(html)}},get innerText(){return this.toText()},set innerText(value){this._children.length=0;this._children.push(new TextNode(value,{unsafe:this.tagName==="style"}));if(this._node){this._node.innerText=value}}}},{"../":undefined,"./textNode":5,"./utils":6}],4:[function(require,module,exports){"use strict";module.exports=["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","circle","clipPath","color-profile","cursor","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","hkern","image","line","linearGradient","marker","mask","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","radialGradient","rect","script","set","stop","style","svg","span","switch","symbol","text","textPath","title","tref","tspan","use","view","vkern"]},{}],5:[function(require,module,exports){"use strict";var utils=require("./utils");module.exports=TextNode;function TextNode(text,options){if(!(this instanceof TextNode)){return new TextNode(text,options)}options=options||{};this.text=options.unsafe?text:utils.escapeHTML(text)}TextNode.prototype={toHTML:function(){return this.text},toText:function(){return this.text}}},{"./utils":6}],6:[function(require,module,exports){"use strict";function s4(){return Math.floor((1+Math.random())*65536).toString(16).substring(1)}exports.guid=function guid(){return s4()+s4()+"-"+s4()+"-"+s4()+"-"+s4()+"-"+s4()+s4()+s4()};var objToStyles=exports.objToStyles=function objToStyles(styles){var ret="";for(var prop in styles){ret+=prop+":"+styles[prop]+";"}return ret};exports.styleToObject=function styleToObject(styles){var ret={};if(typeof styles==="object"){return styles}styles.split(";").map(keyVal).forEach(addToReturn);function addToReturn(keyval){ret[keyval[0]]=keyval[1]}function keyVal(str){return str.trim().split(":")}return ret};exports.objToAttributes=function objToAttributes(attributes){var ret="",value;for(var attr in attributes){value=attr==="style"?objToStyles(attributes[attr]):attributes[attr];if(attr!=="style"||value){ret+=attr+'="'+value+'" '}}return ret};exports.mapElementsToHTML=function mapElementsToHTML(elem){return elem.toHTML()};exports.mapElementsToText=function mapElementsToText(elem){return elem.toText()};exports.getElementIndex=function getElementIndex(elem,arr){var index=-1;arr.forEach(function(_elem,_index){if(elem.guid===_elem.guid){index=_index}});return index};exports.escapeHTML=function escapeHTML(html){return String(html).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")};exports.makeArray=function makeArray(arr,index){return Array.prototype.slice.call(arr,index||0)}},{}],vsvg:[function(require,module,exports){var vsvg=require("./src/");module.exports=vsvg;if(typeof window==="object"){window.vsvg=vsvg}},{"./src/":2}]},{},[]);var vsvg=require("vsvg"),paths=require("vsvg-paths"),svg=vsvg.svg,g=vsvg.g,rect=vsvg.rect,text=vsvg.text;el=svg({xmlns:"http://www.w3.org/2000/svg",width:500,height:500},g({className:"group-rects"},g({className:"rects"},rect({x:5,y:50,width:50,height:50,fill:"powderblue"}),rect({x:5,y:105,width:105,height:50,fill:"skyblue"}),rect({x:5,y:160,width:160,height:50,fill:"dodgerblue"}),rect({x:60,y:50,width:50,height:50,fill:"powderblue"}),rect({x:115,y:50,width:50,height:105,fill:"skyblue"}),rect({x:170,y:50,width:50,height:160,fill:"orangered"})),g({className:"rects",transform:"rotate(180) translate(-225,-425)"},rect({x:5,y:50,width:50,height:50,fill:"powderblue"}),rect({x:5,y:105,width:105,height:50,fill:"skyblue"}),rect({x:5,y:160,width:160,height:50,fill:"dodgerblue"}),rect({x:60,y:50,width:50,height:50,fill:"powderblue"}),rect({x:115,y:50,width:50,height:105,fill:"skyblue"}),rect({x:170,y:50,width:50,height:160,fill:"orangered"}))),g({className:"group-rects",transform:"translate(220,0)"},g({className:"rects"},rect({x:5,y:50,width:50,height:50,fill:"papayawhip"}),rect({x:5,y:105,width:105,height:50,fill:"orange"}),rect({x:5,y:160,width:160,height:50,fill:"orangered"}),rect({x:60,y:50,width:50,height:50,fill:"papayawhip"}),rect({x:115,y:50,width:50,height:105,fill:"orange"}),rect({x:170,y:50,width:50,height:160,fill:"dodgerblue"})),g({className:"rects",transform:"rotate(180) translate(-225,-425)"},rect({x:5,y:50,width:50,height:50,fill:"papayawhip"}),rect({x:5,y:105,width:105,height:50,fill:"orange"}),rect({x:5,y:160,width:160,height:50,fill:"orangered"}),rect({x:60,y:50,width:50,height:50,fill:"papayawhip"}),rect({x:115,y:50,width:50,height:105,fill:"orange"}),rect({x:170,y:50,width:50,height:160,fill:"dodgerblue"}))));document.body.appendChild(el._node);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "vsvg-paths": "0.2.0",
    "vsvg": "1.9.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