Download 10 Free 
Since the very first programming languages, coders have used them to generate things at random. While common examples such as numbers and letters immediately come to mind, there is so much more that can be done. The web is a visual medium and thus we can harness code to generate all sorts of random effects.
Perusing the glorious repository that is CodePen, we found several compelling examples of randomly generated things. Now to be honest, we’re not sticking to the strictest definition of the word “random”. Some examples simply pick from a small set of data you provide – so they’re not randomly pulling all things from the universe. But they are a mix of fun, interesting and useful snippets.
Random Mazes
Building your own maze puzzle is difficult. Generating one with an algorithm makes the whole process easier. This example takes a set of criteria and quickly creates a complex maze. A “random seed” feature allows you to build different mazes from the same criteria. Now, if I could just get out of this thing…
Famous Words
Quotes have long been one of the more popular items designers have randomly generated. They can both inspire us and help to build upon our own message. Here’s an attractive quote generator that takes advantage of the Random Famous Quotes API.
Funky Beats
Generating music on-the-fly is quite an interesting concept. Here we have a very clever snippet that composes random beats that use various “instruments” to play music based on generated parameters. It’s a very complicated process, but is explained thoroughly in this pen.
Random Post Widget
There are times when it makes sense to list links in a random order. For example, you might want this type of list when highlighting older content. Or maybe you want to generate a list of sponsors that doesn’t favor those higher up in the alphabet. This example provides a simple method of generating a list with some JavaScript.
Change Your Scene
Random scene generators could be a great way to keep the interest of users. I could see it being especially useful when used in online games. This snippet utilizes Three.js and creates a new 3D scene at the click of a button.
Background Check
Something a bit tamer than a full scene generator, using random backgrounds could be useful on just about any website. When done well, it keeps things looking fresh without overwhelming the user. With this snippet, a bit of JS is used to randomly display one of a set of pre-defined images.
Where it’s Always Taco Tuesday
Ever get stuck when coming up with dinner ideas? This random taco generator will help by suggesting a different variety at the click of a button. In reality, this could be a great way to harness the power of suggestion. For example, an online store feature that randomly selects a product could inspire an impulse purchase.
Creative Color Palettes
Just like our inner chef can get into a creative cooking drought, so can our inner designer. A random color palette can be just the thing we need to inspire us to start creating. That’s what makes this example so very useful. It provides three colors at random, with the ability to save and copy them for later use.
Passwords
One of the top uses for random generation is creating passwords that are incredibly hard-to-hack. Or, at least we can create ones that wouldn’t be obvious to any human. This example lets us create alphanumeric, ASCII or hexadecimal passwords of various lengths.
Subtle Effects
Randomizing special effects brings an element of surprise to users. Of course, you don’t want to go overboard to the point of distraction. With this example, the subtlety of the randomly-fading squares is perfect. It’s just enough to keep things interesting without getting all in your face about it.
Random Acts of Web Design
The ability to create some form of controlled chaos via code is part of what makes web design so fun. But it also helps with things like security and UX. Take some time out to play with the examples above and see how some randomness could improve your next project.
Related Topics
Top