cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

January 2nd: Happy Curvy Globby Fireworky New Year!

Gooey Overlay

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.

Elastic Border

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.

GloppyGoop

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.

Owlypixel

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.

WebGL Fireworks

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.

How to code fireworks with ES2015 JavaScript and pixi.js

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.

Slice Slider

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.

Goodbye 2016

It's great that Eli Fitch named it "Trash" instead of "Recycle Bin", because a lot of people agree that's where 2016 belongs.

Practical SVG

Chris' book on SVG is your guide to understanding and taking advantage of SVG as a front end developer.

Wanna Sponsor The Spark?

"Creative without strategy is called 'art'. Creative with strategy is called 'advertising'." — Jef I. Richards.

January Meetups

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