WingNews logo WingNews GitHub [2]
top | item 23673534

Textures.js is a JavaScript library for creating SVG patterns

494 points| bryanrasmussen | 5 years ago |riccardoscalco.it

43 comments

order
[+] bane|5 years ago|reply
Woah, take's me back to late 80s computing when colors were few but paint programs all used to have patterns in them.

There's a really nice additive effect with patterns that can give a designer a way to show combinations of things together in a way that color really can't (bonus it's better for some visual impairments). For example, take a series of lines for one value:

   \ \ \
    \ \ \
     \ \ \
and a series for another kind of value

     / / /
    / / /
   / / /
put them in the same visual space and simple add them together

   x x x
   x x x
   x x x
You can also add in vertical, horizontal lines and even line width (and even line color over a baseline color) and you can encode a ton of different values into a single graphical area.
[+] b0rsuk|5 years ago|reply
The technique is called 'dithering'. Have fun reading about it - I did!
[+] Bjorkbat|5 years ago|reply
For me it harkens back to when I studied landscape architecture in university. A simpler time.
[+] Already__Taken|5 years ago|reply
I used this technique to layer graph areas that overlap so you can still clearly see them even in black and white. Use a dot series to get a 3rd overlapping series you can see.
[+] bbx|5 years ago|reply
I just want to say how clear and concise this documentation is. Having examples alongside their code snippets is all you need to understand the library.
[+] rajangdavis|5 years ago|reply
Previous discussions/posts:

https://news.ycombinator.com/item?id=9224776

https://news.ycombinator.com/item?id=12399964

I thought this was pretty awesome when I first saw it posted here, but unfortunately haven't found a good use case for it yet.

Thanks for sharing this again, had been a while since I thought of this library!

[+] b0rsuk|5 years ago|reply
Board games. Website design. When you start playing board games, you realize how many colorblind people are there! They're everywhere. Modern boardgames are usually designed to accommodate color blindness, but for example Race for the Galaxy only now got a 2nd edition.
[+] yowlingcat|5 years ago|reply
Wow, I love this. A couple of interesting applications I could think of here:

- structure preserving hash that automatically distributes categorical data across buckets -- this would be great for dashboards; on the job, we have dashboards with color coded dashboards but some of the colors are way too close for comfort and make visual communication difficult

- Halftoning for animation -- some of these seem like they'd be really neat if applied towards either CG animation or stationary animation as an alternative (or combined with) cel shading. I wonder if there's existing state of the art here for doing this with shader computation?

[+] GrantSolar|5 years ago|reply
This is really neat - useful and beautiful. My only minor concern is that thicker/thinner is ambiguous and my first thought would be that they carry out the heavier/lighter functionality. Perhaps denser/sparser would have been more appropriate?
[+] calineczka|5 years ago|reply
As someone with colorblindness who often struggles with reading colors on maps, this would be a lifesaver if used. I love it.
[+] dgb23|5 years ago|reply
I feel ignorant. I just found out that almost 1/5 of people have some form of color blindness with 1/20 being the better known red-green type.

I guess one reason why people don’t talk about it much is that the color blind have good strategies to deal with it? It must be confusing at times?

[+] houssem_fat|5 years ago|reply
Perfect timing, i just started building a tool to create dynamic customized charts without code. Thanks for sharing !
[+] wes-k|5 years ago|reply
Hey I'm working on this too! Nothing to show off yet except for this fun animation I made when playing with the core engine: https://imgur.com/a/ELhwWo5.

Some existing projects you may want to check out:

* http://data-illustrator.com/ (dead?)

* https://charticulator.com/ (was dead, looks slightly alive now)

* http://ddg.namwkim.org/ (dead?)

My inspiration came from Bret Victor's Drawing Dynamic Visualizations (1). Though I'm taking a slightly different approach. Brett’s data is declarative, but drawing is procedural (in steps) where mine is all declarative. I think Brett's approach is more powerful but doesn't lend itself as nicely to normal vector drawing UX.

1: http://worrydream.com/DrawingDynamicVisualizationsTalkAddend...

[+] davidhyde|5 years ago|reply
Why show png's instead of svg's on the webpage when the tech is all about svg? Otherwise, great library! Just thought that it's a missed opportunity to show everyone how awesome svgs are.
[+] ornel|5 years ago|reply
This is fantastic. Textures are an excellent alternative for quantifying things in cartographic maps and to reduce the often distracting use of color. I wonder how these patterns would perform if imported into Inkscape, which in my experience becomes painfully slow when too many patterns are used.
[+] Lorin|5 years ago|reply
They're a great alternative for color in more general cases as well, especially for material with accessibility concerns!
[+] willio58|5 years ago|reply
I've had this site bookmarked since 2018, all of the comments on the great design just go to show how far simple and concise execution can take a site, still looks brand new.
[+] rcarmo|5 years ago|reply
This is lovely. Just lovely. Reminds me of the Postscript hacks we used to do with early Apple laser printers, back when they were the most powerful computers they shipped. :)
[+] wjdp|5 years ago|reply
Very nice, really like this visual style.

Was a bit disappointed that the Italy and US maps were just PNGs. Can these not be rendered in browser?

[+] wilsonbright|5 years ago|reply
Wow. It's so good to eyes. Can this also be used as a background on the website? Would it be a good option?
[+] lappet|5 years ago|reply
It is not clear to me how you can create maps with this.