DEV Community: George Francis

CodePen - Wibbly Wobbly SVG Jelly ✨

George Francis — Wed, 19 May 2021 07:43:54 +0000

This lil' jelly character is an example from my upcoming tutorial “Creating a Liquid Hover Effect with GSAP & SVG“ — stay tuned for updates! 👀

Introducing... My New Site! ✨

George Francis — Fri, 07 May 2021 14:20:04 +0000

Check out the site here! https://georgefrancis.dev/ 👀

Hey! How's it going? I've been a little quiet on DEV recently, but... I'm very happy to finally share why! 🎉

Well, as you might have noticed from the big ol' title/URL above, I have launched my very own site! As much as I love DEV 💛, and think it's a fantastic place to publish, I have found myself wanting a singular home for all of my CodePens, articles, and other bits and pieces — so I decided to build one.

The site is built with Eleventy, hosted on Netlify, and is finished off with a healthy scoop of generative magic ✨ It features all of my past writing from DEV, and will be the best place to catch any new content from me going forward.

Honestly, I could chat forever about the design process, tech stack, etc, (and maybe I will someday) but for now, I'd just like to share the site with y'all! If you do have any specific questions, though, please do give me a shout. I'm always happy to chat.

Anyway, now that the site is launched, I am starting to rattle through my ever-growing Trello list of article ideas, so expect some fresh new creative coding/generative art content from me soon 🎨

In case you missed it up there ^ here's a link to the site.

Cheers!

George 👀

CodePen - A Very Wobbly Liquid SVG Button ✨

George Francis — Fri, 16 Apr 2021 11:16:29 +0000

This very wobbly button makes use of vectors, catmull-rom splines and linear interpolation to create an entirely vector based "liquid" button.

Toggle the debug mode to see how it works!

CodePen - Generative SVG Noise Grid Pattern Maker 🎨

George Francis — Thu, 08 Apr 2021 08:07:00 +0000

I'm a huge fan of these kinds of noisy grid patterns, and I wanted to add some to my in-progress personal site. Rather than tinkering away in Figma, I thought I would make a little generator.

I hope some other folks find it useful! 🚀

CodePen - Fuzzy VHS Dream Clouds 📼 ☁️ [PIXI]

George Francis — Fri, 19 Mar 2021 09:34:08 +0000

I'm not really sure what this is... but I kinda like it.

CodePen - Generative macOS Big Sur Waves 🌊 [SVG]

George Francis — Sat, 13 Mar 2021 08:34:01 +0000

This is a generative program that creates macOS Big Sur style wave backgrounds. Each image is random within constraints 🎲

The waves generated here may not always look perfect, but they are unique! If you find an output you like, you can copy the SVG to your clipboard using the download button 🚀

Interested in a tutorial on how I made this? Let me know!

A Generative SVG Starter Kit

George Francis — Thu, 11 Mar 2021 12:09:30 +0000

SVG is a fantastic medium for generative art. It can scale to any resolution, is a joy to debug, and has a multitude of incredible filters/effects built-in.

This post aims to provide you with all the tools you need to start creating your own generative SVG art/design. Unlike my other tutorials, we won't be creating one single example here. Rather, we will be examining a collection of libraries, utility functions, and techniques that once learned can be used to create anything you like!

Sound good? Let's do it 🎨

Psst! I wrote this article after talking about generative SVG in the wonderful viewBox newsletter. Be sure to check out the issue here for more generative treats.

Who is this starter kit for?

Generative art savant, who is somewhat new to SVG? SVG magician, who is dipping their toe into the generative art ocean? There is something here for everyone!

No prior generative art knowledge is necessary to make the most out of this post. Some basic SVG knowledge (drawing shapes, giving them a fill color, etc) will be helpful, though. To make the most out of this starter kit, you'll need a working knowledge of HTML/CSS/JS, too.

If you are completely new to SVG, I recommend reading through this MDN Tutorial. Keeping an eye on the docs as a reference, experiment in a CodePen. Draw some simple shapes, move them around, color them in. SVG is a markup language like HTML, and it's a lot less scary than it seems.

Show me the code!

If you would like to skip ahead and dive in with creating using this starter pack, I got you. Here's a CodePen with all the utility functions and HTML/CSS setup included. Hit fork to get started right away.

I know, it doesn't look like much right now, but there's a ton to unpack here...

Onwards!

What is generative art?

For some folks reading this post, the term “Generative Art” may be an unfamiliar one. If you are familiar with a generative approach to art/design already, feel free to skip this section.

If not — here's a quick example...

Say, you are a painter. You have some dice and 6 colors in your palette. You roll the dice. Based on how the dice lands, you choose one of the 6 colors and paint a stripe on your canvas. If the dice reads “1” you always paint a blue stripe, “2” and you paint a red stripe, and so on. You continue this process until your canvas is full.

That's all generative art is. Art created with an element of autonomy/chance. There are no rules, aside from the ones you define. Generative art doesn't even need to digital. Computers only happen to be wonderful companions for this type of creation. Why? They are fantastic at performing repetitive tasks, fast.

To illustrate the above, here's a simple CodePen that “paints” random stripes on a canvas:

Try clicking the regenerate button. Pretty speedy right? The computer re-renders the image, with a random result, in a matter of milliseconds. Far more efficient than a squishy human painting on a physical canvas! This kind of speed is invaluable when exploring more complex emergent behavior/patterns.

A blank canvas

Most paintings start with a blank canvas of some kind. When working with generative SVG, that canvas is an <svg> element on a web page. Here's how I set up the HTML/CSS for almost all my generative SVG work.

<svg class="canvas" viewBox="0 0 200 200"></svg>

First, in the HTML, we have an <svg> element with a single attribute set, viewBox. This attribute defines a coordinate space. In our case, the coordinate space has a width of 200 units and a height of 200 units.

Once defined, we “draw” everything in the SVG element relative to its viewBox. The SVG will then scale its contents to any resolution. This is one of SVG's most handy features, especially when it comes to generative art. A single SVG can produce a huge physical print or render on a narrow mobile screen!

Note: I'm keeping things somewhat high-level here. If you would like to read more about the viewBox attribute, check out this article on CSS tricks.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0, 0%, 96%);
}

.canvas {
  width: 75vmin;
  height: 75vmin;
  background: hsl(0, 0%, 100%);
}

Next up, in the CSS, we have a small selection of styles that achieve 2 things:

Make sure the SVG element is a perfect square that always fits within the viewport. Slap-bang in the middle. Perfect for CodePens!
Give the SVG element a white fill, and set the page background to a very light grey color. This is to help visualize the canvas.

That's it! This HTML/CSS setup is everything you need to get started with generative SVG. It's simple, flexible, and will make sure your work looks great on everyone's screen.

Note: A 200x200 unit canvas is my preference and completely arbitrary. Not feeling the square? Experiment with your own viewBox units and aspect ratios/element sizes.

An SVG paintbrush

If the SVG element is our canvas, SVG.js is our paintbrush. When working on generative art, you will need to create elements (such as a <rect> or a <circle>) in a dynamic way.

Say you would like to create shapes as part of a loop. You create a for-loop that iterates 100 times. Within each iteration, you choose a random number between 0 and 1. If that number is greater than 0.5, you draw a rectangle. If it is less than 0.5, you draw a circle.

As SVG is a markup language, there is no real way of handling this kind of conditional/real-time rendering built-in. That's where JavaScript, by way of SVG.js, comes in to help.

Scripting SVG with JavaScript alone can be tedious. SVG.js provides a terse, easy-to-use way of creating/removing/updating SVG elements. That's it. It provides close to complete coverage of the SVG spec and is a joy to work with.

Here's an excerpt of the JS required for the above stripes program, without SVG.js:

for (let i = 0; i < width; i += stripeWidth) {
  ...
  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  rect.setAttribute("x", i);
  rect.setAttribute("y", 0);
  rect.setAttribute('width', stripeWidth);
  rect.setAttribute('height', height);
  rect.setAttribute("fill", color);
  rect.setAttribute("stroke", "#fff");

  svgElement.appendChild(rect);
}

Here's an excerpt of the JS required for the above stripes program, with SVG.js:

for (let i = 0; i < width; i += stripeWidth) {
  ...
  svg.rect(stripeWidth, height).x(i).y(0).fill(color).stroke("#fff");
}

Ah, Much better 🧘

Note: If you would prefer to reduce your dependencies, working with just JavaScript is completely fine. There are likely some more elegant ways of handling the above but personally, I prefer to offload my SVG scripting and focus on the creative stuff.

SVG.js in the wild

To demonstrate what is possible with SVG.js, I have a couple of amazing CodePens here from Liam Egan. These pens are a fantastic example of how beautiful generative SVG can be, and how powerful SVG.js is in a generative context.

“Grow 4”

“Flare 2”

Be sure to check out Liam's CodePen for more! 🖊

4 utility functions... endless possibilities

So, we have a responsive blank canvas and an awesome way of adding to it. What next? Some helpful functions to decide what to render would be great.

First off, a quick note. There's a common misconception that generative art is super complex 🤯 and you need to be some kind of math whizz to do it. Well, to quote the great Dwight Shrute...

FALSE

You don't. I promise it's not as scary as it seems. Armed with the 4 functions/examples taught here you will have all you need to make beautiful works of art. No crazy math skills required. Creativity is the most important ingredient in delicious generative art.

I have added the source code for all these functions to this repository. They are also available as an NPM package for ease of installation.

Note: This is not an “official” library, so please don't expect tests, documentation, etc... yet! 👀

random()

This is a stone-cold generative classic. My version of random() can do two things; return a random number within a range, or return a random item from an array.

Here's how you can use it to produce a random number within a range:

Here's how you can use it to pick a random item from an array:

Cool! This simple function will be a loyal companion on your generative journey. You could use it to:

Generate a random radius for a <circle>
Position an object at a random position within an SVG
Pick a random fill color from a pre-defined array of values
Rotate an element by a random amount

If this function is new to you, fork the starter CodePen and experiment for a while!

map()

This is a super helpful function, especially when dealing with user interaction. It does 1 thing — map a number that usually exists in one range to another. This is a little tricky one to explain, so here's a CodePen:

In this example, we use map() to modulate an ellipse's width/height based on the user's mouse position. Dig into the JavaScript for a practical example of how map() works 👀

Although map() is fantastic for dealing with user input, it can also be helpful in a bunch of other contexts. You could use it to:

Set an element's size based on how far it is from another
Map temperature data from a weather API to the opacity of a yellow circle... like the sun!
Animate an element on scroll by mapping the current scroll position to a more useful (random?) range

Again, if this function is new to you, have a play. Fire up a new CodePen and experiment!

spline()

If you have read through any of my tutorials, or checked out my CodePen profile, you have seen spline() in action. I'm obsessed. It's the best.

What does it do? It draws a perfect, smooth curve between any set of points. It's incredible for creating organic, soft shapes. Here's a simple example of spline() in action:

We store an array of random { x, y } coordinates (thank you random()) and use spline() to draw a smooth curve through them. Nice. You may already see how this could be great for data-visualization, but spline can do so much more.

In this CodePen, I use spline() to creating an undulating SVG blob:

You can check out the tutorial for this CodePen here.

In this example, I use spline() to create generative bodies for little blob characters:

You can check out the tutorial for this CodePen here.

Cool! As per usual, experiment with this function and see what cool stuff you can create. You could even follow along with one of the above tutorials if you like.

pointsInPath()

This is a new addition to my generative utility belt. It returns an array of equidistant points plotted on an SVG <path> element. This is amazing, as it allows you to create your very own, generative, stroke styles.

Here's a demo of this technique that I put together for the wonderful viewBox newsletter:

Have a quick look around the source code of the above CodePen. You can see how well random() works alongside pointsInPath(). Magical!

Color

Some folks love working in black and white, and that's awesome. Me... I like things to be bright and colorful. I don't have a fixed approach to color in generative art, but I love to use HSL as a format.

Why? HSL is far more intuitive, to me than HEX or RGB. I won't go on an HSL deep dive here, but I explain how it works in detail in this post.

Using JS template literals and HSL, one can form generative color palettes in a few lines of code. Here's an example:

In this example, we are making use of random() to pick a “base” random hue. We then create 3 template literal colors, each with a hue 120 degrees apart. The technical term for this is a “triadic” color palette. This is a classic, simple, way of choosing colors that look great together.

You can extend this method to use many other steps of rotation... for more information about color theory, and using a color wheel, check out this article.

Say, for example, you wanted to use an analogous color palette (3 hues, each 30 degrees apart), the code would look like this:

Animation

So far, we have only focused on the static creation of visual elements. For a lot of stuff, this is great! I love to create still generative images. Sometimes, though, you gotta get things moving around.

Generative animation is a huge subject and deserves a post of its own. For now, though, here's an overview of the two primary ways I work with animation...

Method 1, the animation loop

For some sketches, like the undulating blob I referenced earlier, I use an animation loop. An animation loop in JavaScript usually looks something like this:

function animate() {
  ...
  requestAnimationFrame(animate);
}

What's happening here? The function animate() calls itself over-and-over again, somewhere around 60 FPS. It does so using the browser method requestAnimationFrame. Within this function, you can update variables and move things around.

I won't be diving too deep into requestAnimationFrame here, but here is a great CSS tricks article if you would like to learn more.

Here's a simple CodePen to show how you can use an animation loop to move a <rect> around the screen:

Method 2, GSAP

Recently, I have been turning to the animation library GSAP to handle some of my animations. GSAP is super powerful, flexible, and lends itself well to generative work. It also has fantastic easing presets baked in.

I won't go into detail demonstrating GSAP, as it already has comprehensive documentation. It is worth linking, though, to its utility functions page. There's some great stuff here, including some similar functions to the utilities we explored earlier.

Here's a quick CodePen demonstrating some generative GSAP animation:

Next steps

You made it to the end! Congratulations. That was a real whirlwind generative tour. You are now set up with all the technical stuff you need to make wonderful generative art. But what about, like... inspiration?

If I am struggling for ideas, I look to artists/designers I love. I find a piece of theirs I like; examine its structure, the colors, the shapes, the texture, and go from there. How could you make a piece generative? Good artists borrow, etc...

Another great avenue of exploration if you are stuck for inspiration is Dribbble. Dribbble is an absolute goldmine of fresh new design trends. This stuff can be a great source of inspiration for generative work.

Finally, here's a list of generative learning resources. There's enough content here to take you far into your generative journey!

The Coding Train - I learned to code watching this channel. Dan has fantastic videos on almost every generative subject you could think of.
Tyler Hobbs - Tyler is a fantastic artist who writes some incredible essays. A veritable banquet of generative treats.
The Nature Of Code - An excellent book on simulating natural systems in code.
More from me! - Total shameless plug right here. I write a lot of generative tutorials, so if you enjoyed this one be sure to check them out.

So long!

Thank you for taking the time to read this article. I hope you have learned some cool new techniques, and I can't wait to see what you make with them!

If you do make anything with this stuff, please do send it my way. There's nothing I love more than seeing what people do with my tutorials. It's always far more interesting than what I create to start with!

Enjoyed this tutorial? Follow me on Twitter @georgedoescode for more front-end/creative coding content 🎨

This tutorial took around 10 hours to put together, all in. If you would like to support my work you can buy me a coffee.

CodePen - A Simple SVG Blob Editor [GSAP]

George Francis — Sat, 06 Mar 2021 07:59:45 +0000

I have been wanting to try GSAP for a while, so I made a simple little “spline” editor as a test... It works best in Chrome + Safari!

A beginner's guide to applying color in UI design

George Francis — Thu, 25 Feb 2021 12:28:41 +0000

Is color theory getting you down? Are you tired of the same old preset palettes? Sick of hitting “regenerate” on a magical color palette creator?

Don't worry, we've all been there...

This post hopes to be your virtual guide up the mystical mountain of color. By the time you reach the top, you will have all the skills you need to create beautiful, coherent palettes.

Sound OK? Let's set off for basecamp.

Prerequisites

To make the most out of this tutorial, you should be comfortable working with both HTML and CSS.

The format of this tutorial

This tutorial is all about learning by doing. We will be starting with the same base design and adding our own individual style.

The base design itself is a “product card”, the likes of which you will likely have come across on a variety of e-commerce sites. It is a simple example but provides an excellent blank canvas to experiment with color.

I have created a CodePen that you can fork to get started.

Here it is:

Right now, the colors are either black or white. There is no product image and the design has little personality. It's very basic, but that's OK. This is where you come in!

Choosing your product

First things first, you should choose an image to replace the question mark. This could be anything — a chocolate bar, a pair of shoes, a tractor, a cool hat... It's up to you.

I encourage everyone to choose their own individual product image, though. Why?

Different products will suit different aesthetics and thus different color palettes. You may choose to add vibrant, bright colors for a candy bar or subdued, calming colors for a yoga mat. By choosing your own aesthetic and palette, you can better learn how to apply the techniques to your own work.

The starter CodePen comes with Twemoji built in to make choosing a product image as easy as possible. If you change the emoji in card__img, Twemoji will replace it with a high-res SVG version.

<div class="card__img" role="img">❓</div>

Tip: on macOS, you can open an emoji keyboard with ctrl + cmd + space. On Windows, you can open one with windows/start + .

I'm going to choose the “herbs” emoji for my product card. I'm also going to change the card title and meta description to match my choice.

My product card now looks something like this:

You should have something similar, but with your own product image/emoji and text content. Nice work! Let's move on up the color mountain.

Working with HSL

When working with color, I always reach for HSL. To me, it is the most intuitive way of representing colors in the browser. We will be using HSL throughout this tutorial, too, so here's a quick primer...

HSL stands for hue, saturation, lightness.

Hue is the angle of rotation (in degrees) on a color wheel for a particular color. In the browser, red sits at 0 degrees. Here's an example:

Saturation is how “intense” a color is. A lower saturation will appear more grey, a higher saturation more vibrant:

Lightness is how close to black or white the color is. A value of 0% lightness will always appear black, a value of 100% will always appear white:

We write HSL colors in CSS like this:

p {
  /* hue, saturation(%), lightness(%) */
  color: hsl(0, 100%, 50%);
}

If this is all new to you, don't worry! It can take a little while to get used to HSL, but I promise it is worth it.

If you feel like you need some practice, spend a little time experimenting. You can do this in a graphics editor such as Figma or Sketch, or right in the browser. Whatever fits with your workflow.

Designing in grayscale

My personal preference when creating a design is to always start with shades of gray. By holding the color until the end, we can focus on our typography, spacing, and content.

You may notice in the starter CodePen that there are only two colors, black and white. This isn't quite enough to design with, so we need to add some more. Let's not start throwing colors in at random, though...

Defining the shades of gray

A good practice when working with color is to define a system up-front. For very small projects like this one, 5 shades of each color should be enough. For larger projects, 9 - 10 shades are best.

If you check out the Tailwind and Material UI documentation you can observe this pattern in the wild.

To work out some initial shades, let's use a method based on this article by the Refactoring UI folks.

1. Choose a middle/base shade - There are no set rules here, but try not to go too light or dark. For grays, a lightness of around 40 / 50 is a good start. I like to make sure this shade has enough contrast for use with text (more on this a little later)

2. Choose the darkest and lightest shades - Again, there are no right or wrong answers here. I'm using a lightness value of 10 for my darkest color and 96 for my lightest:

3. Fill in the gaps - Finally, choose two more shades that sit between the middle and darkest / lightest colors. The lightness values I have chosen for these two shades are 25 and 85, respectively.

After following the steps above, you should have a rough grayscale palette all set up. This will change over time and likely need some tweaking as you work with it, but it's perfect for now.

Again, I encourage you to make these shades your own. You don't need to copy the above example exactly, but it should provide a good reference as you build your own palette.

Applying the shades of gray

Let's apply our grayscale colors to our product card and mellow out those harsh visual vibes. I'm looking at you #000.

Note: I would usually define my shades of gray before starting any design work and apply them as I go. For the purposes of this tutorial, though, we are going to be adding them after-the-fact.

First, let's add the pre-defined shades of gray as CSS custom properties in our code. Storing our colors as custom properties will allow for simple tweaking later on.

:root {
  --gray-100: hsl(0, 0%, 10%);
  --gray-200: hsl(0, 0%, 25%);
  --gray-300: hsl(0, 0%, 46%);
  --gray-400: hsl(0, 0%, 83%);
  --gray-500: hsl(0, 0%, 96%);

  --white: hsl(0, 0%, 100%);
}

I like to label my shades <color_name>-<increment_of_100> This is a personal preference and it works great for me, but feel free to name them as you wish. I understand naming conventions are very personal!

Now we have our custom properties added to our CSS, we can apply them to various elements of our product card.

First, let's make the card's description our second darkest gray. This will leave enough room “either side” to create a visual hierarchy for our headers and meta text.

.card__description {
  color: var(--gray-200);
}

Next, we can now make our card title our darkest shade of gray. I often like to set headings a little darker in shade than other text elements to help them stand out.

.card__title {
  color: var(--gray-100);
}

To further build our hierarchy, let's push the card's “meta” text back a little by making it our middle gray shade. We can also make the little dot our second-to-lightest gray:

.card__meta {
  color: var(--gray-300);
}

.card__meta:before {
  background: var(--gray-200);
}

Looking good! From here, we can style up our “primary” and “secondary” buttons using an assortment of shades:

.card__btn {
  background: var(--gray-100);
  color: var(--white);
}

.card__btn--outline {
  background: var(--white);
  color: var(--gray-200);
  border: 1px solid var(--gray-400);
}

Finally, we can set our image background to our lightest shade of gray, and the little heart icon to the middle:

.card__img-wrapper {
  background: var(--gray-500);
}

.card__heart {
  color: var(--gray-300);
}

Phew! That's a lot of changes. Here's a CodePen showing everything we have done so far...

Through using only shades of gray we have established a clear visual hierarchy. Important elements such as the product title are darker and more prominent. Less important elements are lighter and less prominent.

Compared to the original black and white design, there is a lot more order to the card's layout. Before, every element was fighting for your eye's attention. Now, everything sits in its own space.

A note on accessibility - check your contrast

When applying color, particularly to text elements, be wary of contrast. Contrast, or perceived “luminance”, is the difference in brightness between two colors.

This light gray text on a white background, for example, has a rather low contrast ratio of 1.48:

This dark gray text has a far higher contrast ratio of 10.37:

When working on the web, we must always hit at least WCAG AA color contrast guidelines. This means:

A ratio of at least 4.5:1 for regular text elements
A ratio of at least 3:1 for large text elements (usually around 18.5px and bold, or 24px with a regular weight)
A ratio of at least 3:1 for graphical objects and UI components (the border on a text-input, for example)

There are many methods available for checking color contrast in your designs. For testing a whole page, I like to use Chrome's lighthouse that runs straight from dev-tools. For checking individual colors, I like this excellent tool from Alex Clapperton.

In time, you will find your own way of checking contrast that best fits your workflow. For a start, though, these will work great.

Choosing a personality

OK, so our product cards are looking good. By establishing a visual hierarchy, things are already looking a lot more “designed”. We have done a lot of work using only grays, but it's time to add a little touch of color.

First things first, spend a moment thinking about the personality you want to convey with your UI. The personality you land on will help decide your primary/base color.

If you have chosen a diamond ring for your product image, you may want to go for a regal/exclusive personality.

If you have chosen a beach umbrella, you may want to explore a happy, vibrant personality.

There are no right or wrong answers with this so go with your gut. For my herbs, I am going for calm and natural.

Choosing a primary color + shades

When creating a color palette, I like to start with a single primary/base color. We will apply this color the most throughout our UI.

Keeping the personality you landed on earlier in mind, decide on a color to begin exploring. In my case, I have chosen green.

There are tons of resources online that explore the relationship of different colors/emotions. While these are a great reference, they aren't going to give you a definitive answer. Use them as a guide, but trust your eye. This Wikipedia page on color psychology is a good starting point.

Once you have chosen a rough color, how you experiment is completely up to you. Some like to work in a graphics editor such as Figma/Sketch, whilst others like to work in the browser.

If you aren't sure, fire up a new CodePen, create a square in the middle of the page, and start experimenting with hsl().

...

Stuck? Don't worry!

I know, choosing a primary color can feel like an impossible task. Even after narrowing things down to an approximate hue, there are thousands of options. How on earth do you choose one?

If you find yourself getting a little lost at color sea, I recommend trying out the following:

Research some brands/sites you like and use dev-tools or an extension to inspect their palette. In particular - examine how they set the saturation and lightness for their primary/base color. This should help you get in the right ballpark for yours.
Choose a painting or photograph you like. Use a browser extension to extract its colors in the same way as above. This can be a fantastic source of inspiration if you hit a wall!
Try a color generator such as coolors.co, or check out a design resource such as colors.cafe. Whilst I don't recommend using a generator or preset palette for your whole color scheme... they could help you find a great primary/base color to start with.

For my primary color, I have landed on this shade of green:

Why?

First, it fits my desired natural/calm personality.

Second, it has enough contrast against a white background for text elements. This will make adding it to the UI far easier in the future. Again, there are no right or wrong answers here, but try and choose a color that hits these two criteria.

Once you have chosen your primary color, you will need to define some more shades. For this, you can follow the exact process we ran through to choose our grays. For my green color, that looks like this:

Note: darker shades often need more saturation, whilst lighter shades often need a little less.

Say, in an alternate universe I had decided to use the beach umbrella emoji for my product image, I may have ended up with some colors like this:

If I had chosen the candy/sweets as my product, I may have ended up with something like this:

Applying the primary/base color

Awesome. We now have each have a unique primary/base color + shades to apply to our product card. Although we have 5 exciting shades to choose from, we only need to apply touches of color. Remember, our grays can do most of the work.

To get started, place your primary/base color shades into your CSS in the same way as your grays:

:root {
  --green-100: hsl(152, 100%, 8%);
  --green-200: hsl(152, 100%, 16%);
  --green-300: hsl(152, 100%, 25%);
  --green-400: hsl(152, 50%, 50%);
  --green-500: hsl(152, 50%, 96%);
}

A great way to get started applying your primary/base color is to add it to a button. In our case, the “Buy now” button is perfect. It is the main action we want to highlight for the card, and adding a splash of color will help it stand out.

Let's set the buttons' background to our middle shade and its text color to the lightest shade. This is a handy little tip I use a lot. A lighter shade of a color sat on top of a darker shade will often look a lot more natural than pure white:

.card__btn {
  background: var(--green-300);
  color: var(--green-500);
}

Looking good! Next up let's set our product image background to our lightest shade:

.card__img-wrapper {
  background: var(--green-500);
}

Finally, let's set our little meta-info dot to our second-to-lightest shade:

.card__meta:before {
  background: var(--green-400);
}

Here's a Codepen showing my product card after making these changes:

Through using a few splashes of color, we have added a ton of personality to our product card.

Don't worry if you aren't 100% happy with your first try here. This stuff takes practice. If you get stuck, try a different product emoji and experiment with some different colors!

Tinted grays

A great tip for making the colors in your UI feel more coherent, is to add a hint of your primary/base color to your grays. You will want to keep this subtle. Darker shades can take more of a tint than lighter shades.

For my color choices, that looks something like this:

My “gray” custom properties now look like this:

:root {
  --gray-100: hsl(152, 45%, 10%);
  --gray-200: hsl(152, 25%, 25%);
  --gray-300: hsl(152, 10%, 40%);
  --gray-400: hsl(152, 10%, 83%);
  --gray-500: hsl(152, 10%, 96%);
}

Pssst... Remember to re-check your color contrast after adjusting your grays! You may need to tweak the lightness value of some of your colors after introducing a tint.

Here is a CodePen showing my product card UI with these shades applied:

Not bad, eh! It's a small change, but it's worth making.

Expanding your palette

At this point, our product card is almost complete. We have achieved a lot with only 5 shades of a primary/base color, and 5 shades of gray. For our small design, this is almost enough. For larger projects, you are likely going to need more.

Combining colors and building color palettes deserves an entire post all to itself. For our basic design, though, let's explore a simple way to add 1 more color to our UI...

Remember the color wheel from earlier? This is going to be our new best friend when it comes to finding colors that work together.

By starting at our base color hue, and rotating 180 degrees, we will reach our base's complimentary hue. You can pretty much guarantee that this hue and your primary/base hue will work great together!

Here's a visualization:

For me, the complementary hue is a maroon color. For you, it could be anything! To achieve this in CSS, just add 180 to your primary/base hue value.

Note, in CSS hsl(), numbers above 360 will simply “wrap” back around to 0, so don't worry about doing any fancy calculation. Adding 180 to your base hue is all you need.

Boom! That's it. From here, you can follow the same pattern we used before to create 5 shades. For me, that looks like this:

Once you have defined your shades, you can add them as custom properties and apply them how you wish. For me, I am going to use my new complementary shades to add some color to the “like” button:

.card__heart {
  color: var(--maroon-300);
  fill: var(--maroon-500);
}

That's it. We're done!

Your product card should look similar to mine, but with a totally different color scheme and product.

Wrapping up

That's all folks. I hope you learned some useful new things about color from this tutorial. I hope you managed to make a cool product card, too. Whilst the example we created is simple, the techniques applied here will see you through much larger projects.

If you like, please share any CodePens / examples you make. I'd love to see them!

Enjoyed this tutorial? Follow me on Twitter @georgedoescode for more front-end/creative coding content 🎨

This tutorial took around 12 hours to put together, all in. If you would like to support my work you can buy me a coffee

CodePen - BauBuds - Generative Bauhaus inspired Characters

George Francis — Wed, 17 Feb 2021 18:17:43 +0000

BauBuds are generative Bauhaus inspired characters for an upcoming project... keep an eye out for them in the future! 👀

CodePen - Generative “Embroidery Ring” Style Hills

George Francis — Tue, 16 Feb 2021 14:08:58 +0000

A lil' generative sketch inspired by embroidery rings. Inspired by the Sussex downs!

Create a generative landing page & WebGL powered background animation

George Francis — Mon, 08 Feb 2021 11:25:51 +0000

Recently I took a trip to the faraway land of dribbble and saw something magical. There were fuzzy orbs and beautiful, glass-like interfaces floating around everywhere. Serene!

This got me thinking. Wouldn't it be cool to create a generative landing page in this style?

The end result

First of all, here's a kind of visual TL;DR.

You can check out a full-page example here, too.

The color palette is random within constraints. The colorful orbs move with a mind of their own. These elements of randomness are what make our landing page generative.

If generative art/design is new to you, here is an excellent primer from Ali Spittel & James Reichard.

Like what you see? Let's build!

Prerequisites

To get the most out of this tutorial you will need to be comfortable writing HTML, CSS, and JavaScript.

If you have read “WebGL” and fallen into a state of shader-induced panic, don't worry. We will be using PixiJS to abstract away the scary stuff. This tutorial will serve as a nice introduction to Pixi if you haven't used it before, too.

Creating the background animation

The first thing we are going to build is the orbs. To create them, we are going to need some libraries/packages. Let's get the boring stuff out of the way first and add them to the project.

Package overview

Here's a quick summary of the libraries/packages we will be using.

PixiJS - A powerful graphics library built on WebGL, we will use it to render our orbs.
KawaseBlurFilter - A PixiJS filter plugin for ultra smooth blurs.
SimplexNoise - Used to generate a stream of self-similar random numbers. More on this shortly.
hsl-to-hex - A tiny JS utility for converting HSL colors to HEX.
debounce - A JavaScript debounce function.

Package installation

If you are following along on CodePen, add the following imports to your JavaScript file and you are good to go:



import * as PIXI from "https://cdn.skypack.dev/pixi.js";
import { KawaseBlurFilter } from "https://cdn.skypack.dev/@pixi/filter-kawase-blur";
import SimplexNoise from "https://cdn.skypack.dev/simplex-noise";
import hsl from "https://cdn.skypack.dev/hsl-to-hex";
import debounce from "https://cdn.skypack.dev/debounce";

If you are hanging out in your own environment, you can install the required packages with:



npm i pixi.js @pixi/filter-kawase-blur simplex-noise hsl-to-hex debounce

You can then import them like so:



import * as PIXI from "pixi.js";
import { KawaseBlurFilter } from "@pixi/filter-kawase-blur";
import SimplexNoise from "simplex-noise";
import hsl from "hsl-to-hex";
import debounce from "debounce";

Note: Outside of CodePen you will need a build tool such as Webpack or Parcel to handle these imports.

A blank (Pixi) canvas

Awesome, we now have everything we need to get started. Let's kick things off by adding a <canvas> element to our HTML:



<canvas class="orb-canvas"></canvas>

Next, we can create a new Pixi instance with the canvas element as it's “view” (where Pixi will render). We will call our instance app:



// Create PixiJS app
const app = new PIXI.Application({
  // render to <canvas class="orb-canvas"></canvas>
  view: document.querySelector(".orb-canvas"),
  // auto adjust size to fit the current window
  resizeTo: window,
  // transparent background, we will be creating a gradient background later using CSS
  transparent: true
});

If you inspect the DOM and resize the browser, you should see the canvas element resize to fit the window. Magic!

Some helpful utilities

Before going any further, we should add some utility functions to our JavaScript.



// return a random number within a range
function random(min, max) {
  return Math.random() * (max - min) + min;
}

// map a number from 1 range to another
function map(n, start1, end1, start2, end2) {
  return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
}

If you have followed any of my tutorials before, you might be familiar with these already. I'm a little obsessed...

random will return a random number within a limited range. For example, “Give me a random number between 5 and 10”.

map takes a number from one range and maps it to another. For example, if a number (0.5) usually exists in a range between 0 - 1 and we map it to a range of 0 - 100, the number becomes 50.

I encourage experimenting with these two utilities a little if they are new to you. They will be useful companions in your generative journey! Pasting them into the console and experimenting with the output is a great place to start.

Creating the Orb class

Now, we should have everything we need to create our orb animation. To start, let's create an Orb class:



// Orb class
class Orb {
  // Pixi takes hex colors as hexidecimal literals (0x rather than a string with '#')
  constructor(fill = 0x000000) {
    // bounds = the area an orb is "allowed" to move within
    this.bounds = this.setBounds();
    // initialise the orb's { x, y } values to a random point within it's bounds
    this.x = random(this.bounds["x"].min, this.bounds["x"].max);
    this.y = random(this.bounds["y"].min, this.bounds["y"].max);

    // how large the orb is vs it's original radius (this will modulate over time)
    this.scale = 1;

    // what color is the orb?
    this.fill = fill;

    // the original radius of the orb, set relative to window height
    this.radius = random(window.innerHeight / 6, window.innerHeight / 3);

    // starting points in "time" for the noise/self similar random values
    this.xOff = random(0, 1000);
    this.yOff = random(0, 1000);
    // how quickly the noise/self similar random values step through time
    this.inc = 0.002;

    // PIXI.Graphics is used to draw 2d primitives (in this case a circle) to the canvas
    this.graphics = new PIXI.Graphics();
    this.graphics.alpha = 0.825;

    // 250ms after the last window resize event, recalculate orb positions.
    window.addEventListener(
      "resize",
      debounce(() => {
        this.bounds = this.setBounds();
      }, 250)
    );
  }
}

Our Orb is a simple circle that exists in a 2d space.

It has an x and a y value, a radius, a fill color, a scale value (how large it is vs its original radius) and a set of bounds. Its bounds define the area it can move around in, like a set of virtual walls. This will stop the orbs from getting too close to our text.

You may notice the use of a non-existent setBounds function in the snippet above. This function will define the virtual constraints our orbs exist within. Let's add it to the Orb class:



setBounds() {
  // how far from the { x, y } origin can each orb move
  const maxDist =
      window.innerWidth < 1000 ? window.innerWidth / 3 : window.innerWidth / 5;
  // the { x, y } origin for each orb (the bottom right of the screen)
  const originX = window.innerWidth / 1.25;
  const originY =
      window.innerWidth < 1000
      ? window.innerHeight
      : window.innerHeight / 1.375;

  // allow each orb to move x distance away from it's { x, y }origin
  return {
      x: {
      min: originX - maxDist,
      max: originX + maxDist
      },
      y: {
      min: originY - maxDist,
      max: originY + maxDist
      }
  };
}

OK, great. This is coming together! Next up, we should add an update and a render function to our Orb class. Both of these functions will run on each animation frame. More on this in a moment.

The update function will define how the orb's position and size should change over time. The render function will define how the orb should display itself on-screen.

First, here is the update function:



update() {
  // self similar "psuedo-random" or noise values at a given point in "time"
  const xNoise = simplex.noise2D(this.xOff, this.xOff);
  const yNoise = simplex.noise2D(this.yOff, this.yOff);
  const scaleNoise = simplex.noise2D(this.xOff, this.yOff);

  // map the xNoise/yNoise values (between -1 and 1) to a point within the orb's bounds
  this.x = map(xNoise, -1, 1, this.bounds["x"].min, this.bounds["x"].max);
  this.y = map(yNoise, -1, 1, this.bounds["y"].min, this.bounds["y"].max);
  // map scaleNoise (between -1 and 1) to a scale value somewhere between half of the orb's original size, and 100% of it's original size
  this.scale = map(scaleNoise, -1, 1, 0.5, 1);

  // step through "time"
  this.xOff += this.inc;
  this.yOff += this.inc;
}

In order for this function to run, we must also define simplex. To do so, add the following snippet anywhere before the Orb class definition:



// Create a new simplex noise instance
const simplex = new SimplexNoise();

There's a lot of “noise” talk going on here. I realize that for some folks this will be an unfamiliar concept.

I won't be going deep on noise in this tutorial, but I would recommend this video by Daniel Shiffman as a primer. If you are new to the concept of noise - pause this article, check out the video, and pop back!

In a nutshell, though, noise is a great way of generating _ self-similar_ random numbers. These numbers are amazing for animation, as they create smooth yet unpredictable movement.

Here's an image from The Nature of Code showing the difference between traditional random (e.g. Math.random() and noisy random values:

The update function here uses noise to modulate the orb's x, y, and scale properties over time. We pick out noise values based on our xOff and yOff positions. We then use map to scale the values (always between -1 and 1) to new ranges.

The result of this? The orb will always drift within its bounds. Its size is random within constraints. The orb's behavior is unpredictable. There are no keyframes or fixed values here.

This is all well and good, but we still can't see anything! Let's fix that by adding the render function to our Orb class:



render() {
  // update the PIXI.Graphics position and scale values
  this.graphics.x = this.x;
  this.graphics.y = this.y;
  this.graphics.scale.set(this.scale);

  // clear anything currently drawn to graphics
  this.graphics.clear();

  // tell graphics to fill any shapes drawn after this with the orb's fill color
  this.graphics.beginFill(this.fill);
  // draw a circle at { 0, 0 } with it's size set by this.radius
  this.graphics.drawCircle(0, 0, this.radius);
  // let graphics know we won't be filling in any more shapes
  this.graphics.endFill();
}

render will draw a new circle to our canvas each frame.

You may notice that the circle's x and y values are both 0. This is because we are moving the graphics element itself, rather than the circle within it.

Why is this?

Imagine that you wanted to expand on this project, and render a more complex orb. Your new orb is now comprised of > 100 circles. It is simpler to move the entire graphics instance than to move every element within it. This may give you some performance gains, too.

Creating some orbs!

It's time to put our Orb class to good use. Let's create 10 brand new orb instances, and pop them into an orbs array:



// Create orbs
const orbs = [];

for (let i = 0; i < 10; i++) {
  // each orb will be black, just for now
  const orb = new Orb(0x000000);
  app.stage.addChild(orb.graphics);

  orbs.push(orb);
}

We are calling app.stage.addChild to add each graphics instance to our canvas. This is akin to calling document.appendChild() on a DOM element.

Animation! Or, no animation?

Now that we have 10 new orbs, we can start to animate them. Let's not assume everyone wants a moving background, though.

When you are building this kind of page, it is crucial to respect the user's preferences. In our case, if the user has prefers-reduced-motion set, we will render a static background.

Here's how we can set up a Pixi animation loop that will respect the user's preferences:



// Animate!
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  app.ticker.add(() => {
    // update and render each orb, each frame. app.ticker attempts to run at 60fps
    orbs.forEach((orb) => {
      orb.update();
      orb.render();
    });
  });
} else {
  // perform one update and render per orb, do not animate
  orbs.forEach((orb) => {
    orb.update();
    orb.render();
  });
}

When we call app.ticker.add(function), we tell Pixi to repeat that function at around 60 frames per second. In our case, if the user prefers reduced motion, we only run update and render our orbs once.

Once you have added the above snippet, you should see something like this in the browser:

Hooray! Movement! Believe it or not, we are almost there.

Adding the blur

Our orbs are looking a little... harsh right now. Let's fix that by adding a blur filter to our Pixi canvas. This is actually very simple and will make a huge difference to our visual output.

Pop this line below your app definition:



app.stage.filters = [new KawaseBlurFilter(30, 10, true)];

Now, if you check out the browser you should see some much softer orbs!

Looking great. Let's add some color.

A Generative color palette using HSL

To introduce some color to our project, we are going to create a ColorPalette class. This class will define a set of colors we can use to fill in our orbs but also style the wider page.

I always use HSL when working with color. It's more intuitive than hex and lends itself rather well to generative work. Here's how:



class ColorPalette {
  constructor() {
    this.setColors();
    this.setCustomProperties();
  }

  setColors() {
    // pick a random hue somewhere between 220 and 360
    this.hue = ~~random(220, 360);
    this.complimentaryHue1 = this.hue + 30;
    this.complimentaryHue2 = this.hue + 60;
    // define a fixed saturation and lightness
    this.saturation = 95;
    this.lightness = 50;

    // define a base color
    this.baseColor = hsl(this.hue, this.saturation, this.lightness);
    // define a complimentary color, 30 degress away from the base
    this.complimentaryColor1 = hsl(
      this.complimentaryHue1,
      this.saturation,
      this.lightness
    );
    // define a second complimentary color, 60 degrees away from the base
    this.complimentaryColor2 = hsl(
      this.complimentaryHue2,
      this.saturation,
      this.lightness
    );

    // store the color choices in an array so that a random one can be picked later
    this.colorChoices = [
      this.baseColor,
      this.complimentaryColor1,
      this.complimentaryColor2
    ];
  }

  randomColor() {
    // pick a random color
    return this.colorChoices[~~random(0, this.colorChoices.length)].replace(
      "#",
      "0x"
    );
  }

  setCustomProperties() {
    // set CSS custom properties so that the colors defined here can be used throughout the UI
    document.documentElement.style.setProperty("--hue", this.hue);
    document.documentElement.style.setProperty(
      "--hue-complimentary1",
      this.complimentaryHue1
    );
    document.documentElement.style.setProperty(
      "--hue-complimentary2",
      this.complimentaryHue2
    );
  }
}

We are picking 3 main colors. A random base color, and two complimentary. We pick our complementary colors by rotating the hue 30 and 60 degrees from the base.

We then set the 3 hues as custom properties in the DOM and define a randomColor function. randomColor returns a random Pixi-compatible HSL color each time it is run. We will use this for our orbs.

Let's define a ColorPalette instance before we create our orbs:



const colorPalette = new ColorPalette();

We can then give each orb a random fill on creation:



const orb = new Orb(colorPalette.randomColor());

If you check the browser, you should now see some color!

If you inspect the root html element in the DOM, you should also see some custom properties have been set. We are now ready to add some markup and styles for the page.

Building the rest of the page

Awesome! So our animation is complete. It looks great and is running real fast thanks to Pixi. Now we need to build the rest of the landing page.

Adding the markup

First of all, let's add some markup to our HTML file:



<!-- Overlay -->
<div class="overlay">
  <!-- Overlay inner wrapper -->
  <div class="overlay__inner">
    <!-- Title -->
    <h1 class="overlay__title">
      Hey, would you like to learn how to create a
      <span class="text-gradient">generative</span> UI just like this?
    </h1>
    <!-- Description -->
    <p class="overlay__description">
      In this tutorial we will be creating a generative “orb” animation using pixi.js, picking some lovely random colors, and pulling it all together in a nice frosty UI.
      <strong>We're gonna talk accessibility, too.</strong>
    </p>
    <!-- Buttons -->
    <div class="overlay__btns">
      <button class="overlay__btn overlay__btn--transparent">
        Tutorial out Feb 2, 2021
      </button>
      <button class="overlay__btn overlay__btn--colors">
        <span>Randomise Colors</span>
        <span class="overlay__btn-emoji">🎨</span>
      </button>
    </div>
  </div>
</div>

There's nothing too crazy going on here, so I won't dig in too much. Let's move onto our CSS:

Adding the CSS



:root {
  --dark-color: hsl(var(--hue), 100%, 9%);
  --light-color: hsl(var(--hue), 95%, 98%);
  --base: hsl(var(--hue), 95%, 50%);
  --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);

  --font-family: "Poppins", system-ui;

  --bg-gradient: linear-gradient(
    to bottom,
    hsl(var(--hue), 95%, 99%),
    hsl(var(--hue), 95%, 84%)
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  max-width: 1920px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  font-family: var(--font-family);
  color: var(--dark-color);
  background: var(--bg-gradient);
}

.orb-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

strong {
  font-weight: 600;
}

.overlay {
  width: 100%;
  max-width: 1140px;
  max-height: 640px;
  padding: 8rem 6rem;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.375);
  box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.125);
}

.overlay__inner {
  max-width: 36rem;
}

.overlay__title {
  font-size: 1.875rem;
  line-height: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.text-gradient {
  background-image: linear-gradient(
    45deg,
    var(--base) 25%,
    var(--complimentary2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.overlay__description {
  font-size: 1rem;
  line-height: 1.75rem;
  margin-bottom: 3rem;
}

.overlay__btns {
  width: 100%;
  max-width: 30rem;
  display: flex;
}

.overlay__btn {
  width: 50%;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-color);
  background: var(--dark-color);
  border: none;
  border-radius: 0.5rem;
  cursor: not-allowed;
  transition: transform 150ms ease;
  outline-color: hsl(var(--hue), 95%, 50%);
}

.overlay__btn--colors:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.overlay__btn--transparent {
  background: transparent;
  color: var(--dark-color);
  border: 2px solid var(--dark-color);
  border-width: 2px;
  margin-right: 0.75rem;
  outline: none;
}

.overlay__btn-emoji {
  margin-left: 0.375rem;
}

@media only screen and (max-width: 1140px) {
  .overlay {
    padding: 8rem 4rem;
  }
}

@media only screen and (max-width: 840px) {
  body {
    padding: 1.5rem;
  }

  .overlay {
    padding: 4rem;
    height: auto;
  }

  .overlay__title {
    font-size: 1.25rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
  }

  .overlay__description {
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (max-width: 600px) {
  .overlay {
    padding: 1.5rem;
  }

  .overlay__btns {
    flex-wrap: wrap;
  }

  .overlay__btn {
    width: 100%;
    font-size: 0.75rem;
    margin-right: 0;
  }

  .overlay__btn:first-child {
    margin-bottom: 1rem;
  }
}

The key part of this stylesheet is defining the custom properties in :root. These custom properties make use of the values we set with our ColorPalette class.

Using the 3 hue custom properties defined already, we create the following:

--dark-color - To use for all our text and primary button styles, this is almost black with a hint of our base hue. This helps make our color palette feel coherent.
--light-color - To use in place of pure white. This is much the same as the dark color, almost white with a hint of our base hue.
--complimentary1 - Our first complimentary color, formatted to CSS friendly HSL.
--complimentary2 - Our second complementary color, formatted to CSS friendly HSL.
--bg-gradient - A subtle linear gradient based on our base hue. We use this for the page background.

We then apply these values throughout our UI. For button styles, outline colors, even a gradient text effect.

A note on accessibility

In this tutorial, we are almost setting our colors and letting them run free. In this case, we should be ok given the design choices we have made. In production, though, always make sure you meet at least WCAG 2.0 color contrast guidelines.

Randomising the colors in real-time

Our UI and background animation are now complete. It's looking great, and you will see a new color palette/orb animation each time you refresh the page.

It would be good if we could randomize the colors without refreshing, though. Luckily, thanks to our custom properties/color palette setup, this is simple.

Add this small snippet to your JavaScript:



document
  .querySelector(".overlay__btn--colors")
  .addEventListener("click", () => {
    colorPalette.setColors();
    colorPalette.setCustomProperties();

    orbs.forEach((orb) => {
      orb.fill = colorPalette.randomColor();
    });
  });

With this snippet, we are listening for a click event on our primary button. On click, we generate a new set of colors, update the CSS custom properties, and set each orb's fill to a new value.

As CSS custom properties are reactive, our entire UI will update in real-time. Powerful stuff.

That's all folks

Hooray, we made it! I hope you had fun and learned something from this tutorial.

Random color palettes may be a tad experimental for most applications, but there's a lot to take away here. Introducing an element of chance could be a great addition to your design process.

You can never go wrong with a generative animation, either.

Follow on on Twitter @georgedoescode for more creative coding/front-end development content.

This article and demo took around 12 hours to create. If you would like to support my work you can buy me a ☕ ❤️