Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

This is a guest post by David DeSandro. You might know David from his work at Metafizzy or right here on CodePen. We’ve worked with David in the past on code and UI work, and now he’s at it again with some branding work! Here’s David:

SVG has renewed my love of viewing source. It’s like 2nd-level view source. You need first need to view HTML source, then peer into the SVG source. Even with its assembly path code, you can still suss out an author’s craft. Are all the shapes <path>, or did they throw in some <rect>, <circle>, or <polyline>? Did the code get scrubbed through SVGOMG or did it come straight out of Illustrator with all its leftover crud? SVG is new enough to be a fresh playground where developers can explore the boundaries between creative expression and technical proficiency.

So I was delighted when I discovered the CodePen logo was expertly rendered in a mere 500 characters. Whereas most vector logos are rendered with filled shapes, the CodePen logo took advantage of the medium, rendering its 6 letters and box O logo with strokes. Most of its numerical vector values are rounded to whole numbers. Path attributes fill="none" stroke="#000" stroke-linejoin="round" were moved to the parent <svg> node, cascading to its child <path> nodes (a new technique!).

The logo SVG was designed with care. Rather than using a normal font, its letter forms are comprised of simple geometric shapes, straight lines, and semi-circles. It is the kind of design any developer enjoy to tinker with, like a kid stacking wooden blocks together building pleasant structures.

See the Pen CodePen logo SVG, v1 by David DeSandro (@desandro) on CodePen.

Logos are meant to be a symbol for their respective entity. A logo works as a small piece of art that reflects the values and themes of its brand. Typically, this is achieved through visual imagery with illustration, iconography, and typography. The CodePen logo SVG expands on this concept by evoking its themes in its code, underneath its visuals. Mind, blown.

The CodePen logo is a microcosm for CodePen itself. You can view its source to discover a small demo exhibiting tiny acts of artistry. It works as its own CodePen demo. It is brilliant. But, in examining it, I came to see its flaws.

The CodePen logo is displayed in the site header at a small size (138px by 26px). At this size, the letter strokes are couple pixels wide on screen. On @1x resolution screens, any slight misalignment of the strokes relative to the pixels causes them to look blurry. The SVG was pixel-imperfect in its main application.

So, I ventured to resolve this issue. To reduce offset pixels, I aligned the letter forms to a grid. Each square in the grid represented one pixel. Because the logo was designed with simple geometric shapes, the letter forms could easily be nudged to fit the grid. I also took this opportunity to make small typographic improvements. I changed the line-caps from square to round to match the round corners. I enlarged the bowl of the P to give it a more consistent spacing with the other letters.

The result is a vector that displays clear and crisp. The strokes are well-defined and appear as strong as a pixel-hinted font (because it has been pixel-hinted).

Yet it’s still the same design. No one would likely notice. It doesn’t require a flashy launch page or old swag to be thrown out. But for those developers ever curious to peek under the hood, they’d find an Easter egg with even tighter SVG code. It uses a single <path>, set inside a small 138px by 26px view-box. I even went into the path’s code and nudged curve control points to whole numbers where possible. Not a single byte was sparred.

See the Pen CodePen logo SVG, v2 by David DeSandro (@desandro) on CodePen.

In updating this design, I found another feature of its clever design. Because the letters are rendered with the same stroke styles, you can manipulate them to produce variations by changing stroke-width and linecap.

The design scales from elegantly thin all the way up to Dunkin Donuts thick. (The square C & N are wonky, but maybe kinda cool.) Because this is all done with the path styles, you can have fun with the SVG. I whipped up these demos:

See the Pen CodePen dynamic brand by David DeSandro (@desandro) on CodePen.

See the Pen CodePen logo wave by David DeSandro (@desandro) on CodePen.

It was an interesting idea, but we decided to scrap it. Consistency makes for stronger brands. But the Pens will continue to live on because this site is wonderful and now its logo matches.