"TEST: Trianglify"
Bootstrap 3.1.0 Snippet by mrmccormack

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TEST: Trianglify</h2>
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://qrohlf.com/trianglify/trianglify.js"></script>
<script type="text/javascript">
var t = new Trianglify();
//var t = new Trianglify({cellsize: 100, bleed: 150});
var pattern = t.generate(800, 600); // svg width, height
pattern.svg // SVG DOM Node object
pattern.svgString // String representation of the svg element
pattern.base64 // Base64 representation of the svg element
pattern.dataUri // data-uri string
pattern.dataUrl // data-uri string wrapped in url() for use in css
// pattern.append() // append pattern to <body>. Useful for testing.
// var t = new Trianglify();
var pattern = t.generate(document.body.clientWidth, document.body.clientHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Trianglify. Made by (and copyright) @qrohlf, licensed under the GPLv3.
// Needs d3.js
//
// JSHint stuff:
/* global module, require, jsdom:true, d3:true, document:true, XMLSerializer:true, btoa:true*/
function Trianglify(options) {
if (typeof options === 'undefined') {
options = {};
}
function defaults(opt, def) {
return (typeof opt !== 'undefined') ? opt : def;
}
// defaults
this.options = {
cellsize: defaults(options.cellsize, 150), // zero not valid here
bleed: defaults(options.cellsize, 150),
cellpadding: defaults(options.cellpadding, 0.1*options.cellsize || 15),
noiseIntensity: defaults(options.noiseIntensity, 0.3),
x_gradient: defaults(options.x_gradient, Trianglify.randomColor()),
format: defaults(options.format, "svg"),
};
this.options.y_gradient = options.y_gradient || this.options.x_gradient.map(function(c){return d3.rgb(c).brighter(0.5);});
}
//nodejs stuff
if (typeof module !== 'undefined' && module.exports) {
d3 = require("d3");
jsdom = require("jsdom");
document = new (jsdom.level(1, "core").Document)();
XMLSerializer = require("xmldom").XMLSerializer;
btoa = require('btoa');
module.exports = Trianglify;
}
Trianglify.randomColor = function() {
var keys = Object.keys(Trianglify.colorbrewer);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular

Questions / Comments: