Skip to content

Instantly share code, notes, and snippets.

@m4rk4

m4rk4/trianglify.html

Last active January 25, 2021 18:42
Show Gist options
  • Save m4rk4/672c955a0478b64257e193f896fd8f6e to your computer and use it in GitHub Desktop.
Save m4rk4/672c955a0478b64257e193f896fd8f6e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
trianglify.html
<!DOCTYPE html>
<html><body>
<script type="text/javascript" src="https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js"></script>
<script>
var w = 1080;
var h = 1920;
const options = {
width: w,
height: h,
cellSize: 100+Math.floor(Math.random()*40)
}
let svg = trianglify(options).toSVG();
let svgSrc = "data:image/svg+xml;base64," + btoa(svg.outerHTML);
let svgImg = new Image();
svgImg.width = w;
svgImg.height = h;
svgImg.onload = () => {
var cnv = document.createElement("canvas");
cnv.width = w;
cnv.height = h;
let ctx = cnv.getContext('2d');
ctx.drawImage(svgImg, 0, 0);
let pngImg = document.createElement("img");
pngImg.src = cnv.toDataURL("image/png");
document.body.appendChild(pngImg);
}
svgImg.src = svgSrc;
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment