Metafizzy wordmark v4: SVG first

29 Aug 2018 · by David DeSandro

Metafizzy wordmark before & after

One of the perks of working for yourself is that you can do a rebrand on a whim.


Last year, I got a chance to work on the wordmark for CodePen. Unlike most wordmarks, the CodePen wordmark was never designed with a font. Rather, all the letterforms are comprised of simple geometric shapes, rendered with a stroke in SVG. Using straight lines and semicircles, the SVG code for the wordmark is concise and elegant, a mere 500 characters. The wordmark's design extends beyond its visuals, into its underlying code. It is a lovely microcosm for CodePen itself, an enlightening demo in its own right.

CodePen wordmark grid

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

As I wrapped up my work on the wordmark, I felt jealous that Metafizzy's wordmark lacked this elegant code quality. So I set off to fix it.

Prior wordmarks

James Edmondson designed the first Metafizzy wordmark in 2012. He delivered a loose ribbon-like script that felt alive and personable. During the design process, he also produced a couple geometric designs with a fixed line width.

Metafizzy v2 logotypes

These geometric designs always kept a place in my heart. In the previous v3 rebrand, I went back and tried to design a wordmark closer this geometric script. The final design was a simpler script based off a geometric design.

Metafizzy v2 logotypes

It was a serviceable design, but its SVG code was a hodgepodge as one would expect.

The goal with this redesign (rebrand #4 if anyone is counting), was to design a wordmark optimized for SVG first. The visual design of the wordmark would be directed by how SVG code works. To produce less SVG code, I designed the wordmark with these contraints:

  • Use only strokes for fewer points and elements
  • Align points to pixel grid for no decimal values
  • Use elliptical arcs over bezier curves

Elliptical arcs

SVG has an interesting feature. <path> elements are the SVG elements used for non-standard shapes (like a circle or rectangle).. The actual shape of <path> elements are defined by a set of commands. These commands work like connect-the-dots, directing the rendering engine point-by-point where to draw next. (The syntax is remarkably reminiscent of the Logo programming language and its turtle graphics. Takes me way back.)

There are commands for straight lines L, H, V and for bezier curves C, S. There are also commands for special curves: quadratic curves Q, T and elliptical arcs A. The elliptical arc command is particularly useful as you define the size of the ellipse, rather than the control points for a bezier curve. So it is more human readable and may require less code than a bezier curve.

For example, a three-quarter circle requires 3 bezier curve commands but only 1 elliptical arc command.

See the Pen SVG bezier vs arc commands by Dave DeSandro (@desandro) on CodePen.

Wow, you just wasted my time slogging though this code minutia. But code minutia, I counter, is what the Metafizzy brand is all about.

Wordmark design

As the cliché holds, the constraints drove creativity, directing the process along industrial guardrails.

Metafizzy wordmark v4 artboard

Metafizzy wordmark v4 grid

Metafizzy wordmark v4 grid

The basic design of previous Metafizzy wordmarks is still intact: swashes, dots, ligature fi. But the construction has been dramatically simplified with straight lines and elliptical curves.

A proper typographer might start with this strict geometric design, but would be quick to start refining it for optical visibility. Even though these shapes are mathematically aligned, human eyes see them differently. Circles don't look circular. Horizontal and vertical lines appear to have different weights. Curves don't reach edges. Many subtle improvements are required to make geometric type look geometric. But for this project, all those quirks are left in to keep the SVG code short & sweet. It's part of the charm.

Strokes only

Using only stroke shapes required a couple hacks. The dots are rendered as rings with strokes wide enough to fill their hole. There's an extra horizontal line to fill in the e. But using only strokes yielded several nice features.

The wordmark SVG is way easier to style in CSS, setting only stroke.

/* standard display white*/
.mfzy-wordmark { stroke: #FFF; }

/* highlight blue on hover*/
.mfzy-wordmark:hover { stroke: #19F; }

The stroke-only design lends itself to easier stroke-width variation. I was able to produce a variety of weights.

Metafizzy wordmark v4 weights

Stroke paths can then be used for animated vector lettering. Thanks Hali!

See the Pen Metafizzy animated SVG wordmarks by Dave DeSandro (@desandro) on CodePen.

SVG code

Here is the real wordmark design, its lovingly-hand-coded SVG:

<svg class="mfzy-wordmark" xmlns=""
  viewBox="0 0 280 80" fill="none" stroke="#333" width="140" height="40">
  <g transform="skewX(-18)">
    <path stroke-width="8" d="M38 20h6c4 0 7 2 9 6l9 18l12-24h2v22
    a20 22 0 0 0 20 22M48 22v28a12 15 0 0 1-24 0M98 44a6 6 0 0 0 0-12h-2
    a8 10 0 0 0 0 20h14a8 10 0 0 0 8-10M118 12v30a8 10 0 0 0 16 0M150 36
    q-4-4-8-4a8 10 0 1 0 8 10m0-14v14a8 10 0 0 0 8 10M184 20a9 9 0 0 0-18 0
    v34a8 10 0 0 1-8 10M158 32h24v24M190 32h18l-12 20h18M216 32h18l-12 20h18
    a8 10 0 0 0 8-10m0-14v14a8 10 0 0 0 16 0m0-14v38a6 6 0 0 1-12 0
    c0-12 32-8 32-32c0-10-6-16-15-16M108 24h24a6 6 0 0 0 6-6M102 38h-4" />
    <g stroke-width="6">
      <circle cx="38" cy="22" r="3" />
      <circle cx="182" cy="20" r="3" />
      <circle cx="269" cy="20" r="3" />

The design and code was done with square proportions and perpendicular lines. This allowed me to use whole number values and elliptical curves. The slant is done afterward in SVG with a transform: transform="skewX(-18)". 18° is the angle of the Metafizzy bear's leg.


Adhering the strokes to a grid gives the design its own native size 280 x 80, with stroke-width of 8. This means I can resize the wordmark in multiples of 70 x 20 and the strokes will align perfect to a pixel grid. See how there's no fuzzy pixels above & below the z's.

Metafizzy wordmark pixels

Metafizzy wordmark pixels

It's done...ish

You don't have to be precious with your brand. Not every rebrand needs to be a monumental overhaul revealed with a huge splash. In the digital age, most are better without it.

The majority of the work on this wordmark was done a year ago. Since then, I've been trying it out here & there, getting a better sense of how well it works in practice and how I feel about it. I'll likely keep fiddling away at this design. But after a year, it was time to at least give it a proper introduction.

300 Optimist Park logo

13 Aug 2018 · by David DeSandro

300 Optimist Park sign

Last year my buddy Andy reached out to design the logo for 300 Optimist Park a new apartment building going up in Charlotte, North Carolina. We worked together, looking at local type, trying out fonts, eventually honing in on the final design as a set of 3 wordmarks in 3 color palettes. One year later, the building is up and ready to rent. That sign is my first physical signage ever to go up (a proud moment).

300 Optimist Park type tour

300 Optimist Park logo explorations

300 Optimist Park logo colors

300 Optimist Park brand

300 Optimist Park brand

300 Optimist Park website

Metafizzy socks now on sale

19 Jun 2018 · by David DeSandro

Metafizzy socks

Metafizzy socks

I love socks. Slipping into a pair of socks you adore can change your whole day. No matter how bad things get, at least you're feet are living their best life. That's why I made Metafizzy socks. Wild colors, overly-cute design. These are the socks my feet were made for.

Metafizzy socks feature argyle design on leg and fizzy bear face on the top of the foot. Things are looking up for that cutie. Knit with comfy-soft cotton threads, you'll be walking on sunshine. Colors are a show-stopping combo of red, orange, gold, and blue. 1-size fits all Adult Medium. Made in the USA.

Makes a great gift. Everyone wears socks.

Look at these glorious socks.

Don't see your country as a shipping destination? Email or Tweet @metafizzyco to get your country added.

Check out the Eventbrite crew rocking the rainbows.

Pre mascot logo

15 Jun 2018 · by David DeSandro

Pre logo mascots

I designed the mascot & logo for Pre, a social app for sharing moments with your best friends.

I explored a variety of concepts in the initial sketches, going for friendly and lightweight.

  • Osprey - It has "pre" in the name
  • Cute, bouncy mammals - Jaguarundi, polecat, and pudú
  • Piranha - Sort of sounds like "pre": pre-ranha (work with me)
  • Rabbit - A take on the rabbit in the hat from Alice in Wonderland. Trying to meet up.
  • Preeple - abstract humanoid cuties

Pre logo mascot sketches

Sensing a promising lead, I then did a wider exploration of the Preeple concept. I tried out hair shapes, accessories, and more detailed character designs

Pre logo preeple sketches

We selected Osprey 3, Rabbit 24, and Preeple 28 sketches to work on in vector.

Pre logo round2

Several of theses concepts went to live on as logos for Logo Pizza. Osprey and Mechanical hare are available for sale.

Pre Logo Pizza logos

For Pre, we landed on the Preeple 1 design, with a little dude waving to say hello. He perfectly exemplified the character of Pre: friendly, simple, and inviting. From there, I chisled out the finer details of the design.

Pre logo round3

Pre app icon

The 'green waver' was selected as the main logo. We also decided to build out his supporting cast. They represented the other friends in your crew: the selfie queen, the grumpster, and the person who you always have to convince to come out. I also provided multiple facial expressions, which could be used as default avatars or in messaging.

Pre mascot characters

Pre tweet

Alas, the Pre app is likely no longer available, but that lil' dude will keep on waving in my heart.

Interested in a logo for your work? Get in touch! Email to get started.

Metafizzy logos

Duck-punching the prototype

9 Apr 2018 · by David DeSandro

Every so often I encounter an issue with a Metafizzy plugin that I can't resolve its standard API. The only way to get it done is to overwrite core plugin code. These issues call for duck-punching. Paul Irish's post on duck-punching jQuery is a great overview.

Duck-punching is another name for monkey patching. Monkey patching is a technique to “extend or modify the runtime code of dynamic languages without altering the original source code.”

Let's say you want to add a class is-animating to Flickity when it is animating. Flickity does not have a startAnimation event. But it does have a startAnimation method on its prototype. We can duck-punch that method to add our desired behavior.

// get original method
var startAnimation = Flickity.prototype.startAnimation;
// overwrite method
Flickity.prototype.startAnimation = function() {
  // call original method
  startAnimation.apply( this, arguments );
  // do new stuff

Let's break down what's happening here:

  • Store the original method as a variable.
  • Overwrite the method.
  • Within the new method, trigger the original behavior by calling the stored method with apply(). Pass in this and arguments to set instance and any arguments.
  • Add new behavior within the method.

Likewise, we can duck-punch the _create method to add an event listener on settle to remove the class.

// get original method
var _create = Flickity.prototype._create;
// overwrite method
Flickity.prototype._create = function() {
  // call original method
  _create.apply( this, arguments );
  // do new stuff
  this.on( 'settle', function() {

Here's a demo with these two duck-punches:

View Flickity - duck punches CodePen

By duck-punching prototype methods, we change the behavior of all Flickity instances. If you want to change behavior on individual instances, you can do so by duck-punching instance methods.

// create new instance
var flkty = new Flickity('.carousel');

// get original method
var startAnimation = flkty.startAnimation;
// overwrite method
flkty.startAnimation = function() {
  // call original method
  startAnimation.apply( this, arguments );
  // do new stuff
  console.log('start animation');

Duck-punching is a nice way to mess around with Metafizzy plugins without overhauling internal code. It's great for debugging, allowing you to shim in console.log like in the example above.

Duck-punching is one of those quirky features of JavaScript. At first it looks like a gross hack, but its usefulness makes it a thing of ugly beauty.

Windex: pretty-up your localhost

3 Apr 2018 · by David DeSandro

Windex icons

As 90% of my job is making static websites, I am often looking at directory index pages. You know, those ancient pages with titles like Index of /projects/. Long ago, I swore off the ugly unstyled 90's default and chose a higher path.

Windex is a little library that creates styled directory index pages with Apache. Simply put, it allows you to use CSS on your localhost. Features include:

  • SVG icons, sized pixel-perfect for 24x24 & multiples thereof
  • View HTML files without extensions: project/page.html at project/page
  • Nice mobile view with big tap targets

Windex screenshot

View Windex demo on CodePen

Setting up a practical localhost on macOS

I like to use localhost so I can view my projects in ~/projects. This allows me to create static sites that I can easily view in the browser, without having to start up a server. For example, going to http://localhost/masonry/sandbox allows me to view ~/projects/masonry/sandbox.

Below are instructions to set that up on macOS. Sorry Windows users, you're on your own here. This will make a single user's folder viewable for all users. For separate users folders like localhost/~username, view these instructions.

Open /etc/apache2/httpd.conf in your text editor. Making changes to this file will require administrator access. Change the following lines (line numbers may vary in your file):

Line 169: Enable mod_rewrite. This enables .htaccess files to rewrite URLs.

LoadModule rewrite_module libexec/apache2/

Lines 238-239: Change DocumentRoot and subsequent Directory to your desired directory. This sets localhost to point to the directory.

DocumentRoot "/Users/username/projects"
<Directory "/Users/username/projects">

Line 252: Within this <Directory> block, add Indexes to Options. This enables file index view.

    Options FollowSymLinks Multiviews Indexes

Line 260: Change AllowOverride value to All. This enables .htaccess files.

    AllowOverride All

That block should look like:

DocumentRoot "/Users/username/projects"
<Directory "/Users/username/projects">
    # Possible values for the Options directive...
    Options FollowSymLinks Multiviews Indexes
    MultiviewsMatch Any

    # AllowOverride controls what directives...
    AllowOverride All

    # Controls who can get stuff from this server.
    Require all granted

In Terminal, start or restart apachectl.

sudo apachectl restart

View http://localhost in a browser. You'll should see the index page for ~/projects. Without Windex, it's ugly, but it works. With Windex, it's pretty.

If you messed up httpd.conf, you can replace it with its original at /etc/apache2/original/httpd.conf.

Viewing on other devices on macOS

You can view this localhost on another device like a phone.

  1. Open System Preferences. Select Sharing.
  2. Change Computer name to something rad, like thunderclaw, if you haven't already.
  3. Enable File sharing.

Now, you can view http://thunderclaw.local on another device if you are on the same Wi-Fi.

Windex is the one tool I use every day. Originally created in 2010, it is one of my first open-source projects. Before this recent overhaul, I had been using that first version for years, which had iPhone v1 glossy buttons. Let's see if this version lasts me until 2026.

Metafizzy socks

Metafizzy socks

Now for sale! Rainbow colors, cutie bear face, knit with comfy-soft cotton threads. Makes a great gift. Everyone wears socks.