Align points to pixel grid for no decimal values.Use only strokes for fewer points and elements.To produce less SVG code, I designed the wordmark with these contraints:
#Define wordmark code#
The visual design of the wordmark would be directed by how SVG code works. The goal with this redesign (rebrand #4 if anyone is counting), was to design a wordmark optimized for SVG first.
It was a serviceable design, but its SVG code was a hodgepodge as one would expect. The final design was a simpler script based off a geometric design. In the previous v3 rebrand, I went back and tried to design a wordmark closer this geometric script. These geometric designs always kept a place in my heart. During the design process, he also produced a couple geometric designs with a fixed line width.
He delivered a loose ribbon-like script that felt alive and personable. James Edmondson designed the first Metafizzy wordmark in 2012. See the Pen CodePen logo SVG, v2 by Dave DeSandro ( on CodePen.Īs I wrapped up my work on the wordmark, I felt jealous that Metafizzy's wordmark lacked this elegant code quality. It is a lovely microcosm for CodePen itself, an enlightening demo in its own right. The wordmark's design extends beyond its visuals, into its underlying code. Using straight lines and semicircles, the SVG code for the wordmark is concise and elegant, a mere 500 characters. Rather, all the letterforms are comprised of simple geometric shapes, rendered with a stroke in SVG. Unlike most wordmarks, the CodePen wordmark was never designed with a font. Last year, I got a chance to work on the wordmark for CodePen. One of the perks of working for yourself is that you can do a rebrand on a whim.
0 kommentar(er)
