WebAssembly logo

@sunfishcode

ＷｅｂＡｓｓｅｍｂｌｙＬｏｇｏＣｏｎｔｅｓｔ

⚠️⚠️⚠️⚠️⚠️
⚠️ UPDATE ⚠️ ✅ vote for your favorite logo in ➡️ this thread ⬅️
⚠️⚠️⚠️⚠️⚠️

ORIGINAL POST (now closed)

At the very start of the WebAssembly project, @sunfishcode hacked up a logo:

It has nice ideas:

Arrows coming together to represent "assemble".
Arrows coming together can also represent compiling other languages to the web.

It would be nice to have something more fancy / web-y / designer-y, and keep it neutral so it belongs to the web and not one of the browser vendors.

Petr Hosek from the NaCl team proposed using the HTML5 technology class icons.

Ｈｅｒｅ＇ｓｗｈｅｒｅＹＯＵｃｏｍｅｉｎ！

Reply to this thread with your suggested WebAssembly logo.

We haven't decided how we'll pick the final logo, but it'll definitely be around "stable MVP" time.

@sunfishcode

That's a neat metaphor. FWIW I always liked the Borland C++ logo, which
looked like building blocks being put together. "Assembling" can also have
that connotation as well.

On Wed, Jun 3, 2015 at 10:34 PM, JF Bastien notifications@github.com
wrote:

@sunfishcode https://github.com/sunfishcode hacked up a quick logo for
Web Assembly:
[image: image]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
It has nice ideas:

Arrows coming together to represent "assemble".

Arrows coming together can also represent compiling other languages
to the web.

It would be nice to have something more fancy / web-y / designer-y, and
keep it neutral so it belongs to the web and not one of the browser vendors.

Petr Hosek from my team proposed using the HTML5 technology class icons
http://www.w3.org/html/logo/, and came up with the following:
[image: image]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

Any other suggestions?

@lukewagner https://github.com/lukewagner said:

My own personal nit would be that the asymmetry of the arrows bothered me
a bit. Asymmetry can be visually nice, though. Just to throw out an idea:
what if the arrows were symmetric but there were 4 slightly-different
abstract shapes at the four corners: building on the "compiling to the web"
metaphor above, the 4 shapes would represent 4 different source languages
which were being compiled (via the arrow) to the center (the web).

—
Reply to this email directly or view it on GitHub
WebAssembly/spec#112.

@BrendanEich

@BrendanEich also mentioned that he like the superheroes assembling vibe, Avengers style.

Yes, my nit aside, I overall like arrows pointing together. Building blocks is an interesting idea; I'd be interested if anyone had a concept that matched the HTML5 technology class icon style.

@davidsehr

Petr Hosek originally came up with the following:

@davidsehr pointed out a horrible flaw in that logo. I like the arrows, but we should definitely avoid inadvertently creating a historically-insensitive logos!

The HTML5 technology class icon idea is still good, though!

I talked to some folks here, and they suggest that we hold off having any logo until first launch. That'll allow us to concentrate on tech instead, and let us take time to actually create a logo which is though-out and doesn't have inadvertent meanings!

@lukewagner

@lukewagner Well, it's version 1.0 (somewhen) and it's abbreviation is WASM. Also, green is not used so far by the typical HTML5 technology icons AFAIK.

EDIT: Licensed under (CC BY 3.0) and based on the HTML 5 Logo

EDIT: Will provide a SVG version with less pixel errors when I have time :p.

EDIT: SVG for the green and purple version.

@Teemperor

@Teemperor we can't accept a logo without you being in the W3C community group, and with proper copyright attribution. It's also too early to get a logo for now :)

@jfbastien

@jfbastien I'm already in the W3C community. The logo has to be licensed under the original CC license of the HTML5 logo because it's obviously just the remixed HTML 5 logo.

Another design based on the arrows pointing together (for WebAssembly):

Licensed under (CC BY 3.0), created by Raphael Isemann.

And I think a logo that will be changed later is better than no logo at all :)

Here are my 3 mins shots.

@lukewagner

@lukewagner, this is my proposal's CC licensed repository:

@carlosbaraza

@carlosbaraza this remains my favorite proposal by far! Just one minor comment: why is the font size of WA smaller than JS? It makes it seem less important somehow.

@carlosbaraza

@carlosbaraza I like this, too.

I think a second notch going upward from WA into JS will help illustrate the interconnectedness of the two technologies (they can call into each other view import/export) and to balance out the area of each color. This may require the JS text to be pushed up to the top or both texts to be centered, for symmetry...

Edit: I say this because without considering the IC example I'm inclined to view the JS/WA combination as two connected puzzle pieces.

80's style!

casting my vote for #112 (comment)

simple and has a good story 👍

Initially I decided to emphasise on the word "WebAssembly" as a whole being a logo, but then it wouldn't be unique. So I decided to come up with an indifferent logo for WebAssembly, but then again it either look too sophisticated or corporate which is not the strength of it's main usage. In the end I tried to go with the HTML5 logo which inspired my submission.

Built upon the already loving and powerful logo of HTML5. This is a derivation of the HTML5 logo.

@Fogaccio

Another dev tool snippet to show comments by popularity :D. This one prints everything to the console like so:

PS: It looks like @Fogaccio's logo has been used out in the wild https://simpleprogrammer.com/2016/05/25/webassembly-finally-freed-javascript/

(() => {

    // get all the comments that have thumbs up + images, sorted by most thumbs up
    var comments = ($ =>
        $(document, '.timeline-comment-wrapper')
        .map(comment => { return {
            element: comment,
            thumbsUp: $(comment, 'g-emoji[alias="+1"]')
                .map(gemoji => parseInt(gemoji.parentNode.innerText.replace(/[^0-9.]/g, '')))
                .filter(num => !isNaN(num))
                .pop()
        }})
        .filter(comment => comment.thumbsUp)
        .sort((a, b) => b.thumbsUp - a.thumbsUp)
        .map(({element, thumbsUp}) => { return {
            author: $(element, '.author').shift().innerHTML,
            thumbsUp: thumbsUp,
            images: $(element, '.comment-body img')
        }})
        .filter(({images}) => images.length)
    )((e, q) => Array.prototype.slice.call(e.querySelectorAll(q), 0))

    // add padding to all the author names so they line up when we print them out
    var longestNameCount = comments.reduce((a, {author}) => author.length > a ? author.length : a, 0)
    comments.forEach(comment => {
        for (var i = comment.author.length; i < longestNameCount; i++) comment.author += ' '
    })

    // print everything in nice collapsed groups
    comments.forEach(({author, thumbsUp, images}) => {
        console.groupCollapsed(author, '=', thumbsUp)
        images.forEach(image => console.log(image))
        console.groupEnd()
    })
})()

Please head over to #980 to vote on the top submissions!

I feel like simply taking the top 5 is slightly unfair because it favors people that submitted a long time ago instead of the actual most fitting submission.

@g-harel

@g-harel appreciate the feedback. In this case, the thread was so contentious that this was the most fair approach we could come up with. Also, reactions weren't introduced until March last year, so I don't think the earlier submissions got too much of a head start.

@s3ththompson

@s3ththompson I was more specifically referring to a thread on reddit in November that gave this issue a lot of attention (that is how I learnt about this and ended up submitting as well). Since there was a big influx of people around that time, the submissions that were already there got a lot of attention but the new ones didn't get a similar opportunity.

@s3ththompson

@s3ththompson Can you close comments on this issue so that people in this thread stop getting spammed and then everyone can vote on #980 🥇

Navigation Menu

Repository navigation

WebAssembly logo #112

ＷｅｂＡｓｓｅｍｂｌｙＬｏｇｏＣｏｎｔｅｓｔ

Ｈｅｒｅ＇ｓｗｈｅｒｅＹＯＵｃｏｍｅｉｎ！

222 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

WebAssembly logo #112

Description

ＷｅｂＡｓｓｅｍｂｌｙ Ｌｏｇｏ Ｃｏｎｔｅｓｔ

Ｈｅｒｅ＇ｓ ｗｈｅｒｅ ＹＯＵ ｃｏｍｅ ｉｎ！

Activity

titzer commented on Jun 3, 2015

jfbastien commented on Jun 3, 2015

lukewagner commented on Jun 3, 2015

jfbastien commented on Jun 3, 2015

jfbastien commented on Jun 3, 2015

Teemperor commented on Jun 18, 2015

jfbastien commented on Jun 18, 2015

Teemperor commented on Jun 18, 2015

Teemperor commented on Jun 18, 2015

lawnsea commented on Jun 19, 2015

cihadturhan commented on Jun 22, 2015

222 remaining items

carlosbaraza commented on Jan 15, 2017

mindplay-dk commented on Jan 15, 2017

RyanLamansky commented on Jan 15, 2017

haroldfredshort commented on Jan 17, 2017

congsan commented on Feb 2, 2017

kumavis commented on Feb 3, 2017

jaydonteh commented on Feb 3, 2017

luveti commented on Feb 4, 2017

s3ththompson commented on Feb 7, 2017

g-harel commented on Feb 7, 2017

s3ththompson commented on Feb 7, 2017

g-harel commented on Feb 7, 2017

styfle commented on Feb 7, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

ＷｅｂＡｓｓｅｍｂｌｙＬｏｇｏＣｏｎｔｅｓｔ

Ｈｅｒｅ＇ｓｗｈｅｒｅＹＯＵｃｏｍｅｉｎ！