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.
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…
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.
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
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.
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.
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.
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.
- 50 Free Web-Based Tools for Web Designers
- How to Target Design Elements with the CSS :not Pseudo-Class
- 10 Examples of Unorthodox Shapes Created with CSS
- 8 Common Website Layouts Built with CSS Grid
- 10 Incredible Examples of CSS, JS & SVG Logo Design
- 10 Amazing Examples of CSS, SVG & Canvas Masks In Action