The Challenge #1: The Winner

It’s been a little over a week since I set the first challenge — to recreate this animated GIF in code — so it’s time to look at the results.

Remember, there were no real rules and scientifically-measurable correct answer to the problem — it comes down to balance of code and magic. We certainly got a bunch of fantastic solutions, so I’m going to show you the best handful.

The Short-list

Scott Kellum (blog) – border-radius/border-width

See the Pen The Challenge: Recreate this GIF in Code by Scott Kellum (@scottkellum) on CodePen.

The most popular approach seemed to be the ‘border-radius/border-width’ solution, and Scott Kellum had one of the first and still best take on that one. Creating the triangle with border mitre-edges isn’t too difficult, but getting in and out of the triangle transition in a elegant way was the hard part.

Scott’s code is very succinct and the animation is smooth. Nice.

Jeremy Karlsson (enjikaka) – SVG

See the Pen The Challenge: Recreate this GIF in Code by Jeremy Karlsson (@enjikaka) on CodePen.

As a big advocate of SVG, it was great to see an excellent SVG solution courtesy of Jeremy Karlsson. The SVG obviously changes the markup in this demo, but could be embedded as an image, object or CSS background. I think SVG might ultimately end up being be the best answer to this challenge.

You’ll see that Jeremy is using SVG’s <animate> functionality rather than CSS animation. It would be interesting to compare animation performance.

Simon Buerger (simonbuerger) – CSS Clip-path

See the Pen The Challenge: Recreate this GIF in Code by simonbuerger (@simonbuerger) on CodePen.

Simon Buerger is basing his solution on a reshaping CSS clip-path. You often see clip-path used with a ‘rectangle’, ‘circle’ or ‘ellipse’ values, but Simon is using the rarer ‘polygon’ value. Polygon takes a series of X Y values to create a mask shape.

img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}

Clever stuff.

Sharat M R (cosmogenius) — CSS transforms

See the Pen The Challenge: Recreate this GIF in Code by Sharat M R (@cosmosgenius) on CodePen.

Sharat M R is doing some beautiful things here with CSS3 transforms. Both this and the next entry have based their approach on using CSS skews and rotations and it’s difficult to separate them.

To my eye, they are the two best pure ‘reproductions’ of the original animation — including timings and transitions.

Praseetha KR (@void_imagineer) — CSS transforms

See the Pen The Challenge: Recreate this GIF in Code by Praseetha KR (@Praseetha-KR) on CodePen.

That brings us to Praseetha KR’s entry, which I’m happy to select as the inaugural challenge winner! As I said earlier, Sharat’s solution was a similarly impressive animation. Praseetha’s solution is slightly smaller and more modular due to it’s SASS underpinnings. Lovely code.

Great work from Praseetha KR, and indeed everyone who offered a solution. I think it’s proved to be a great way to test yourself and learn from others.

Thanks so much to everyone who participated.

P.S. Keep an eye out for ‘Challenge #2’ later in the week!