JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//davidbau.com/encode/seedrandom.min.js"></script>
<script src="//d3js.org/d3-selection.v1.min.js"></script>
<script src="https://raw.githack.com/ramnathv/facesjs/master/faces.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-4" id='div0'></div>
    <div class="col-xs-4" id='div1'></div>
    <div class="col-xs-4" id='div2'></div>
    <div class="col-xs-4" id='div3'></div>
    <div class="col-xs-4" id='div4'></div>
    <div class="col-xs-4" id='div5'></div>
  </div>
</div>

JavaScript

Math.seedrandom('helloooo');
[0, 1, 2, 3, 4, 5].forEach(function(d){
  faces.generate('div' + d)
})


function add_style(part, x){
  var y = d3.selectAll('svg')
    .selectAll('path.' + part)
  Object.keys(x).forEach(function(k){
    y.attr(k, x[k])
  })
}

add_style('hair', 
  {fill: 'darkred', stroke: 'darkred'}
)

add_style('eye', {fill: 'steelblue', stroke: 'steelblue'})