Skip to main content
CSS is fun and cool and I like it.
Article

Let’s Make Generative Art We Can Export to SVG and PNG

Let’s say you’re a designer. Cool. You’ve been hired to do some design work for a conference. All kinds of stuff. Website. Printed schedules. Big posters for the rooms. Preroll slides. You name it.

So you come up with an aesthetic for it all — a design vibe that ties it all together and makes it feel cohesive. Yet each usage will be unique and different. Cool, let’s go from there.… Read article “Let’s Make Generative Art We Can Export to SVG and PNG”

Article

Randomizing SVG Shapes

Say we wanted to continuously randomize the radius of a circle. We could kinda fake a random look with just CSS, but let’s go for full-on pseudo-random numbers created in JavaScript.

We’re talking SVG here, so here’s our base circle:

<svg viewBox="0 0 100 100">
  <circle id="circle" cx="50" cy="50" r="50"></circle>
</svg>

A little JavaScript function to generate random integers for us within a range:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

To … Read article “Randomizing SVG Shapes”

Snippet

Shuffle Children

$.fn.shuffleChildren = function() {
    $.each(this.get(), function(index, el) {
        var $el = $(el);
        var $find = $el.children();

        $find.sort(function() {
            return 0.5 - Math.random();
        });

        $el.empty();
        $find.appendTo($el);
    });
};

Usage

$(".parent-element").shuffleChildren();

See the Pen
jQuery Shuffle Function
by Chris Coyier (@chriscoyier)
on CodePen.… Read article “Shuffle Children”