TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Trianglify – low poly style background generator with D3.js

170 pointsby qrohlfabout 11 years ago

12 comments

msvanabout 11 years ago
Good job! Here&#x27;s a similar one, but animated: <a href="http://wagerfield.github.io/flat-surface-shader/" rel="nofollow">http:&#x2F;&#x2F;wagerfield.github.io&#x2F;flat-surface-shader&#x2F;</a>. It was on HN a few months ago.
rhythmvsabout 11 years ago
Something similar is used by <a href="https://peerlibrary.org/" rel="nofollow">https:&#x2F;&#x2F;peerlibrary.org&#x2F;</a> on their homepage’s background, except that over there the pattern is dynamically being animated — to great effect.
评论 #7578730 未加载
nixterrimusabout 11 years ago
This is neat!<p>I built a little web app to play around with different options: <a href="http://nixterrimus.github.io/Triangle-Play-App/" rel="nofollow">http:&#x2F;&#x2F;nixterrimus.github.io&#x2F;Triangle-Play-App&#x2F;</a>
评论 #7579187 未加载
评论 #7589008 未加载
4gn3sabout 11 years ago
Have you thought of making a wallpaper generator of it? It would be awesome to download the output as .png with different screen resolutions
评论 #7578207 未加载
评论 #7580655 未加载
backwardmabout 11 years ago
Nicely done! The noise option really makes for a great looking pattern.
cookrnabout 11 years ago
Gorgeous! I&#x27;ve been using <a href="http://cl.ly/image/0S0X0V3F2H2K" rel="nofollow">http:&#x2F;&#x2F;cl.ly&#x2F;image&#x2F;0S0X0V3F2H2K</a> for the last few years and looking for similar, nicely colored images to swap into a rotation. I had two fun thoughts w&#x2F;r&#x2F;t your code:<p>* How would you feel about using <a href="https://kuler.adobe.com/" rel="nofollow">https:&#x2F;&#x2F;kuler.adobe.com&#x2F;</a> for color palettes?<p>* Would it be possible to make the patterns repeatable or tile-able?
评论 #7578738 未加载
samstaveabout 11 years ago
Love it -- I would request two sliders: triangle size&#x2F;density slider and color brightness... (I&#x27;d like darker screens rather than bright pastels)
评论 #7578151 未加载
评论 #7580658 未加载
qrohlfabout 11 years ago
Github link: <a href="https://github.com/qrohlf/trianglify" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;qrohlf&#x2F;trianglify</a>
zaucetechabout 11 years ago
This is sweet, maybe you could benefit from some of the code I wrote a little while earlier for something super similar: <a href="http://polygonz.zaucetech.com/" rel="nofollow">http:&#x2F;&#x2F;polygonz.zaucetech.com&#x2F;</a>
quackerhackerabout 11 years ago
Reminds of a kaleidoscope. Since you&#x27;ve based the package on Javascript, it wouldn&#x27;t be too difficult&#x2F;time-consuming to add some css3 animation to make it transform as such.<p>Props on making the Trianglify object so clean.
balls187about 11 years ago
I get an SSL error when clicking on your site link.<p><a href="https://qrohlf.com/" rel="nofollow">https:&#x2F;&#x2F;qrohlf.com&#x2F;</a>
评论 #7578492 未加载
评论 #7578499 未加载
robblesabout 11 years ago
Quick one-liner for converting and resizing these to your screen resolution (with ImageMagick):<p><pre><code> $ mogrify -path converted -format png -resize 1440x900\! originals&#x2F;*.svg</code></pre>