How Google Built Its 3-D Interactive Rubik's Cube Doodle

Today Google launched one of its coolest doodles yet: a 3-D interactive Rubik's Cube. Built thanks to advances in CSS and a few smart design tricks, it's one of the most challenging doodles the company has done so far.

If you buy something using links in our stories, we may earn a commission. This helps support our journalism. Learn more. Please also consider subscribing to WIRED

Today Google launched one of its coolest doodles yet: a 3-D interactive Rubik's Cube. Built thanks to advances in CSS and a few smart design tricks, it's one of the most challenging doodles the company has done so far. It's also one of the most well-timed. May 19—5/19—honors the roughly 519 quintillion possible configurations of the iconic puzzle.

In the 14 years since Google began posting them, doodles have celebrated everything from cultural milestones to significant inventions. Two years ago music lovers went nuts when the company posted a fully-playable Moog doodle, and in 2010 videogame fans got a chance to enjoy a round of Pac-Man on the Google homepage to celebrate the game's 30th anniversary. The best doodles have always clustered at the intersection of art and technology—the same space occupied by Ernö Rubik's ingenious creation—but until recently it just wasn't possible for Google to properly pay homage to the toy online.

"[A Rubik's Cube doodle] is something that had been suggested time and time again, but we just didn't think the technology was quite ready for it on the web," says doodle team lead Ryan Germick.

That's changed in recent months. Even though the Rubik's Cube is what Richard The of Google Creative Lab calls "one of our most technically ambitious doodles yet" the widespread support for CSS 3-D Transforms on most browsers meant the team could build the cube in a way that was playable for most users.

"CSS 3-D Transforms lets us display the cube in a 3-D space, as opposed to having a sort of rasterized 2-D experience," says lead engineer Kristopher Hom. "It makes it feel alive, because as you're moving your mouse, you can see the cube rotating in 3-D space."

The biggest challenge, says Germick, was capturing the austere functionality of Rubik's design. "From the design side, we tried to make it as simple and austere as possible," Germick explains. "'Google' is spelled in a very minimal, abstract, geometrical way. There's a minimal amount of UI, telling you how many moves you've made."

In addition to the main doodle, Google is also making the source code available for anyone interested in remixing it. The company is also launching a handful of interactive, digital Rubik's Cubes as a Chrome Experiment, as well as partnering with Liberty Science Center for a live interactive exhibit on the Cube, which is celebrating its 40th anniversary this year.

"If you get a Rubik's Cube as a child, you're drawn to it either because you're a problem-solver and you're interested in things that will later let you leap to things like code and engineering and technology," says The. "I think we're all just really drawn to it because it's a symbol—a symbol for problem-solving, a symbol for simplicity and complexity at the same time. That is really what we're trying to celebrate."

Check out the Rubik's Cube doodle, and a few of Google's in-progress designs, in the gallery above.