A rather geeky/technical weblog, est. 2001, by Bramus
Great post by George Francis, in which he leverages the Voronoi tessellation to generate aesthetically pleasing random patterns. When composing generative patterns, placing objects on a canvas purely at random can feel chaotic, while aligning them to a traditional grid can feel rigid/predictable. While both chaos and exacting precision can both be beautiful qualities in …
Continue reading “Crafting Organic Patterns With Voronoi Tessellations”
Define a <pattern>, give it an id, and then use it as a fill on an other SVG element using said id: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg> <svg height="100" width="100" style="float:left" class="pattern-swatch"> <rect style="fill: url(#circles-1) #fff;" x="0" y="0" height="100" …
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns …