Logo / icon

[mathiasbynens]

At the moment, the jsPerf logo is:

However, there is no higher-resolution version of this logo. We need one.

Of course, suggestions for an alternate logo are welcome, too!

[mholt]

1

2

3

I'm kind of a fan of the second one. The third one shows a different orientation and color (just one color on the tachometer instead of two) for a visual reference. A combination of 2 and 3 might look good but also might look busy. Either way, let me know what you think.

[mholt]

I was curious, so I combined 2 and 3. And added motion ticks. Not sure I feel they're necessary but it does make speed become clear.

4

[mathiasbynens]

@mholt Nice work! Quick note/nitpick: jsPerf is stylized as jsPerf (not “JSPerf”).

I like the simplicity of 1, and dig 3 as well. Keep ’m coming!

[mholt]

With the lowercase js. it's not as idiomatic, since I normally see JS in capital letters and the typical JavaScript logo is the letters JS in a yellow box, but I can understand wanting to preserve the style. I'll be honest, though, I prefer the capital variation. (Hmm, but the lowercase is growing on me.)

5

6

If you were to go with one of these, I personally favor 5. The red and green colors represent the essence of what jsPerf is all about.

[jdalton]

I really dig the blue

[hermansje]

[scribblemaniac]

I have made a vector version of the original logo so it can be scaled to any size. The details can also easily be tweaked with the svg format as well. Here is a preview of it:

The actual svg file can be downloaded here. Please feel free to improve upon it.

Despite having made this, @mholt's 5 is my favorite so far.

[mathiasbynens]

@scribblemaniac Nice work, thanks!

Optimized version:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 399.99998 400.00001"><defs><linearGradient id="a"><stop offset="0" stop-color="#6ca4dd"/><stop offset="1" stop-color="#1a6ab8"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="181.429" y1="669.862" x2="181.429" y2="1034.148" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.055 0 0 1.092 -6.026 -730.064)"/><filter id="c" x="-.695" width="2.389" y="-.695" height="2.389" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter><filter id="d" x="-.316" width="1.632" y="-.165" height="1.33" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter><filter id="e" x="-.316" width="1.632" y="-.226" height="1.452" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter><filter id="f" x="-.222" width="1.443" y="-.193" height="1.386" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="1.447"/></filter><filter id="g" x="-.284" width="1.568" y="-.228" height="1.457" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter><filter id="h" x="-.256" width="1.513" y="-.24" height="1.479" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter><filter id="i" x="-.177" width="1.353" y="-.128" height="1.256" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="4.824"/></filter></defs><path color="#000" overflow="visible" fill="url(#b)" fill-rule="evenodd" enable-background="accumulate" d="M0 0h400v400H0z"/><ellipse cy="168.12" cx="68.888" rx="8.333" ry="8.333" filter="url(#c)"/><path d="M40.555 179.787h36.667v54.852c0 6.08-9.94 20.64-36.667 13.48v-10c16.212 5.36 26.667-1.47 26.667-10v-38.34H40.555z" fill-rule="evenodd" filter="url(#d)"/><path d="M133.89 189.787c-15.834-4.242-26.668-4.25-26.668 3.333s26.667 6.224 26.667 18.334-8.78 20.887-36.67 16.667v-10c16.35 1.89 26.66.94 26.66-5 0-5.93-26.67-2.96-26.67-18.33s18.604-19.84 36.664-15z" fill-rule="evenodd" filter="url(#e)"/><path d="M173 170l-4 18h3l1.333-6h5c2.91 0 5.194-2.368 6.167-6 .527-1.97-.04-6-3.5-6zm2.333 3h4c1.444 0 2.73.9 2.167 3-.562 2.1-1.633 3-3.5 3h-4z" transform="matrix(3.333 0 0 3.333 -416.113 -398.557)" filter="url(#f)"/><path d="M233.89 179.787c-11.22 0-26.668 12.93-26.668 28.334 0 32.48 33.334 20 33.334 20l2.222-10s-3.35 4.81-15.556 3.34c-12.206-1.47-10-10-10-10 13.952.96 30.108-2.25 30.74-16.66.095-8.365-5.17-15.145-14.073-15zm4.812 13.333c-.075 5.922-6.29 9.386-19.256 8.334 3.257-13.733 19.02-15.714 19.256-8.334z" fill-rule="evenodd" filter="url(#g)"/><path d="M260.556 228.12h10s9.434-36.666 20-36.666c8.036 0 3.333 7.47 3.333 7.47h10s7.67-18.304-8.55-18.304c-14.14 0-19.61 10.834-19.61 10.834l2.22-11.667h-10z" fill-rule="evenodd" filter="url(#h)"/><path d="M307.103 240.443l-3.214 9.97c31.97-.88 34.04-32.15 37.59-54.614h19.07l2.22-8.49-19.22-.15s.735-22.96 23.66-16.82l2.222-9.078c-19.08-5.113-35.11 3.25-38.383 25.595l-14.95.296-2.22 8.036 15.39.147c-2.1 10.51-3.4 44.498-22.175 45.09z" fill-rule="evenodd" filter="url(#i)"/><g fill="#fff"><ellipse ry="8.333" rx="8.333" cx="63.888" cy="163.02"/><path d="M35.555 174.687h36.667v54.852c0 6.08-9.94 20.64-36.667 13.48v-10c16.212 5.36 26.667-1.47 26.667-10v-38.34H35.555zm93.335 10c-15.834-4.242-26.668-4.25-26.668 3.334s26.667 6.23 26.667 18.34-8.78 20.89-36.67 16.67v-10c16.35 1.888 26.66.93 26.66-5s-26.67-2.96-26.67-18.33c0-15.37 18.604-19.84 36.664-15z" fill-rule="evenodd"/><path d="M155.496 162.953l-13.332 59.994h10l4.443-19.998h16.664c9.7 0 17.31-7.9 20.56-20 1.76-6.56-.13-20-11.66-20zm7.777 10h13.332c4.813 0 9.096 3.003 7.222 9.998-1.875 7-5.443 10-11.666 10h-13.33z"/><path d="M228.89 174.687c-11.22 0-26.668 12.93-26.668 28.334 0 32.48 33.334 20 33.334 20l2.222-10s-3.35 4.81-15.556 3.34c-12.206-1.47-10-10-10-10 13.952.96 30.108-2.25 30.74-16.66.095-8.365-5.17-15.144-14.073-15zm4.812 13.334c-.075 5.93-6.29 9.39-19.256 8.34 3.257-13.73 19.02-15.71 19.256-8.33zm21.854 35h10s9.434-36.66 20-36.66c8.036 0 3.333 7.47 3.333 7.47h10s7.67-18.3-8.55-18.3c-14.14 0-19.61 10.837-19.61 10.837l2.22-11.667h-10zm46.547 12.33l-3.214 9.97c31.97-.88 34.04-32.15 37.59-54.61h19.07l2.22-8.482-19.22-.15s.735-22.957 23.66-16.815l2.222-9.075c-19.08-5.115-35.11 3.246-38.383 25.593l-14.95.298-2.22 8.036 15.39.15c-2.1 10.51-3.4 44.494-22.17 45.09z" fill-rule="evenodd"/></g></svg>

[madskonradsen]

Just a suggestion - and a bit more minimalistic

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="595.28px" height="595.28px" viewBox="0 0 595.28 595.28" enable-background="new 0 0 595.28 595.28" xml:space="preserve">
<rect fill="#3073B7" width="595.28" height="595.28"/>
<rect x="61.134" y="215.605" fill="none" width="528.456" height="310.568"/>
<text transform="matrix(1 0 0 1 61.1343 345.2031)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'Helvetica-Light'" font-size="180">js</tspan><tspan x="129.958" y="0" fill="#FFFFFF" font-family="'Helvetica-Bold'" font-size="180">Perf</tspan></text>
</svg>

`
``

[jdalton]

I like minimal. If it looks like it's created in PowerPoint then I dig it.

[giuseppeg]

Too late to the party probably, but since the issue is still open I'll post my proposal :)

http://codepen.io/giuseppegurgone/full/EyZpqg/