Hacker News new | past | comments | ask | show | jobs | submit login
Textures.js is a JavaScript library for creating SVG patterns (riccardoscalco.it)
494 points by bryanrasmussen 10 months ago | hide | past | favorite | 43 comments

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.

In heraldry colours can be 'encoded' with specific patterns.


Really interesting idea to be aware of, thank you.

The technique is called 'dithering'. Have fun reading about it - I did!

For me it harkens back to when I studied landscape architecture in university. A simpler time.

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.

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.

Previous discussions/posts:



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!

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.

This looks great. Now I need to figure out how create a quick project to use this on. Reminds me of work from an Edward Tufte book: https://en.wikipedia.org/wiki/Edward_Tufte

Once upon a time someone on HN posted about an old-school book describing patterns for graphs. Very useful for SVG, for website design, for colorblind people. I failed to bookmark it. Can someone help?? How to find that book?

This PDF is wonderful. Reminds me of Edward Tufte's work: https://en.wikipedia.org/wiki/Edward_Tufte

I'm not sure - visually it looks more less like the page I've seen. But it's thorough and a fascinating read anyway.

Bertin's Semiology of Graphics?

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?

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?

Somewhat related I created a we component for CSS3 patterns: https://github.com/jwillmer/pattern-component

As someone with colorblindness who often struggles with reading colors on maps, this would be a lifesaver if used. I love it.

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?

One reason why not using color as the sole identifier in interfaces is critically important.

I guess most people don't know what color blindness feels like. Obviously, I can only speak for myself, so YMMV.

It's not that the colors are indistinguishable per se, always. They are hard to distinguish under certain conditions such as:

a) size of the elements of the same color. If half my screen is in one color and the other in different color, it's very easy to distinguish them and say which one is what. If on the other hand you have just a few pixels, it's much harder to say what color they are.

Recommendation for app devs: don't use only 1px red border to show validation errors in forms. It's almost impossible for me to say that the border is red and not black.

b) closeness to each other in terms of distance. Similar colors far away from each other are easier to recognize vs when they are right next to each other (like in the map).

c) Similarity between colors. If the colors are not used for scale, use very distinctive colors. I always take my colors from: https://colorbrewer2.org/ based on the use-case. This has already been researched and it works.

d) movement. It does not help in recognizing colors.

These conditions don't occur that often in "real life" when walking, shopping, etc. They are mostly annoying on screen and paper.

Regarding compensation techniques:

If it is not work related, I just don't bother and don't put any effort. There is a cool map on reddit, and I can't read it because of the colors? My loss, not gonna spend time on it.

My biggest pet peeve: sport team outfits. Sometimes certain teams play vs each other and I cannot distinguish who is who. That is maddening. Why would you play black vs red when white vs red would be 100x more distinguishable. There should rules about minimal necessary contrast between the jerseys. I can't watch some matches so I don't watch them. I like teams with blue, yellow, white colors. Maybe that's why GSW is appealing to me :)

When I play FIFA with friends, I need to tell them which jersey variant to choose so I can comfortably play and have some chances. You cannot do it online games :( I wish I could select what I see on my machine. I wish there was a setting to use artificial jerseys of high contrast. Or make my opponent jerseys always black or always white and let me pick the clothing for my side. There are some colorblind options in FIFA but I don't find them good enough. They don't solve the problem fully.

If it is work related and I cannot decipher it, I will politely complain that someone used colors only to encode some information and I cannot process it. I will recommend to use something additional (words, borders, tooltips, patterns, anything that makes sense).

I also notice that kind of issues when our engineers work on dynamic maps or charts, and I try to bring it to people's attention. It's a lost battle in the grand scheme of things, but I keep fighting.

I believe it's easier in big companies because the probability of having a colorblind stakeholder is higher. In small teams (<= 7) you might not have a single colorblind person who could share their perspective and point out the problem.

I guess it works that way with everything: race, gender, translation and localization, and other disabilities, but I can mostly comment on that one thing.

Thank you so much for sharing this!

Perfect timing, i just started building a tool to create dynamic customized charts without code. Thanks for sharing !

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...

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.

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.

They're a great alternative for color in more general cases as well, especially for material with accessibility concerns!

I made an observable notebook if anyone is interested in playing around with it: https://observablehq.com/@michals2/textures-js-sandbox

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.

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. :)

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?

Wow. It's so good to eyes. Can this also be used as a background on the website? Would it be a good option?

This is very cool...

I wish there was a better explanation of the formula for defining your own pattern (the last example).

And if you're using the pattern element, you can drop in any svg element.


Thank you for the explanation! I've worked with SVGs before but wasn't aware of this.

It is not clear to me how you can create maps with this.

This just screams dnd map builder thing :)

add it to javascripting.com's database.

This too good!

So nice

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact