Canvas Cards is a gallery of card designs created with javasript canvas. Updated weekly, each card includes an editable code block so feel free to tweak and make your own designs! Created by Luke Patton and hosted by Glitch.
The cards are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. You can freely use any of the code and images here, even to print your own custom decks but please don't sell them!
A few more experiments with 2D arrays, this time with flexible sizes. We can use some simple variables and loops to put a set of randomly sized pills in our rows. Use the Update Preview button to draw a new card!
This card was inspired by a CodePen I saw, @jiangyijie27's infinite circle animation. We use the hard-light blending mode to create some fun duo tones by drawing one of our rectangles on top of the circle. Use the Update Preview button to draw a new card!
I picked up a book of constellations in a museum gift store this week and was immediately drawn to how they had realized the celestial sphere. I took it as a challenge to create my own night sky of stars, see if you can make any constellations of your own. Use the Update Preview button to draw a new card!
This week I went to the Plotter People meetup in NYC for generative art and drawing robots. What a blast, and I got to read part of a book about sewing mathematical patterns. So what we have here is a circle of equal chords, where each point is connected to a point 11 or 15 places away. Change up the values yourself to see different circles!
If you wrap the golden ratio around a circle, the angle of the smaller section is called the golden angle. It's about 137° and turns out it's very cool. It's often studied in plants and the theory of phyllotaxis, that leaves segment themselves according to this angle. Here we're using the golden angle and some clever colors to create a perfect spiral.
I was sick this week so we're reaching into the drafts folder a bit for a simple excercise that has some pleasing results. Linear interpolation allows us to make a perfect grid relateively easily and cycle through it with random colors. Use the Update Preview button to draw a new card!
One of the most confusing parts of canvas I've learned so far is the global composite operation. It's like blending modes in photoshop, and there's a ton of nuanced ways to use them. Here we're punching circular holes in a grey rectangle to reveal a gradient behind it. Also featuring linear interpolation for positioning our circles.
Welcome to summer everyone! I feel like I know almost nothing about canvas filters, but they seem quite powerful and are gaining support rapidly. Here we're just stacking slightly blurrier and more transparent circles to create our effect.
Did you know that the interior angles of any given polygon add up
to 180 * (n-2) where n is the number of sides? That's
something that I learned this week when thinking about hexagons.
Use the Update Preview button to draw a new card!
Ok you'll have to trust me on this one that I was experimenting with something much more complex, but I ended up just being struck with the aesthetics of this simple idea. We'll explore some new tricks soon but for now I'm just enjoying this.
Won't you be my neighbor? This is probably the most complicated card to date, we're drawing lines between neighboring points in 2D arrays. I made sure to leave lots of comments detailing how each function works. Use the Update Preview button to draw a new card!
No fancy to this one, I was just refining how to make grids and took the opportunity to make something pretty. We are using some `globalCompositeOperation` stuff to get a nice overlay effect. Use the Update Preview button to draw a new card.
I saw @RavenKwok's work with K-D trees on Twitter recently and was mesmerized. I don't know enough yet to create my own trees, but I was able to create a similar effect with some simple rectangles. A good experiment for achieving a look in as few lines as possible. Use the Update Preview button to draw a new card!
I'm back from the museums and back to reading MDN documentation. This is a fairly simple idea that I think get a lot of benefit from good color choices. The most advanced thing we're doing is using gradients to turn our rectangles into star trails. Use the Update Preview button to draw a new card!
The exhibition was so striking that I couldn't just choose one piece. In the SUW/UW Series, Hilma was very interested in reflections, duality and other symbols. We've replicated that in code by drawing our own equalaterial triangles and using overlay blending modes to save some lines of code.
I finally got to visit the Hilma af Klint exhibit at the Guggenheim, and loved her later geometric work. My reproduction isn't nearly as hypnotizing to look at, but a simple and fun exercise.
In the spirit of old Windows screensavers and circuit boards, lets draw some lines. Using some tricky double strokes, we can create an overlapping, but never touching effect. Use the Update Preview button to draw a new card!
Like the stripes they're named after, this card has a sort of slippery, hypnotic effect. Drawing the line groups on a grid is a little tricky, and I feel like I could have done it smoother. Use the Update Preview button to draw a new card!
Math is kinda hard, and so are string literals. I wanted to experiment with mathematically creating colors and color gradients. The results are some very pretty stepping stones, which I thought looked best in a circle.
I wanted to experiment with clipping masks in canvas, and it ended up looking like really big pixels. Reminiscent of leaning in to an old iMac, I decided to lean in to the RGB aesthetic. Use the Update Preview button to draw a new card!
A jump in complexity here. This sketch utilizes a lot of nested loops to iterate deep into some squares. Whenever we draw a square, we make a decision to subdivide it and draw more, and again a second time. This way we get a drill-down, spiraling sort of look. Use the Update Preview button to draw a new card!
No cool story here, just some fun shapes. The interesting stuff we're doing here is probably the helper functions that pick a random item from an array and pick a random whole number from a range. We'll be using these a lot in later cards I imagine. Use the Update Preview button to draw a new card!
Science is the new Rock and Roll. Inspired by a screenshot of the Nowhere Men comic that a coworker had lying around. The only tricky thing here is drawing half an ellipse to cover the front of our sphere and create the halo effect.
Charlie Brown confirmed wavy. This one started out a little different, without overlapping the half circle shapes. But it's kind of a cool effect when you can stack them together to make these wavy lines. Changing the step value will show more of the original idea.
I saw some branding recently that used these covers overlaid to make the letter K. It was pretty cool so I adapted some of the shapes here for something more abstract. We do manually place each trapezoid and it has a rigid width, so lots of room for improvement here.
A geometric pattern inspired by old art deco buildings around New York City. Created by drawing concentric lines and shapes with simple step intervals.
I named this one Vertigo before going and looking at the poster again, but I like the rectangle theme. Start with a small rectangle in the center, increasing it's size, rotation and distance to the next rectangle with each step.
Victor Vasarely was a Hungarian-French artist frequently credited as the grandfather of Op Art, an abstract style that gives the viewer impressions of movement, hidden images, warping, vibrating patterns and more.
Our code is little more complex here, we've created a function that will return an array to us, each item is an object coordinates and a boolean value for rotation. We use this information to move our origin point to where we need to draw each square. This makes it easier to rotate our chosen squares since canvas rotations happen from the origin point.