Textures.js is a JavaScript library for creating SVG patterns
riccardoscalco.it
Textures.js is a JavaScript library for creating SVG patterns
1–10 of 45 posts
Re: Textures.js is a JavaScript library for creating SVG patterns
#2This 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.
Re: Textures.js is a JavaScript library for creating SVG patterns
#3Wow, 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?
Re: Textures.js is a JavaScript library for creating SVG patterns
#4This is very cool...
I wish there was a better explanation of the formula for defining your own pattern (the last example).
Re: Textures.js is a JavaScript library for creating SVG patterns
#5This is very cool... I wish there was a better explanation of the formula for defining your own pattern (the last example).
It's just a path command string: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Pa...
Mixed with some string interpolation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Re: Textures.js is a JavaScript library for creating SVG patterns
#6Woah, 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:
\ \ \
\ \ \
\ \ \
/ / /
/ / /
/ / /
x x x
x x x
x x x
Re: Textures.js is a JavaScript library for creating SVG patterns
#7Previous 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!
Re: Textures.js is a JavaScript library for creating SVG patterns
#8This is very cool... I wish there was a better explanation of the formula for defining your own pattern (the last example).
It's just a path command string: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Pa... Mixed with some string interpolation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
And if you're using the pattern element, you can drop in any svg element.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pat...
Re: Textures.js is a JavaScript library for creating SVG patterns
#9I 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.
Re: Textures.js is a JavaScript library for creating SVG patterns
#10This 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!