node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

msg2svg

msg2svg

Build Status Coverage Status Code Climate Dependency Status

What is it?

Generates a seemingly random svg "artwork" based on a provided random seed. That way, the same words would always end up generating the same seemingly random "art".

Demo?

Sure, this is all very useless, but here you go

Usage

If you for some reason need this, here it is:

Install with npm

npm i msg2svg

Require in your project

'use strict';
// If in a browser environment (but built with browserify or similar), you can 
// do something like this: 
var msg2svg = require('msg2svg').bind(null, document);
 
var redraw = function(seed) {
  d3.select('svg')
    .remove();
 
  var svg = msg2svg(seed, {
    width: 1000,
    height: 400
  });
  d3.select('body')
    .node().appendChild(svg.node())
 
};
 
redraw(Math.random());
 
document.getElementById('redraw').addEventListener('click', function() {
  redraw(document.getElementById('seed').value);
});
 
/**
 * Yeah, so say you have HTML structure something like this:
 * <div>
 *  <input type="text" placeholder="Enter random seed" id="seed" />
 *  <input type="submit" value="Redraw" id="redraw" />
 * </div>
 */
document.getElementById('redraw').addEventListener('click', function() {
  redraw(document.getElementById('seed').value);
});

Why did you make it?

I used it in this simple project - "an extremely persistent chat application".

Here is an animated gif from that, just since I like gifs. Chatting with a conversation with substance

Licence

WTFPL