Chris gets to chat with George Francis, an incredible digital artist in the generative art space as well as educator and all-around developer. George has been all over the place lately, producing really outstanding work (CSS-Tricks uses a Houdini paint worklet from George in the header and footer). Not only does George make art that has that little special something that turns heads, he helps you do it too by sharing all the tools and techniques he uses in blog posts.
- 00:28 Guest introduction
- 01:35 Do you like the term Generative Code?
- 03:27 Limiting the randomness
- 06:04 How do I random blob?
- 10:52 Sponsor: Netlify
- 12:22 Which blobs get popular on CodePen
- 16:00 Working with Houdini
- 23:08 What goals do you have with your work?
- 26:49 NFTs and generative code
- 29:46 Tell us about your day job
Netlify has used the slogan “Static without limits” — which I really like. It’s useful to think of Netlify as a static file host as the foundation. That’s what Jamstack is, after all. But it doesn’t mean that you are limited in what you can build. You can make a site that is every bit dynamic as any other architecture out there, and Netlify not only encourages it but will help you do it with features like hosted cloud functions.
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. Welcome to another CodePen Radio, #340. I have a special guest again, a special guest from the community, the wider world of developers and artists, really. I'd call George an artist first. I have George Francis here with me. How ya doin', George?
George Francis: Hey. Yeah, I'm doing very well. Thank you. Thanks for having me on.
Chris: Yeah, my pleasure. You call yourself a developer, writer, and generative artist. I think of you as one of those devs that are just firing all cylinders right now. Really, everywhere you look, you find George. You are @georgedoescode on Twitter, CodePen, Instagram, and everything. You got the same handle thing going on. Well done.
George: Yep. Unique handle. Yeah. [Laughter] No one else had it. Who'd have thought?
Chris: Yeah. Nailed it. Georgedoescode, that's you. If you haven't seen George, I'd be surprised because you've been everywhere lately, really hitting this like kind of SVG, but not just SVG, you know, Houdini and all things generative, and having like a heaping spoonful of taste while you do. Anybody can make random things on a screen, but can you make them look beautiful too? That's kind of been what you've been (at least from my perspective) into lately. Do you mind getting into some of that stuff?
George: Yeah. Like what I've been working on lately?
Chris: Yeah, sure, or just generative code in general. Is that word fair? It seems like you use it a lot. Do you like the word generative? I do.
George: I do. I do like the word generative. Yeah. I think a lot of what I do falls under that umbrella of generative art and design. All generative really means is that it's any kind of design or artwork that is created with an extra little sprinkling of autonomy on top. That could be using math.random, something in the browser to decide whether to random a square or a circle, an SVG, or a design or something like that.
George: Or it could be a dice (in really life) or whatever, really. It's just introducing this little bit of unpredictiveness, unpredictability to your work, which is really fun.
George: Yeah. Yeah. I mean you can do all kinds of interesting sources for randomness. And then you've got like pseudo-random numbers and kind of noise and things like that, that we use a lot in generative art, so random numbers that are not true and similar to the little random number friends that they exist next to. There are all kinds of interesting things.
Chris: But it's also, perhaps, part of your job then to kind of squish down how random it is, right? Because if you just said, "Give me a random number between one and a million, and I'll plot it somewhere on the page," it's too random, right? Maybe it'll render off the page, it's so random.
Chris: You'll have this really aggressive randomness to it that maybe not going where you're after. I've seen so much of your work. You must have found some particular love for blobs at some point. You've done a lot of blob work. That was your article on CSS-Tricks as well was generative blobs stuff, which is so cool.
Chris: It feels in vogue, the blob thing. Who knows why these things--
Probably, you helped fuel it because people see your stuff and then blobs get hot. Then somebody else does blobs.
Blobs, I mean, quite literally are just morphic, smooth shapes.
Chris: Like an amoeba or something. There's something attractive about them especially when they move a little bit and especially when they feel like they were generated just for you. It's hard to put your finger on it, isn't it? But really are attractive.
George: Yeah. I think you touched on something quite interesting when you said something that's generated just for you. So often -- I've been thinking about this quite a lot recently. It's like, so often when you're on the Web, you see a webpage, and kind of the design of that page and the elements that exist on it are pretty much always exactly the same. You might have dynamic data or new auth codes or whatever on a feed, but the design elements and that kind of structure of a page is often quite similar.
But with generative design and bringing randomness onto the front-end, you can give everyone that little unique experience when they hit a webpage. They have their own version of it. It's like if three people walk through a forest, you'd all see a beautiful forest, but you'd see a different version of that forest, I suppose, which I think is really nice. It just makes things feel a little bit more natural. It's a little bit of joy for people, I think.
Chris: Yeah. There certainly is a lot of joy when it comes to this stuff, if you ask me. It's so beautiful. There are other things you can do. It's the shape and the position of the blob, but also the colors.
Chris: And just some characteristics of how many points made up that original blob and things like that. And you have a knack for teaching it and showing it off in context with design sometimes and then as well as pairing it back and just showing, like, "Well, I know you're interested in the blobs, so here's the blob." You know?
Chris: Often, SVG-based, right? It's not your only tool. We can get to some of those other tools. What is some of the technology, like if somebody was like, "Okay. You've said the word random blob enough. How is it done?"
George: Sure. Yeah, so a lot of my stuff, I will use SVG for and then a lot of the time within that it's curves, it's Bezier curves, paths, shapes, and things like that. I really like SVG as a medium for generative design and art because it's responsive by nature, which is great. So, it makes adding it to a webpage super easy in comparison to maybe something like Canvas, which is not quite as fluid and flexible.
Also, it's really nice because you can look at it. You can open it up in the dev tools and be like, "Oh, I've broken it, and this is how I've broken it. There's a circle where that part of the view box or whatever, and I've got to bring it back in or whatever." Whereas with things like Canvas or (dare I say) shaders or something like that, it's much more difficult to see what's going on.
George: I like it [indiscernible].
Chris: The DOM brings some level of observability to that.
George: Yeah. Exactly. Observability. It's great for teaching. It's great for my own kind of debugging process as well. [Laughter]
Chris: Yeah. I'm attracted to it for the same reasons. I enjoy SVG. But not as talented.
I usually approach it from some generally really practical perspective like, "Oh, it's great at drawing an icon," or - I don't know - it achieves some design thing that can't be done in CSS particularly easy, like drawing a line at an angle or something that CSS kind of sucks at. The SVG is rather trivial at.
So then, I dig into SVG syntax. There's path. Path is like SVG's secret weapon, isn't it?
Chris: It can draw anything.
Chris: I believe that it's the one true syntax, as well. I think, under the hood of SVG, some of the other APIs for drawing things ultimately then express themselves as paths. Although, I don't think you'll see that in the DOM.
George: I did not know that.
Chris: And don't quote me on that. But I think, you know, if you're going to come up with a drawing API, why would you do five when you could do one and have syntactic sugar over the one true syntax.
But anyway, there's -- I forget them all -- M, which is like, "Pick up the metaphorical pen in SVG and move it to this syntax." Then there's like -- I don't even know -- L or something, which is like, "Draw a line then from where the pen currently is to there."
George: Yeah. Yeah.
Chris: L is fine, right? It draws a straight line. Maybe next year, stars will be in fashion and everybody will be drawing stars. But if you want to draw a curve, I feel like it takes a step up the ladder of complexity, and there are all these different commands then that will go from one point to another but with a curve to it. There's not just one. There's a whole bunch of them because, of course, geometric math is involved.
And then once you've drawn the shape, it's not like you can just pick up the point and move it, or can you? That's what I'm confused about. How do you randomize a blob? It seems like there's a world of math I don't understand.
George: Yes. Actually, when I'm working with paths or Bezier curves (and curves in particular), I often use this thing called a spline, which has a great name for a start and is also [laughter] really, really, useful. It's kind of like a function that takes a bunch of points, kind of just arbitrary points in a space. It just draws you a really nice, natural curve through all of those points. It can give you a closed shape back. It takes a lot of that math kind of headache away from trying to calculate paths and things.
George: That's how I do a lot of blobs. I'll say, "Oh, hey. Here are eight points, and just draw me a curve through all of these points." And then maybe sometimes just move one.
Chris: If you can, just move some points around in space and the spline will do the math of it.
Chris: Now, I do see that referenced in some of your pens here, and where you pull it from is basically NPM, but it's your library.
George: Yeah. It's kind of a library.
Chris: But you didn't just NPM install some other person's.
Chris: This is your own. Yeah, that's great.
George: Yeah. I kind of maintain a little bucket of utility functions and stuff that makes generative art and creative coding a little bit easier and a little bit more terse.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Netlify. You know one of the slogan-y things they have used in the past is "static Without Limits"? I've always liked that because it's meaningful to me because it's static hosting at its core. It's at the edge, CDN-backed, amazing static hosting.
Netlify has never been really hard on, "We're a static file host," because I think that says too much or it limits your thinking. When they say, "Static Without Limits," it means sure it's that, but you can build anything from that. It's just a foundation to work from; a really strong foundation that leads itself to atomic deploys, deploy previews, pushing from Git to get those deploy previews, and really wonderful stuff. But it's not limited to that.
It gives you a relative URL locally, so no cores issues to hit. It deploys as an AWS Lambda that can be fast running or long-running or whatever you want it to.
Then that connects to a database, gets some data. It powers your React site - or whatever it is. Amazing.
They'll process your forms for you. You can manage your team on Netlify. You can deal with who's deploying to what and do deployment jump-ahead and stuff. There's analytics in Netlify.
It's really a complete platform for Web hosting. It just so happens that the core of it, which excites me, is this edge-based static hosting, but it's without limits. Do anything from there. It's really what Jamstack means to me. Thanks for the support, Netlify.
[Guitar music ends]
Chris: So then, you've got these blobs and some of the way that you make them click. This is interesting to me at CodePen because it's interesting to see what gets like mega-popular on CodePen. It's generally some kind of combination of, I feel like people can see themselves in a pen or see their own work or it inspires some lust, for lack of a better word, like, "I wish I worked on something where I could use this because it's so beautiful."
Perhaps some beautiful blobs will do well, but it will never do as well as some beautiful blobs with some practical UI sitting on top of it. Perhaps that's a little CodePen secret is that if there's always an element of, like, "Oh, it's a modal!" You know?
Chris: "Oh, I could do that." Or if it's a newspaper design or something.
Chris: But still has some generative UI going on. You do stuff like that sometimes. Perhaps it's not just a blob sitting there, but the blob has been blurred so far that, in a way, it doesn't distract from the text on the screen. It just lays in the background.
George: Yeah. I really like that. It's stuff that's just kind of there, adding a little bit something to a UI or [indiscernible] ... design or whatever. It doesn't always have to be the main event. You can still work with typography, spacing, and everything in the same way and just have little random touches hanging out there on the edges or wherever, which is nice. It's fun. It helps you get over that thing of like, "Is this done?" I find because it's--
Chris: Tell me about that.
George: Well, I don't know about you or anyone else, but I can't finish things [laughter] a lot of the time unless I make a little bit of it random because I'll just spend forever tweaking where the shapes are or the colors of something. But I feel like sometimes when you let some of that be random, you just set it free. Then it's much easier to say, "Oh, I'm finished with this," kind of, now, and it's a really great blob.
Chris: That plays into, I was attempting to take a screenshot of some random things the other day. You run it once and you're like, "Okay, is that the screenshot?" You're like, "No, no, no. That one doesn't express the randomness quite how I want to express it."
Then you refresh it, and you're like, "No. No." Refresh.
Chris: You're like, "Uh-uh. Uh-uh." Too much clumpage in this one. Refresh.
Twenty refreshes later, you're like, "Okay, Chris. I'm going to take the screenshot now."
That's funny, but I wonder if that's related, that kind of like, "It's not done."
George: Yeah. It's very freeing. So, any perfectionists out there, just start making things a little bit random, but not too random all the time, you know. You don't want to make all your colors random and all of that.
Chris: Really, subtle randomness seems like between these three highly related colors and within this very limited area of the page and stuff goes a long way, especially if there's movement involved. It does bring me to something else, the finishness of design and the UI stuff.
SVG is certainly not your only tool. You've been doing a bunch of Houdini stuff lately, Houdini being this CSS - I don't know - package or something, more of an overall concept. It's broken into all these little bits.
One of them has shipped. I think it's in Chrome. I forget. It's complicated, what bits of Houdini is supported in what. But one of them is called Paint. It gives you this, literally a function of paint with parenthesis in it that you can use in place of, I believe, anywhere you would use an image.
George: Yeah. Exactly.
Chris: Right. But it does literally nothing.
George: Sure. Yeah. Yeah.
Chris: But then you're Canvas town. Canvas being, of course, as you've said, a very, very different world than SVG is. Are you attracted to it because of the Canvas? Why play with that when you've been so invested in SVG as well?
George: Well, there are a few things. One of them is that you can add loads of stuff to a Canvas and it doesn't care. If you want to add thousands and thousands of circles to an SVG, eventually it will start getting a bit sad and a bit tired because there's so much in the DOM that it has to....
George: Whereas Canvas, any enormous amount of stuff in there and it doesn't mind. For texture, for doing things that have a lot of elements with texture and stuff, I really love it for that. But also, just the fact that the paint API integrates so well with custom properties and things like that because it's just CSS. It can access custom properties. You can end up creating these design systems that have little generative elements or random elements that are created using paint worklets, and it all just slots together in a really fast, efficient way, and it lives in one world. It just feels really nice, I think. That's where I've been turning my attention to quite a lot.
There's also this thing of, like, everyone can create their own worklets, as we call them, paint worklets, and just throw them up on a CDN. Then anyone can import that into their CSS and use it. It feels like a really nice -- I don't know. I've always envisioned sending little packages of letters of design code up into the ether, then you pull it down, and everyone just kind of experimenting with each other's stuff. I think there's something about that which we haven't really had before, and it's hard to quite put a finger on what that is, but I think there's something really exciting about that.
Chris: Right, and especially combined with an API, like you said, and elements of generativeness.
Chris: Sometimes I look at some of the stuff people do with it and you're like, "That's really cool," but also, like, it's not--
How we would have done it in the past is like a PNG. You know?
Chris: Cool. But now that I can change the colors and it adapts to the size of the space that it's in and I can control it with custom properties. It's cool. And like you said, you publish it on these little CDNs and the things, they're always so tiny. I'm sure there are some big ones out there, but they tend to be a couple of K, at most.
George: Yeah. Yeah.
Chris: Which feels like you're not breaking any performance rules then.
It's more efficient from a panting layout point of view, which is nice - or just a painting point of view. I'm not sure. I get really confused with a lot of that stuff, but it's better. [Laughter]
Chris: It's in the good category.
Chris: It feels like Houdini finally has kind of paid off, in a way. I remember the early days; it felt like, "What is this? Is this going to matter?" Now it's finally starting to be like, "Oh, yeah. This is actually cool."
Chris: "Let's have the rest of the APIs, please."
George: Yeah. I think it's really, really, exciting.
Chris: Yeah. I think, in the early days, it was talked about more as this will be where we prototype possible new features of CSS. It was really more about the standard process and not so much about authors. I think the story has changed to be like, "No. It's about the authors, too." This is cool.
Chris: One of the, I think, sites that really knocks it out of the park is that houdini.how.
George: Oh yeah. That's great.
Chris: H-O-W TLD there. I'll put it in the show notes, but definitely check it out. You have some things on there. There are a lot of names on this list of people that have contributed these paint worklets, as you called them - or as they're generally called. They're just cool.
Chris: Then there's a demo, and it's just like, "You really can just use this."
I saw your paint fleck one on there, which I think might be my favorite on the whole list because it really truly looks like you walked into somebody is painting their living room and threw those canvas things on the floor. There are all kinds of colors.
Then your taste in the API is really strong, you know, like the density of the paint flecks and all the different color possibilities. So, I immediately grabbed that. It's pretty subtle but, on CSS-Tricks, if you're in Chrome (because I think Chrome might be the only major browser supporting the paint worklets)--
Chris: --the header and the footer are literally using George's paint flecks, but pretty chill. It's not as fun as the examples you might see on houdini.how.
George: It makes me very happy every time I see those on there. I'm like, "Yes!" [Laughter] Houdini in the wild. It's good.
Chris: It really is. It opens up some really fun doors. And as cool of work as you've done and how easy it is to use and these websites like houdini.how, still, I would put in the highly underused category on the Web, you know.
George: Yeah. I guess it's just so new, and there's not that much about them around.
Chris: I think, as we go, we're going to see more and more of them. They're just really cool. They just make the Web less square. [Laughter]
George: I mean it's cool. I mean, quite literally sometimes, you could do all kinds of--
I was playing around with hand-drawn shapes thing earlier that'll let you do a square or a circle, but they all look a little bit imperfect and stuff, which is kind of nice.
Chris: Oh, nice. But you had to do that in Canvas, right? I always think of--
I'm like, "Oh, yeah. Just blast an SVG turbulence filter on it then," but no such luck in Canvas.
George: Yeah. I haven't been able to use ... [indiscernible] but it's still really good. It's nice and fast and things like that, which is cool.
Chris: Yeah. It really is. So, you've been into that and producing a lot of stuff. You of course have a CodePen account. You're posting it to Twitter. There's a lot of the code on CodePen. You have Instagram, as well. So, that's what I kind of meant in the beginning of the show when I mean firing on all cylinders. You're really invested in this and came on hot and fast onto the scene. Now your name is synonymous, I think, with generative kind of beautiful code examples like this. Has that been working out for you? Do you have a goal in mind? Are you giving workshops?
George: Yeah. I just love this thing of teaching stuff. I always think when I show someone else something, what they end up making with it is usually more interesting than what I thought of using it for in the first place, which is obviously really nice.
I love generative art. It's how I learned to code. It's why I code. The fact of seeing it start to slightly permeate real life a little bit more is really cool. I guess that's kind of what I'm trying to do with it is raise awareness that this is a cool thing that we can use and hopefully get people involved in it.
Chris: Yeah. Well, I'm sure it's happening. You have your own blog, as well. That's georgefrancis.dev. There's a blog there with all kinds of good posts on it.
There's a great one called "A Generative SVG Starter Kit," which, if you're into SVG and interested in - I don't know - how can I start to make these things move and add some generative concepts to it, it's great for that. It starts out very simply, very easy to follow. It ends with a fork, essentially, like you could use this or you could use this library, or here's another way to do it. This is how you could add controls - and things like that.
I really like that. I love controls. Again, just as a person who looks at a lot of pens on CodePen (as my vocation), when you see a pen that has a control panel of some kind--
Chris: One of them is called dat.gui, which is this ancient--
George: Oh, yeah.
Chris: Just an ancient control panel thing. You'll recognize it as soon as you see it. I bet everybody has seen it before. It's fun. I think it has some nice synchronicity to generative stuff.
Those same things that end up as Houdini, you know, custom properties, you can wire up a little control panel to control them, as well.
George: Yeah. Yeah.
Chris: It's nice. You know I'm a code guy. So, of course, I like to play in code too, but when you offer it somebody and all they have to do is use a color picker--
Chris: That's awfully nice. There's a new one called, knobs. It's kind of like a modern version of dat.gui which I'll put a link in the show notes.
George: That sounds pretty cool. I'll have to check that out. [Indiscernible]
Chris: I'll show it to you. It's pretty cool. It's being worked on, I think. It’s got a nice API that's really simple, like, "Where do you want the customer property put? What's the name of it? What kind of thing do you want? Do you want a slider? Do you want a drop-down - whatever?" That's it. The API is really small, and then all it does is push that custom property into the DOM for you, which means, in Houdini, it'll just get picked up on right away, or any other code that you write based on customer properties.
George: That is cool. It’s nice to be able to tweak. Sometimes, to get something to look good, I always say you've just got to get two inches from your screen and change things. [Laughter]
Chris: Yeah, man. And if you've designed the thing that's based on, like, "Why hard code anything [laughter] when you're in these generative things?" It's so much more fun to have control. Alrighty, one random question here. I'll throw a curveball at you.
Chris: It feels like the digital art world has been a little obsessed with the NFT thing, like, "Oh, I'm going to make this beautiful GIF," or whatever, and a lot of people jumping on the bandwagon because there's perhaps money to be made in it and a way for digital artists to make money that have traditionally really struggled with, I think.
Chris: Where is your interest level lie on that?
George: My interest? I've seen some really seriously beautiful generative art coming out of the NFT world. To be honest, I don't know that much about it. I kind of just peer in every now and then over the wall of the stuff and have a little look. I've seen some really stunning work coming out of it.
Chris: Coding train. [Laughter]
George: Yeah, a coding train. Yeah, right.
George: Yeah. Right, downshift ... [indiscernible] and everything. All of that world. It seems to really have ignited a lot of interest in that, which I think is great. I think there are other sides of it, which I'm not so sure about. I try not to comment on it too much because my head is not that in it, but I haven't ... [indiscernible] myself yet.
Chris: Yeah. Me either. I don't know anything about it. But, of course, it's interesting not because I'm trying to prospect or anything. But I'm just generally interested in technology and feel like one of these days maybe I'll attempt to mint one or something.
Although, I just heard an offhand comment the other day. Somebody said something like the DOM isn't NFT-able yet or something like that.
Chris: I was like, "What does that mean? Does that mean CSS artists are out?" But can't you just like maybe take a screenshot quick, NFT that, and call it a day?
George: I would say. I went on a real deep-dive the other day because I didn't understand what fungible meant.
Chris: I don't.
George: And I still don't ... [indiscernible].
Chris: No. I have no idea.
George: [Laughter] It's something that can't be replaced, I think, so I don't know how that goes back to the DOM, but--
Chris: Yeah. I'm sure it just is another way of saying blockchain, I guess, not that I understand that either.
That's cool. So, you're doing all this, and it feels like--
You know I talked to Cassie Evans the other day. She does so much interesting SVG stuff, beautiful, more focused on animation, perhaps, but then has a day job too. In fact, she found day job work with GreenSock, so good for her.
Chris: Found something to tie it together. You have a day job, as well. You're at ProdPad.
Chris: Tell me about that. Are you able to exercise some of this creativity at work? It seems like a pretty playful homepage, anyway.
George: Yeah. For sure. I have a real job, as well.
George: I don't just make blobs and googly-eyed things on the Internet. I do a lot of design system work and a lot of work with ... [indiscernible] component library stuff. Just regular front-end things.
We do a lot of cool stuff with web sockets and real-time data, which is obviously really cool.
George: It's good to be able to flex both muscles, as it were. Do the creative stuff but also balance some of the more classic kind of UI things, which is very nice. Yeah. It's cool.
Chris: Yeah. Nice.
Chris: All right, well, thanks so much for coming on. Thanks for having a cool blog. Everybody should follow George at georgefrancis.dev. It will hop you over to social networks and stuff. Particularly enjoy the subtle, understated custom embed theme on your embeds.
Chris: Those look good.
George: Thank you. [Laughter]
Chris: Very solid. You can change that any time. CodePen plug there. Is there anything else you want to tell people before we wrap up here?
George: Well, I kind of feel like I should say I will be launching a shop soon. [Laughter]
George: Hopefully, I will be selling real life physical nice art, prints of art, so you can keep a lookout on my Twitter or something if you like my stuff because it might drop soon. A very shameless plug, but I would be remiss if I didn't mention it.
Chris: Not at all. I can't wait. I'm sure I'll be getting stuff for myself. Are we talking like poster size here?
George: Yeah. I realized this other day. You don't do A sizes over on your side of the pond, do you?
Chris: I'm familiar with that's the size of the piece of paper, right?
George: Yeah. Right. Yeah. They're A4, mostly, at the moment. But they're getting bigger over time. They grow. [Laughter]
Chris: Oh, interesting. My previous life was in the printing industry, so I have some experience there. But I wouldn't say that if you grab somebody off the street and said, "What size is A4?" would they know what you meant?
Chris: They would. They would on your block?
George: No, they would here. I wasn't sure if you had it over in the States. Someone told me no.
George: I was like, "What?!" [Laughter]
Chris: Yeah, they would not.
George: They're going to be a little kind of smallish, like 30 by something.
Chris: Yeah. Cubical friendly. Yeah.
George: Yeah, like easily frameable. You don't have to shell out a whole bunch for a big frame.
Chris: Sure. Also meaning, "Buy ten." You know?
George: Also, buy ten.
Chris: Yeah. [Laughter]
George: You can buy loads. Any amount, really, you can just buy. [Laughter]
Chris: [Laughter] Yeah. Like the Web, are unlimited. Alright, well, thank you so much, George, for coming on the show. Good luck with everything. I wish you the best.
George: Thanks for having me on. Cheers.
[Radio channel adjustment]