AnimatedPolylion

About Polyon

Polyon believes we can all do the thing that we love and get paid for it. They help businesses to build their dream apps and find the right people who have the same dreams to collaborate. They have ideas coming out of their ears.

Research

Jonno Riekwel of Polyon envisioned a simplistic set of motions with fine grain control for his companies logo crafted Jord Riekwel. It was requested that each polygon element animate independently in a controlled sequence. The challenge was accepted and the result was spectacular.

It was unclear how the motion would take place and sparked an ongoing research and discovery session searching for the answers. How to accomplish this task and what challenges would be faced was the goal. We began with a demo on CodePen of the lion below to test out theories and their results in the browser.

See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.

The Initial Polylion used as discovery. View the live demo on CodePen

Orignally posted on Dribbble by Breno Bitencourt, the illustration was used for studying capabilities of each polygon moving independently using the GreenSock Animation Platform (GSAP).

The demo proved it's worth in mountains of feedback and community support. The knowledge gained internally was priceless before moving on to the actual piece; Polyon's logo.

Leave No Traces

The original vector logo was cleaned from top to bottom ensuring by hand that each polygon element meticulously lined up to it’s adjacent and adjoining counterpart. Hours of work were invested to ensure each polygon rest prcisely on a pixel grid. The result is a crisp and beautiful polygon lion that helped push the boundaries of SVG and it's use on the Web.

Challenges

In the initial researching phases we found CSS to be very difficult in terms of fine-grain control compared to a library such as GreenSock and the one we chose for the final implementation. Since this type of library is geared towards JavaScript controlled animations, keyframes can be controlled and executed independently. As the project evolved each polygon element would allow for independent movement while being presented in a particular sequence of our choosing.

Example of Stroke Fix

When viewed in the browser the lion displayed some anti-aliaising issues leaving roughly a 1px gap between each polygon element. To avoid this problem a stroke width of 2.5px and a stroke color to match each corresponding polygon element was used. This helped to alleviate the anti-aliasing issues slightly, but still not entirely. A guest post article for CSS-Tricks produced plenty of smart suggestions from the community regarding the use of SVG filters instead of strokes and contributed to the final result.

See the Pen PolyCleaner Filter by GRAY GHOST (@grayghostvisuals) on CodePen.

The PolyCleaner SVG Filter Fix

Results

The final result is gorgeous and attractive. The cherry on top is the hidden easter egg for hover animations that Polyon asked as a last minute add on. The outcome is captivating.

View the live demo on CodePen

Noteworthy

The project was picked up as a guest article with CSS-Tricks due to an earlier demo previously discussed exploring the polygon lion. An invitation was also extended to the CSS Summit where a talk was given on creating and animating SVG polygons. That slide presentation can be seen more in-depth at http://slides.com/grayghostvisuals/svgpolygons. The talk was also given to the San Francisico CodePen meetup held at the Trulia headquarters.