svg-patterns/p/rhombic3d.js

SVG patterns for Data Visualization.

'use strict';

var dom = require('virtual-dom/h');

var _require = require('../helpers'),
    M = _require.M,
    l = _require.l,
    pattern = _require.pattern;

var tile = function tile(s) {
  var w = s * 1.5 / 4;
  var h = s / 4;
  return '' // 1. vertical
  + M(1 * w, 0 * h) + l(0, 1 * h) + M(3 * w, 0 * h) + l(0, 1 * h) // 2. vertical
  + M(0 * w, 1 * h) + l(0, 2 * h) + M(2 * w, 1 * h) + l(0, 2 * h) + M(4 * w, 1 * h) + l(0, 2 * h) // 3. vertical
  + M(1 * w, 3 * h) + l(0, 1 * h) + M(3 * w, 3 * h) + l(0, 1 * h) // 1. zig-zag
  + M(0 * w, 1 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) // 2. zig-zag
  + M(0 * w, 2 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) + M(0 * w, 2 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h) // 3. zig-zag
  + M(0 * w, 3 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h) + l(1 * w, 1 * h) + l(1 * w, -1 * h);
};

var ratio = 1.5;
var defaults = {
  size: 14,
  // size of the pattern
  fill: 'none',
  // any SVG-compatible color
  strokeWidth: .6,
  stroke: '#343434',
  // any SVG-compatible color
  background: null // any SVG-compatible color

};

var rhombic3d = function rhombic3d() {
  var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  opt = Object.assign({}, defaults, opt);
  Object.assign(opt, {
    width: opt.size * ratio,
    height: opt.size,
    bg: opt.background,
    children: [dom('path', {
      d: tile(opt.size),
      fill: opt.fill,
      stroke: opt.stroke,
      'stroke-width': opt.strokeWidth + '',
      'stroke-linecap': 'square'
    })]
  });
  return pattern(opt);
};

module.exports = rhombic3d;