January 2nd: Happy Curvy Globby Fireworky New Year!
Straight lines are certainly easier to draw on the web than curved ones. But 2017 is starting off with some gooey globby demos proving that curves are in. Yoichi Kobayashi created this one, in which the SVG curves are created programmatically in ES6 and animated with easing.
Interactive curves, this time, in a Pen by Waaark, a French creative web studio. Drag your mouse across the border, and its like your cursor tugs at the line, pulling it along a bit. Play with the controls to mess with the physics.
More curvy blobs the gloppily glop into each other, following your cursor, this time by Tiffany Rayside who colorizes them with some lovely kinda 80's gradients.
Flow Technique Deconstruction
Martijn Brekelmans digs into an incredible heart animation by Terebus Volodymyr. He writes: "I immediately wanted to know how it worked, but the code was hard to read. Instead of leaving it at that, I annotated the whole thing so I could completely understand every single line of code."
Making of a Circle
Is a circle actually just a square with another square set along each edge, infinitely? Bali Balo finds out, this week on Mend Bending Pens from Outer Space.
We were going to link to this really cute Owl Generator from Owlypixel, but really, you should just follow Owlypixel as they've created lots of fun little demos demonstrating useful concepts.
Happy NYE 2017
Mark Tarnashinski uses mo.js to welcome us to 2017 with a line animation and fireworks. Particularly nice is how the numbers draw themselves with colorized leads.
Matei Copot has been playing with WebGL, which is perfect when you want to see hundreds of beautiful little fireworks painting the night sky with rainbow glory.
Speaking of WebGL and fireworks, if you're interested in learning about how it's done, Rachel Smith explains how it can be done, step by step, in a tutorial using Pixi.js.
Drum Loops and Effects with Web Audio API
Johan Karlsson demonstrates how you can load up an audio clip and play/repeat it. But then, get weird with it creating overlaps, speed changes, echoes and more.
Stephen Scaff's slider changes slides with a multi-stage animation. The text clips away beneath the baseline, the image grays out as it scales away, is replaced by a new image, which springs forward while colorizing.
It's great that Eli Fitch named it "Trash" instead of "Recycle Bin", because a lot of people agree that's where 2016 belongs.Sponsored:
Chris' book on SVG is your guide to understanding and taking advantage of SVG as a front end developer.Sponsored:
Wanna Sponsor The Spark?
"Creative without strategy is called 'art'. Creative with strategy is called 'advertising'." — Jef I. Richards.
Talk frontend and meet some new Pen Pals at Meetups around the world! RSVP for January events in Orlando, Amsterdam, Barcelona, Pittsburgh, and Los Angeles