WebAssembly logo #112

Open
jfbastien opened this Issue Jun 3, 2015 · 237 comments

Projects

None yet
@jfbastien
Member
jfbastien commented Jun 3, 2015 edited

WebAssembly  Logo  Contest

At the very start of the WebAssembly project, @sunfishcode hacked up a logo:
image
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.


Here's  where  YOU  come  in!

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.


@jfbastien jfbastien added this to the Public Announcement milestone Jun 3, 2015
@titzer
Contributor
titzer commented Jun 3, 2015

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.

@jfbastien
Member

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

@lukewagner
Member

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.

@jfbastien
Member
jfbastien commented Jun 3, 2015 edited

Petr Hosek originally came up with the following:
image

@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!

@jfbastien
Member

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!

@jfbastien jfbastien modified the milestone: MVP, Public Announcement Jun 3, 2015
@Teemperor
Member

wasm

@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.

@jfbastien
Member

@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 :)

@Teemperor
Member

@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.

@Teemperor
Member

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

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 :)

@lawnsea
lawnsea commented Jun 19, 2015

webassembly-group

@cihadturhan

Here are my 3 mins shots.

wasm1
wasm2

@yurrriq
yurrriq commented Jun 22, 2015

👍

@Namozag
Namozag commented Jun 23, 2015

What about the WA Zigzag

wa-logo

wa-logo2

@andrnag
andrnag commented Jun 23, 2015

@Namozag I like it!

@fstark
fstark commented Jun 23, 2015

(looks like attachments don't work via email...)
(Couple of quick and dirty)

An play on the zigzag idea:

wa1

Playing with negative space:

wa2

—fred

On 23 Jun 2015, at 13:27, Andrey notifications@github.com wrote:

@Namozag https://github.com/Namozag I like it!


Reply to this email directly or view it on GitHub #112 (comment).

@kigiri
kigiri commented Jun 23, 2015

@fstark can't see them.

@fstark
fstark commented Jun 23, 2015

Looks like you can't attach images via email, so I added them to the original comment. Do they appear inline ?

@Teemperor
Member

Nope

@fstark
fstark commented Jun 23, 2015

Let me try again with a smaller resolution.

Image 1 (Variation on Zigzag)
wa1

Image 2 (Negative Space)
wa2

@Janonard

I think it may be confusing to use a WA-logo, because Whatsapp is abbreviated as WA too.

@BrendanEich

Really creative work by everyone here. Agree on avoiding WhatsApp overlap; also the // from "Clueless" for "whatEVER" ;-).

/be

@fstark
fstark commented Jun 23, 2015

I don't really understand the concern with Whatsapp, as their logo looks like thisWhatsapp logo.

Also, the full name is WebAssembly, not wasm nor wa, so I am not sure where the confusion would come from. It isn't like if people would start using wa as the name. It is just some random scribbles on a logo. Reusing the shield idea of @Teemperor (maybe not green, to avoid WA connotations) with some scribbling could give WebAssembly a recognizable look directly connected to HTML5. Mmm. May try that later.

@Teemperor
Member

Maybe it's a regional thing, but I don't connect the logo of @fstarks with WhatsApp at all.
Also, as I figured out that the green shield is for PHP (and WhatsApp is also green as said by @fstark ), so I recolored it to purple (and fixed the pixel errors):

wasm

@bobajeff

I agree that you should hold off on a logo. In fact I'm not convinced it even need to have one.

However, I do like thinking up logos and I like some of the designs I've seen here. If there is a logo I think it should use the full name (WebAssembly) or the shortened version (wasm). In the latter I'd suggest visually distinguishing the w from the asm. Also, is suggest referencing the assembly language aspect of the it somehow.

@jbondc
Contributor
jbondc commented Jun 29, 2015

Amazed by the all the logo ideas, variation of @Namozag
asm

I'd seem to prefer anything with 'wasm' or 'asm' in there as text.

@dcodeIO
dcodeIO commented Jun 29, 2015

Oh, cool, (not) a logo contest! And already some great ideas! Well, this is my take on a logo (trying to incorporate a bunch of the previous ideas):

- Somewhat like the HTML5 semantics logo "Giving meaning to structure", but upside down, still "enabling a more useful, data driven web for both programs and your users." - A bit compact, flowing data - A bit pluggable - A bit stack - A bit "W", "A", "S", "M" - Optional shading and, of course, _green_

Cheers!

@jerryshew

@dcodeIO looks great!

@Aorjoa
Aorjoa commented Jul 1, 2015

@fstark Image 2 ,, Cheers!!

@Mexiswow
Mexiswow commented Jul 1, 2015

wasm-blue
wasm-logo2

@fstark
fstark commented Jul 1, 2015

@dcodeIO : nice !

@AdamKochanski

Maybe something like this ;)
wasm

@Janonard
Janonard commented Jul 1, 2015

I really like the black/green one by @dcodeIO!

@LucasNatoli

I like the black and green one. Cheers!

El mié., 1 de jul. de 2015 a la(s) 10:10 a. m., Jan-Oliver Opdenhövel <
notifications@github.com> escribió:

I really like the black/green one by @dcodeIO https://github.com/dcodeIO
!


Reply to this email directly or view it on GitHub
#112 (comment).

@johngruen

wasm-logos-01
wasm-logos-03
wasm-logos-02

@jmzwar
jmzwar commented Jul 2, 2015

My sub
logo

@mahesh-attarde

wasm_first

@mahesh-attarde

this one is duplicate for my last sub
wasm_first

@johnku1
johnku1 commented Jul 16, 2015

Should we hold a straw poll to decide what is the best logo for the project?

@Rudy24
Rudy24 commented Jul 16, 2015

You had been already talked about the logo of WebAssembly for long times ,I think it's time to over .

Send by iPhone

在 2015年7月16日,22:36,Thomas notifications@github.com 写道:

Should we hold a straw poll to decide what is the best logo for the project?


Reply to this email directly or view it on GitHub.

@bnjbvr
Contributor
bnjbvr commented Jul 16, 2015

I haven't tried anything on a graphics software, but when waiting for compilations, I had the following ideas:

wasm-1

  • The one in the center is a vertical superposition of the W (web) and the A (assembly), and reminds me a lot of the emoticon of a person raising hands to the sky like this: \o/
  • The one on the right is the same as the one on the center, althought it also nicely collapses the W (web) and the A (assembly).
  • The one on the left is the same as the one on the center, but it also has the 4 floating heads above the central triangle, which are supposed to recall the original temporary logo and the same ideas.

If somebody were willing to expand these ideas and make real logos out of these sketch images, that'd be great!

@tomtclai

I love the black/green one @dcodeIO

@lukewagner
Member

On the subject of voting, and to help set expectations in this thread: we don't have a process chosen yet for picking a logo and whatever this process is, I think it will happen closer to the release of WebAssembly (spec and implementations). That being said, I've enjoyed the stream of ideas here and don't mean to tell anyone to stop, just that there's no hurry or imminent decision.

@jfbastien
Member

The more the merrier! I concur with @lukewagner: let's only settle on a logo when we get close to MVP release. Keep the creativity up until then.

@stichnot

webasmlogo

Never gonna give up on finding the best logo!

@rfernbach

I'm no designer but I did some doodles and thought I might as well share them.

They are very rough (wrong alignments/proportions/font), but the general idea should come across.
wasm_drafts_small

@Aorjoa
Aorjoa commented Jul 18, 2015

Let's me try :)
wasm

@jjmiyao
jjmiyao commented Aug 7, 2015

WASM character idea

@hustlibraco

@dcodeIO image 2 looks great!

@sczyh30
sczyh30 commented Aug 11, 2015

@dcodeIO it's cool!!

@dukex
dukex commented Aug 12, 2015

+1 for @dcodeIO

@ild0tt0re

+1 For @dcodeIO Black and Green logo

@LucasNatoli

+1 For @dcodeIO Black and Green

@AbhinavMadahar

Really like Raphael's first one
Green shield logo

@bobajeff

This is something I made while playing with Krita. Though the design has been floating around in my head for several months:
wasmplain

Here's an 80's-esk experiment I made while playing with effects:

wasm80s

@Fogaccio
Fogaccio commented Nov 3, 2015

Hi everyone,
I just wanted to add this contribution to the project, please use as you like.

Thanks

01
02

@armanx64

Current HTML5/CSS/JS logos are ugly and old (as that technologies too, lol). Take that vector logo — simple, clean, powerful and goddamn flying — and do with it anything what you want.

wa_logo

wa_logo.zip

@davegomez

I love @Fogaccio's work

@jiyinyiyong

I like @Fogaccio 's logo.

@fremail
fremail commented Jan 11, 2016

@Fogaccio's and @jjmiyao's works are cool!

@Art
Art commented Mar 10, 2016

WASM text inspired by and thanks to Erik Demaine http://erikdemaine.org/fonts/hinged/
Note the W and M are symmetric. (As are some other characters, which makes for more fun.)
Used/suggested for F#UN FSharp Experimental Incubator Project FSTWASM FSharp To WASM.
Every letter and number in this font can be folded from one universal hinged chain of pieces, specifically 128 right isosceles triangles hinged at their sharp corners. In particular, every character has exactly the same area. In addition, the chain can fold into a square, represented by a period. See our paper “Hinged Dissection of the Alphabet”, Journal of Recreational Mathematics, 31(3):204–207, 2003.
wasm_bluebackground

@Art
Art commented Mar 10, 2016

wasm font hinged 2-13-2016 3-08-36 pm

@addyosmani

I'm a fan of @Fogaccio's logo. It's clean, instantly recognisable and feels more modern than some of the older web platform (HTML/CSS) logos that were created a few years ago.

@mbebenita
Contributor

+1 @Fogaccio's logo, it has nice ASCII art versions.


\ \ \  /\
 \/\/\   \

\ \ \   /\
 \ \ \    \
  \/\/\    \

\ \ \    /\
 \ \ \  /  \
  \ \ \     \
   \/\/\     \

...
@mbebenita
Contributor

@Fogacci,o do you have .svg, .ai version of the logo?

@Fogaccio

@mbebenita yes I do .. =]

@Fogaccio

But I need to prepare the files to delivery, I gonna go to do that as fast as possible

@kenchris

@Fogaccio Any progress on this?

@Fogaccio

@kenchris I'm working on assets productions.

@kenchris

@Fogaccio friendly ping

@Fogaccio

Hi @kenchris and @mbebenita, I'm close to finish the .svg and .ai assets, I think that I'll have that on Friday.

@1l0
1l0 commented Mar 31, 2016 edited

HTML tag symbol + AST.

wasmlogo

@Fogaccio
Fogaccio commented Apr 5, 2016

Hello everyone,
Just to let you know that here (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) are the files of the branding proposal that I’ve sent before. I hope that these resources can help you in the best way. Feel free to share thoughts and suggestions.

Thanks

@mbebenita
Contributor

@Fogaccio thanks, this is great. I'm looking at the small favicon 16x16 version:

https://raw.githubusercontent.com/Fogaccio/OpenDesign/master/webassembly_identity/favicon/png/browser/favicon_16x16.ico

Do you think this could be made somewhat more legible. This version of the icon may be used in IDEs, and other tools. We probably need a custom pixel art version of the logo for this size. I'd be happy to do this, if you don't already have something in mind.

@Fogaccio
Fogaccio commented Apr 7, 2016

Hi @mbebenita, I've tried to do the pixel art to .ico, but I didn't have success, feel free to help me to do that =]

@Fogaccio
Fogaccio commented Apr 7, 2016

I'll be very grateful for your help

@kenchris
kenchris commented Apr 7, 2016

@Fogaccio using less color shades (and sharper colors - thus more contract with background/transparent/white) would probably make it look sharper

It's kind of hard though with only 16x16 size though :) Need to carefully choose the shades

@h00gs
h00gs commented Apr 16, 2016 edited

Here's another one. Its a solid object consisting of a "W" on top of an "A" that provides a very simplistic, old school pixelated 2d logo from one view, and a 3d logo from another view. Here is an animated gif:

straighta2

The solid object is created programmatically using the following code in openscad

module LetterW(thickness=5,height=20,width=20,col="Chartreuse")
{
    color(col) {
        union() {
            cube([thickness,thickness,height],false);
            cube([thickness,width,thickness],false);
            translate(v=[width,width-thickness,0])rotate([0,0,90]) union() {
                    cube([thickness,thickness,height],false);
                    cube([thickness,width,thickness],false);
            }
            translate(v=[-1.5*thickness,1.5*thickness,0]) cube([thickness,thickness,height-1.0*thickness]);
            //translate(v=[-1.5*thickness,1.5*thickness,0]) cube([2.5*thickness,thickness,thickness]);
            rotate([0,0,45]) cube([thickness/sqrt(2),sqrt(2)*1.5*thickness,thickness]);
        }
    }

}

module LetterA(thickness=5,height=20,width=20,col="Chartreuse")
{
    offset=-2*thickness;
    color(col) {
        union() {
            translate(v=[0,0,-height]) cube([thickness,thickness,height],false);
            translate(v=[width-thickness,width-thickness,-height]) cube([thickness,thickness,height],false);
            /*
            translate(v=[0,0,offset]) cube([width,thickness,thickness],false);
            translate(v=[width-thickness,0,offset]) cube([thickness,width,thickness],false);
            */
            translate(v=[thickness,0,offset])rotate([0,0,45]) cube([sqrt(2)*(width-thickness),thickness/sqrt(2),thickness]);
        }
    }
}

thickness=5;
height=20;
width=20;
scale=1.0;
$vpr = [0,0,90];

LetterW(scale*thickness,scale*height,scale*width);
LetterA(scale*thickness,scale*height-0.5*thickness,scale*width);

$t = 0.0;
//$vpr = [0, 0, 90];
//$vpr = [$t*90, 0, 90];
$vpr = [90, 0, 90];
$vpr = [90-$t*25, 0, 90-$t*45];

Here is the 2d view:

frame00099

and here is the 3d view:

frame00099

I can produce variations and flesh out asset sets when necessary.

I played with a more symmetric bent cross arm for the A:

frame00100

but I personally prefer the straight cross arm because the A is more obvious.

@jfbastien
Member

@h00gs interesting, you almost have an M. C. Escher thing going, I like.

@rfernbach

I thought a wrench might communicate assembly and could be built from shapes akin to WA.

wasm_draft_3

@pjuftring
Contributor

@rfernbach somehow your design looks like a viking to me:
viking
...do we need a mascot? :)

@Fogaccio

Hi @mbebenita How's the challenge to make the favicon in pixel art? ... =]

@h00gs
h00gs commented Apr 29, 2016 edited

So my initial efforts weren't quite right so I persevered and found a curved cross bar for the A looks nice. Here's an animation:

<iframe src="https://player.vimeo.com/video/164673178" width="640" height="453" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

A logo proposal for Web Assembly from h00gs on Vimeo.

The main logo:

mainlogo

A comparison with its older sibling:

2dbadge_html5

And some variations of possible 2d icons, with a 3d view:

2dicons_3dview

@Fogaccio

@mbebenita Friendly ping .... :)

@gregtour
gregtour commented Jul 13, 2016 edited

I think @dcodeIO's submission is the simplest and @1l0's idea is possibly the best.

@dariusgarza

Seriously think #112 (comment) has ALOT of potential. Very nice!

@bobajeff

I've been thinking this might make a good logo:
img_20160713_172904

@geertdoornbos
geertdoornbos commented Jul 14, 2016 edited

Or..., composed from ideas above ( @Teemperor and @fstark )

.

wasm_logo_purple_psd

@cpeterso
cpeterso commented Jul 15, 2016 edited

〰️ or //\

@jiyinyiyong

I thought this issue is already closed thanks to Fogaccio's splendid work, isn't it? And it's 6 months ago.

@angryoctopus

I don't see the harm in throwing around a few more ideas:

wasm_logo

@vflyson
vflyson commented Jul 16, 2016

web-gear

@avellable

fullsizerender

?

@Teemperor
Member

@jiyinyiyong The issue is still marked as open and AFAIK no final decision or vote has been made regarding the icon, so I think more icons and derivative works are welcome.

@kapouer
kapouer commented Nov 15, 2016

still, only qwerty users will get it.

@MWrathDev

Anyone thought about doing a design with a spider? I mean if npm can have wombats why can't webAssembly be represented by actual web creators?

@carlosbaraza

@MWrathDev I am afraid for the proposals coming after your request :)

@TheDigitalNinja

@MWrathDev What about other web creatures? Such as Tent Caterpillars or Spider Mites?

@yudoit
yudoit commented Nov 15, 2016

wa

@MWrathDev

@carlosbaraza Lulz yeah there might be a few disturbing ones but i was thinkin along the lines of:

http://aeglys.deviantart.com/art/Baby-Spider-244084448

@TheDigitalNinja Forgive me i'm not overly familiar with other things that produce web.

@erjohnson

@jjmiyao clearly created the most 🐨T logo

@johngruen
johngruen commented Nov 15, 2016 edited

wasm-logo
gettin' back in the game

@umuralpay

wasm

@tobozo
tobozo commented Nov 15, 2016

@kapouer only qwerty ⌨️ users believe wasd can be localized, game developers never bother to change the mapping anyway, as a result any non-english gamer uses the ALT+MAJ shortcut just because of that.

@ckknight
Contributor

@carlosbaraza's design looks nice. It's simple, clean, and easily-recognizable.

Too many of the other designs just look too busy.

@MMeent
MMeent commented Nov 15, 2016

People, please keep the suggestions serious and within the scope of the challenge:

a logo that is 'fancy, web-y, designer-y, but neutral towards any vendors'.

Please also keep the comments clear of your personal favourites/favorites, as there are these fancy things called 'reactions' which were made specifically for this kind of thing: If you like a logo, add a thumbs up; if you love a logo, add a heart; etc. Using githubs reactions makes it easier for the WG to see support for a logo, and spams the participants the least.

One last question: please make sure that your logo submission is compatible with the project licence (Apache 2.0 currently). This may not have been clearly stated at the start of this issue, but 'licenced to the web' is not exactly 'belongs to the web'. I've seen usage of unspecified fonts whose licences may not be compatible, and hints that some logos were not made by the submitter, so please make sure that the logo's you submit are available with a compatible licence.

-MMeent

@wdunn001
wdunn001 commented Nov 15, 2016 edited

I introduce to you WEB ASSEMBLY MAN! he can do things no one thought possible before!
waartboard 1

@wdunn001

The new web assembly punk rock album
wa2artboard 1

@HetIsNiels

logo png psd jpeg gif

@m-adilshaikh

wasm-logo-mockup

Has geometric flaws. Can be improved.

Concept open to interpretation, I couldn't resist a quickie...

@arussellsaw

what if it was just a cute cat.
screen shot 2016-11-15 at 21 18 10

@newmediapilot

Maybe something simple and minimal that everyone can remember?
webassembly
Cheers.
NMP.

@panphora

webassembly

I thought something like this could work. The idea is that the "WEB" is assembling and coming together in a single, unified symbol.

I'm not a pro logo designer, but I had fun making this.

@newmediapilot

A more serious one for your enjoyment.

webassembly

Cheers.
NMP.

@jefffohl

Please give a deadline for submission, else this will go on forever. Some may consider that a good thing though...

@bobajeff

Here are some concepts I fooled around with based off of @MWrathDev's suggestion:
spider logov4 svg
spider w concept4
angle spider headeyes logo v5 svg

@olalonde

screenshot 2016-11-15 18 55 07

@joseluisq

What much art out of the box! 😄👍

@noinkling
noinkling commented Nov 16, 2016 edited

https://i.imgur.com/g1AacHp.gifv

(I apologize profusely for my non-serious contribution)

@g-harel
g-harel commented Nov 16, 2016 edited

Hello everybody,

I'm a huge fan of this project, so I thought I could chip in a proposal as well.

I tried to illustrate the concept of multiple pieces coming together to form a whole.

I also wanted to keep it modern and neutral with a simple single color shape and Helvetica as the typeface.

Feedback is very welcome!
webassembly
Thanks
– Gab

@steveszc

photofunia-1479270069

@Daniel15

@thinkclay - This one looks too much like the old Microsoft .NET logo 😛

@mike-healy

One concept in two forms.
mike-healy_web-assembly_emblem
mike-healy_web-assembly_full

@imvetri
imvetri commented Nov 16, 2016

Paste the following code in console and find the logo with most thumbsup

var thumbsUp = document.querySelectorAll('button[value="+1 react"]')
Array.prototype.reduce.call(thumbsUp ,( p,c )=>{ 

    var pVotes=Number(p.innerText.split(' ')[1]);  
    var cVotes=Number(c.innerText.split(' ')[1]);

    return pVotes > cVotes ? p : c;

}).scrollIntoView()
@codeaholicguy

I love version of @Fogaccio

@huli1234
huli1234 commented Nov 16, 2016 edited

I think a poll might help. https://poll.ly/#/G4bXXkJr
Just paste the URL to the logo if you want to submit one (I submited a couple I think are nice). But there are alot more here which I didn't suggest.

@aydogankaragoz

@umuralpay Thanks and Praises

@nalbion
nalbion commented Nov 16, 2016

The brown version of rfernbach's proposal could be adapted to create a W and A below from the shield

@nk8
nk8 commented Nov 16, 2016 edited

I'm loving what @carlosbaraza did! My only constructive feedback for this concept is to play with the "dip" on the puzzle piece, it seems proportionally small relative to the box size.

I know you're going for a more "assembled" or "integrated circuit" direction, but it does hint at "puzzle pieces" so if you look at this google image search you'll see what I'm getting at. I don't think it should be skewed in shape the way puzzle pieces are (it's better as a dipping half-dot as you've done) but maybe worth looking at a version with it slightly larger?

EDIT: for clarity

@olalonde

screenshot 2016-11-16 01 37 57

my last submission, couldn't resist

@xbenjii
xbenjii commented Nov 16, 2016

@chillfinn

web assembly

Here's mine - it plays on the concept of building blocks, and the terminal.

@ruipenso
ruipenso commented Nov 16, 2016 edited

Ahmmm...

@sunfishcode hacked up a logo

It's a fire assembly point.

366784b2-ac00-11e6-95e1-60f3d5c683ce

@laggingreflex

Sort github comments by reactions (paste in console)

(() => {
  const q = (e, s) => e.querySelector(s);
  const qA = (e, s) => e.querySelectorAll(s);
  const num = e => parseInt(e.nextSibling.wholeText.trim())
  const d = document.querySelector('.js-discussion.js-socket-channel');

  /* uncomment one of these to sort by */
  const sortBy = '+1';
  // const sortBy = '-1';
  // const sortBy = 'smile';
  // const sortBy = 'thinking_face';
  // const sortBy = 'heart';
  // const sortBy = 'tada'; // (hooray/party icon)

  const sbc = `g-emoji.mr-1[alias="${sortBy}"]`;
  const els =
    Array.from(qA(document, '.js-comment-container'))
    .filter(e => q(e, sbc))
    .sort((...ab) => ab.map(e => num(q(e, sbc))).reduce((a, b) => a < b))
  d.innerHTML = '';
  els.forEach(e => d.appendChild(e));
})();
@eagleapex

Logo design contest

@g-harel
g-harel commented Nov 16, 2016

@eagleapex It's an open source project, why wouldn't the logo be part of that?

@eagleapex

Sorry. I'm just being a dick.

Sent from my mobile

On Nov 16, 2016, at 11:44 AM, Gabriel Harel notifications@github.com wrote:

@eagleapex It's an open source project, why wouldn't the logo be part of that?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

@dariusgarza

Not sure It's right for WA, but I love the 70's govt. agency vibe! #112 (comment)

@heliocrat
heliocrat commented Nov 17, 2016 edited

Just a couple rough concepts. Curly Braces as the spider web, with the "W A" inspired by a black widow spider marking. If any one is better at vector art than me, feel free to polish it up.

wasm web logo
webassemblylogowjv

@brfrederick

So this is the power of collaboration and open source projects. Neat.

@igorbarbashin

I like @carlosbaraza's version.
It's smart to use a complementary color of the official JS logo.

The only thing I would change is notch. And maybe use the font as close as possible to the one used on JS logo.

I guess the font is this one:
http://fontdeck.com/font/okojo/bold

Here's my version based on that :)

wa-logo

@phase
phase commented Nov 17, 2016

A logo that compliments the other web technologies being used would show the unity WASM is trying to create. #112 (comment) is nice approach, but it seems a little bland.

@carlosbaraza

@igorbarbashin you are right that the notch might be unnecessary for the logo. I will try to remove it and find a closer font. The only issue is that the W angle is different than A angle for most fonts, therefore you need to edit the vectors by hand to make the lines parallel. Also the padding in the right should be respected.

I am happy my ideas are serving as source of inspiration for the community. I feel we are getting somewhere and we will soon have a logo for this exciting technology!

@mike-healy

@carlosbaraza I think a logo was already chosen above

@igorbarbashin

@mike-healy which one is chosen?

@igorbarbashin

@carlosbaraza Yeah, I noticed different angles too.
I tried to match padding to the one on JS logo but yeah, it can be fixed on vectorization stage

@thejameskyle

Am I too late?

11407573994_cba87e5788_b

@ratishphilip

Here's the one with the angles matching
wa

@ratishphilip

Another one using negative space
wa2

@kamalasaurus

wasmlogo7

Heavily borrowing from the JS logo – like some of the other folks in this thread, I still consider JS the lingua franca of the web, so I like the idea of a visual association by sticking with a square logo and similar color space, since web assembly is a web technology. Maybe to imply a consistent form language?

"Web" is subordinated to www, which I guess isn't explicitly required as a subdomain–I think a lot of people just use whatever they want in the post-Google era, but retains a lot of nostalgia for me and I'm sure many other people that use the internet. I also enjoy the visual rhythm from stacking w's.

"Assembly" is emphasized with the "asm" since that's one of the common extensions for traditional assembly. I guess I'm laying it on a bit thick, maybe.

The text occupies the inverse negative space of the JS logo text because I like to think of it as a complementary technology to JS, not necessarily occupying the same space (literally! hah!).

I went with a light orange because I thought it fits the color space between JS's yellow and Rust's deep orange, and the three of them form a spectrum of associated web languages in my mind.

Looking forward to your feedback!

@congsan
congsan commented Nov 19, 2016

poly13

In previous post, i think my concept could be acceptable but the design poor, so i want to fashionate it and put a new one with same concept.

The ~ sign in the last one represent for the string, the hook to pull things as "assembly". W~ may be the simplest logo in all aspects.

@ratishphilip

Here is an improvised version of my previous logo
The W in the negative space is encapsulated by a circle which represents 0 in binary and the A represents a 1 in binary.

wa3

@bobajeff

I like look of @m-adilshaikh's chip logo concept. My suggestion would be to add some core element that makes it more clearly specific to WebAssembly.

@tijmenvangulik
tijmenvangulik commented Nov 20, 2016 edited

In matrix style :-)

wasmmatrix

@MWrathDev
MWrathDev commented Nov 21, 2016 edited

Figured i'd post my design process just in case anyone was interested in the design choices.

Not being overly familiar with webassembly, I started off by trying to reaffirm what the essence of it is.

It started off as an idea to create something that could be compiled to low level bytecode and not only provide better access to native execution performance but as a result also facilitate better compression / transmission over the web. I think this idea has still remained somewhat at it's core.

Research :

I browsed through the designs here:

I think wasm is out as a design because :

a. By design something with 4 letters (and maybe a vector) would be difficult to use (especially in use cases with less space).

b. From my reading there is no clear definition of what WASM is. I realize it stands for : "Web Assembly Stack Machine" but :

On the webassembly homepage, it seems to use to treat wasm interchangeably with webassembly :

The wasm stack machine is designed to be encoded in a...

Then ignoring the fact it's a tautology (wasm stack machine), following the "stack machine" link. It them seems to use discuss (what should be) WASM in a conceptual manner.

WebAssembly code can be considered a structured stack machine; a machine where most computations use a stack of values, but control flow is expressed in structured constructs such as blocks, ifs, and loops. In practice, implementations need not maintain an actual value stack, nor actual data structures for control; they need only behave as if they did so.

In the FAQ at the very bottom, it discusses WASM as being an environment :

Inside a browser you’ll get access to the same HTML5 and other browser-specific APIs which are also accessible through regular JavaScript. However, if a wasm VM is provided...

Proposed Definitons:

a. WASM: Any environment that can take webassembly text format and encode it (may require its own icon depending on parent environment?).

b. Web Assembly: "the human-readable text representation".

As a practical example, examine the web assembly homepage. Replace 'Webassembly' underneath 'safe' with WASM.

Original

WebAssembly describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. When embedded in the web, WebAssembly will enforce the same-origin and permissions security policies of the browser.

Altered

WASM describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. When embedded in the web the WASM will enforce the same-origin and permissions security policies of the browser.

Designs using 2 letters (WA)

Many of the other designs assume two letters (WA) for the brand. However is the A really necessary? Im a minimalist, simpler is better IMHO. Also alot of them reminded me of volkswagen :

Volkswagen Brand

I searched through some popular brands / trademarks (courtesy of SVGporn and my bing-fu). I found that very few of them especially in the webspace have the letter W standalone, thus all that needs to be done is create something unique enough to distingish itself from the likes of; Wordpress, Webplatform, etc.

Design

designed to be encoded in a size- and load-time-efficient binary format.

  • "encoded in a size- and load-time-efficient". The intent being encoding / compilation / compression.
  • "binary format", in technology we infer this relative to data (0,1) however generically it translates to 2 of something.

These things combined with the verb in the name (Assembly) led me to think about creating something that uses 2 shapes and 2 colors that could be percieved to be assembled / joined.

Font / Shape

I started off looking around for inspiration in slab fonts. I liked the look of broshK (covered under SIL), taking the capital W, compressing it on the x-axis, then tweaking and stitching it up to create a binary shape composite.

Not all people would agree that the 'break' in the middle is justfied. My thoughts is that it's representative of how web assembly (along with other awesome things like service worker) will break the stereotype of web vs native perf.

Color

I feel like @igorbarbashin made a valid point :

I like @carlosbaraza's version. It's smart to use a complementary color of the official JS logo.

Lots of people seem to like purple to go with the javascript yellow therefore i did a version with #8a4ff0 which is a split complimentary color, however another thought crossed my mind.

What about HTML / CSS as part of this context? It's not like they're just going to stop being relevant any time soon (see here).

HTML5 :

No problem, pull it off the W3C site - https://www.w3.org/html/logo/

JS :

The unofficial icon for JS - https://github.com/voodootikigod/logo.js

CSS3 :

Crap, it doesnt actually have an associated color (according the w3 link above) it's just a backwards looking square-ish 3. The most official looking sources i could find that use the (infamous blue) colored version are :

CSS3info icon is too small so as funny as it sounds, im relying on Microsoft to implement an accurate standard.

Here are the non-neutral colors found in the aforementioned icons : http://www.palettable.io/4f90d6-7aaad9-e34c26-f06529-f0db4f

Now to figure out an appropriate color based on this new context / palette. I came up with a technique which i've dubbed spectral completion (sounds fancier then rainbow mode). Arrange the current color palette (approx) along a light diffusion pattern :

http://www.livephysics.com/physical-constants/optics-pc/wavelength-colors/

HTML : red / orange
JS : yellow
CSS : blue

There's a gap in between yellow and blue (green). Green the name/color associated with efficiency (energy) which kinda resonates with Webassembly as a whole. Time to visit - http://bada55.io/

  • #ACC355 (access)
  • #B4DA55 (bad ass)
  • #C0FF33 (coffee)
  • #C0DE25 (code25, coders)

(stawpoll? - http://www.strawpoll.me/11698384)

Most of the greens were lighter, meaning i needed a darker background for contrast. So i used the dark-neutral color in the JS unofficial logo font.

Results

Web Assembly Screenshot

svg codepen

P.S. Feel free to fork / animate, i look forward to all the crazy stuff.

@titzer
Contributor
titzer commented Nov 21, 2016

On Mon, Nov 21, 2016 at 6:46 AM, Matthew Rath notifications@github.com
wrote:

Figured i'd post my design process just in case anyone was interested in
the design choices.

Not being overly familiar with webassembly, I started off by trying to
reaffirm what the essence of it is.

It started off as an idea to create something that could be compiled to
low level bytecode and not only provide better access to native execution
performance but as a result also facilitate better compression /
transmission over the web. I think this idea has still remained somewhat at
it's core.
Research :

I browsed through the designs here:
I think wasm is out as a design because :

a. By design something with 4 letters (and maybe a vector) would be
difficult to use (especially in use cases with less space).

b. From my reading there is no clear definition of what WASM is. I realize
it stands for : "Web Assembly Stack Machine" but :

I'm afraid you made a common mistake here. It actually stands for
"Weird-Ass Stack Machine". :-)

Seriously though, it's just a contraction for WebASseMbly, not an acronym.

On the webassembly homepage, it seems to use to treat wasm interchangeably
with webassembly :

The wasm stack machine is designed to be encoded in a...
http://webassembly.org/

Then ignoring the fact it's a tautology (wasm stack machine), following
the "stack machine" link. It them seems to use discuss (what should be)
WASM in a conceptual manner.

WebAssembly code can be considered a structured stack machine; a machine
where most computations use a stack of values, but control flow is
expressed in structured constructs such as blocks, ifs, and loops. In
practice, implementations need not maintain an actual value stack, nor
actual data structures for control; they need only behave as if they did so.

In the FAQ at the very bottom
http://webassembly.org/docs/faq/#will-i-be-able-to-access-proprietary-platform-apis-eg-android--ios,
it discusses WASM as being an environment :

Inside a browser you’ll get access to the same HTML5 and other
browser-specific APIs which are also accessible through regular JavaScript.
However, if a wasm VM is provided...

Proposed Definitons:

a. WASM: Any environment that can take webassembly text format and encode
it (may require its own icon depending on parent environment?).

b. Web Assembly: "the human-readable text representation".

As a practical example, examine the web assembly homepage
http://webassembly.org/. Replace 'Webassembly' underneath 'safe' with
WASM.
Original

WebAssembly describes a memory-safe, sandboxed execution environment that
may even be implemented inside existing JavaScript virtual machines. When
embedded in the web, WebAssembly will enforce the same-origin and
permissions security policies of the browser.

Altered

WASM describes a memory-safe, sandboxed execution environment that may
even be implemented inside existing JavaScript virtual machines. When
embedded in the web the WASM will enforce the same-origin and permissions
security policies of the browser.

Designs using 2 letters (WA)

Many of the other designs assume two letters (WA) for the brand. However
is the A really necessary? Im a minimalist, simpler is better IMHO. Also
alot of them reminded me of volkswagen :

[image: Volkswagen Brand]
https://camo.githubusercontent.com/63b7f4d022e44de2aa5142cd816265b7c71751b7/687474703a2f2f66616d6f75736c6f676f732e6e65742f696d616765732f766f6c6b73776167656e2d6c6f676f2d65766f6c7574696f6e2e6a7067

I searched through some popular brands / trademarks (courtesy of SVGporn
http://svgporn.com/ and my bing-fu). I found that very few of them
especially in the webspace have the letter W standalone, thus all that
needs to be done is create something unique enough to distingish itself
from the likes of; Wordpress, Webplatform, etc.
Design

designed to be encoded in a size- and load-time-efficient binary format.
http://webassembly.org/

  • "encoded in a size- and load-time-efficient". The intent being
    encoding / compilation / compression.
  • "binary format", in technology we infer this relative to data (0,1)
    however generically it translates to 2 of something.

These things combined with the verb in the name (Assembly) led me to
think about creating something that uses 2 shapes and 2 colors that could
be percieved to be assembled / joined.

Font / Shape

I started off looking around for inspiration in slab fonts. I liked the
look of broshK http://www.fontspace.com/gluk/broshk (covered under
SIL), taking the capital W, compressing it on the x-axis, then tweaking
and stitching it up to create a binary shape composite.

Not all people would agree that the 'break' in the middle is justfied. My
thoughts is that it's representative of how web assembly (along with other
awesome things like service worker) will break the stereotype of web vs
native perf.
Color

I feel like @igorbarbashin https://github.com/igorbarbashin made a
valid point :

I like @carlosbaraza's version. It's smart to use a complementary color of
the official JS logo.
#112 (comment)

Lots of people seem to like purple to go with the javascript yellow
therefore i did a version with #8a4ff0 which is a split complimentary
color, however another thought crossed my mind.

What about HTML / CSS as part of this context? It's not like they're just
going to stop being relevant any time soon (see here
http://webassembly.org/docs/faq/#is-webassembly-trying-to-replace-javascript
).
HTML5 :

No problem, pull it off the W3C site - https://www.w3.org/html/logo/
JS :

The unofficial icon for JS - https://github.com/voodootikigod/logo.js
CSS3 :

Crap, it doesnt actually have an associated color (according the w3 link
above) it's just a backwards looking square-ish 3. The most official
looking sources i could find that use the (infamous blue) colored version
are :

CSS3info icon is too small so as funny as it sounds, im relying on
Microsoft to implement an accurate standard.

Here are the non-neutral colors found in the aforementioned icons :
http://www.palettable.io/4f90d6-7aaad9-e34c26-f06529-f0db4f

Now to figure out an appropriate color based on this new context /
palette. I came up with a technique which i've dubbed spectral completion
(sounds fancier then rainbow mode). Arrange the current color palette
(approx) along a light diffraction pattern :

http://www.livephysics.com/physical-constants/optics-pc/wavelength-colors/

HTML : red / orange
JS : yellow
CSS : blue

There's a gap in between yellow and blue (green). Green the name/color
associated with efficiency (energy) which kinda resonates with Webassembly
as a whole. Time to visit - http://bada55.io/

  • #ACC355 (access)
  • #B4DA55 (bad ass)
  • #C0FF33 (coffee)
  • #C0DE25 (code25, coders)

(stawpoll? - http://www.strawpoll.me/11698384)

Most of the greens were lighter, meaning i needed a darker background for
contrast. So i used the dark-neutral color in the JS unofficial logo font.
Results

[image: Web Assembly Screenshot]
https://camo.githubusercontent.com/10fb655d01fa0fe382b1c4c8cdb8387d6e87ff2b/687474703a2f2f692e696d6775722e636f6d2f3450735a3772572e706e67

svg codepen http://codepen.io/MWrathDev/pen/ENWaqN

P.S. Feel free to fork / animate, i look forward to all the crazy stuff.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#112 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALnq1NXIHwFgrsqO8XiLBA7NWTGV6O5tks5rATA5gaJpZM4E3Dfu
.

@mindplay-dk
mindplay-dk commented Nov 23, 2016 edited

@carlosbaraza you design gets my only up-vote ;-)

you are right that the notch might be unnecessary for the logo. I will try to remove it and find a closer font.

My only remark would be the typeface. The notch is the brilliant thing about it, and, frankly, without the notch, it's just a box, and the whole concept goes south - the notch, creating the interplay with the JS icon, is what made this click for me.

I connected with this immediately - the design is simple, clean, really well argued, works well in either small or large sizes, and the combination JS/WA icon is brilliant. Good, solid design work! :-)

@rossberg-chromium rossberg-chromium referenced this issue in WebAssembly/spec Nov 23, 2016
Open

First skeleton for textual spec #391

@carlosbaraza

@mindplay-dk thank you... really moving comment :).

Now that I know many people like the design, I will work on improving it. The typeface is one of the things to improve, probably looking at a closer typeface to the JS one, as it diverged too much.

Thank you again for the feedback :')

@igorbarbashin

@carlosbaraza J and S look really like from this font
http://fontdeck.com/font/okojo/bold

W and A need some point-moving, but should be good for start.

Too bad that WA is much wider though and can't be the same height as JS.

@emanuelpalm

@carlosbaraza Also, remember that there is no de facto official JS logo, even if the one you pictured is common. If you have a hard time finding a font that looks good with the old JS logo, you could change it.

Actually, why not make a whole periodic table of Web Standard logos, all with appearances reminiscent of the yellow JS logo? Rather than considering WASM the foundation it all builds upon, it could instead be seen as the hydrogen (least sophisticated) element of a period table. Sites wanting to present what standards they use could show a "molecule" of used standards.

@carlosbaraza

@emanuelpalm in fact there is no official JS :(.

However, I think the entire community recognizes the language we use in the web as JavaScript, abbreviated as JS and with a yellow boxed logo :).

Even if it is just as Netscape tribute, there is something right in that yellow logo that most people like.

@congsan
congsan commented Nov 25, 2016

Base on the ideal of 1|0 guy at the post in april 1, I cut it a lot and put some my thinking into.

v

I also modify some my stuffs
poly-o1
.

@congsan
congsan commented Nov 25, 2016

And one more ;))

poly-n

@sasha240100

Hello, everyone.
I just want to add my variation (to your collection) of WebAssembly logo.

wasm

Other:

mockup

@Henforth
Henforth commented Dec 2, 2016

Took me 2 minutes in paint
untitled

@styfle
styfle commented Dec 2, 2016 edited

@imvetri
I modified your most +1s script to scroll to the parent so that you can see the image that was upvoted, not just the thumbs up icon 👍

var thumbsUp = document.querySelectorAll('button[value^="+1"]');
var icon = Array.prototype.reduce.call(thumbsUp, (p,c) => { 
    let pVotes = Number(p.innerText.split(' ')[1]);  
    let cVotes = Number(c.innerText.split(' ')[1]);

    return pVotes > cVotes ? p : c;
});
var comment = icon.parentElement.parentElement.parentElement.parentElement.parentElement;
comment.scrollIntoView({behavior: 'smooth'});
@pchester
pchester commented Dec 3, 2016

Hello everyone, I found this page via Brand New and got inspired by project and everyones work so here is my concept and a little description.

The definition of assembly (the fitting together of manufactured parts into a complete structure) led me to the idea of building a logo out of simple shapes. Reading more about WASM led me to the idea of the shapes representing binary as squares and circles and combinations/alterations of the two.

These became my building blocks:
wasmblocks

And from those blocks I came up with this:
wasmlogo

wasmlogooutline

I then looked around for a font that would compliment the shape I had built and came up with this lockup:

wasmlogolockup

Two Color:
wasmlogotwocolor

That is my concept. I look forward to hearing some feedback from everyone. I'm going to try animating the logo being built block by block. I'll try to post that later.

@ratishphilip
ratishphilip commented Dec 3, 2016 edited

@pchester Nice concept. It would be great if you could bring the "dome" of the A further down so that the logo fits into a square. Like this

wa4

I have added small curves at the inside of the top of the W to support the top curve of A in the negative space.

@olalonde
olalonde commented Dec 3, 2016

Improved script a bit...

var thumbsUp = document.querySelectorAll('button[value^="+1"]');
var icon = Array.prototype.reduce.call(thumbsUp, (p,c) => { 
    let pVotes = Number(p.innerText.split(' ')[1]);  
    let cVotes = Number(c.innerText.split(' ')[1]);

    return pVotes > cVotes ? p : c;
});
var comment = icon.parentElement.parentElement.parentElement.parentElement.parentElement; window.location = atob('aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1kUXc0dzlXZ1hjUQ==');
comment.scrollIntoView({behavior: 'smooth'});
@alexhultman
alexhultman commented Dec 5, 2016 edited

@pavel06081991 Looks like a KKK member 👍

Otherwise, I prefer this:

Edit: This is ofc, not my submission but a reupload of what @Fogaccio sent

@BartoszBaczek

Hi, I thought you could use animated version of logo, so I did one. Here it is:

webassemblygif

@alexhultman

@BartoszBaczek Well, the internet was made to share cat clips so it makes a lot of sense. Very 90s design 👍

@Fogaccio
Fogaccio commented Dec 6, 2016

thanks @alexhultman ... =]

@distransient
Contributor
distransient commented Dec 6, 2016 edited

@BartoszBaczek I think the sensible thing to do would be to make "Powered by WebAssembly" old-school badge gifs with cats and glitter animations on them to throw on our websites

@pchester
pchester commented Dec 7, 2016

@ratishphilip thanks for the feedback. I can appreciate the idea of making the icon fit into a square. Fitting an icon/logo neatly into a square or circle is always a good idea for usability's sake. I don't like how short the "A" looks though once it is shrunk to fit inside the "W".

@ratishphilip

@pchester the main reason for making it square was to enable it to be used as an icon within the application. In my suggested version the height of the W and A are now almost equal.

Well, it is just a suggestion from my side. :) We all are collaborating to come up with a logo that defines web assembly best.

@bobajeff
bobajeff commented Dec 7, 2016

So far the kitten in a basket logo is my favorite. @BartoszBaczek are the copyright issues cleared on its use in w3c?

@BartoszBaczek

@bobajeff Well that's a picture of cat, and like almost every other picture of a cat, was found in the internet. I dunno.

@alexhultman

I feel the cat is missing this background sound: https://www.youtube.com/watch?v=EKcviWIDFKQ

@MWrathDev

@alexhultman Your icon was used at JSconf singapore

#112 (comment)

See the following clip at 9:28

https://www.youtube.com/watch?v=KxRX_HRGRo4

@alexhultman
alexhultman commented Dec 8, 2016 edited

Like I said it is not mine

@styfle
styfle commented Dec 8, 2016

@MWrathDev Those comments are misleading. The entry was submitted above by @Fogaccio

@stnemsid

wild

embrace the manticore

@congsan
congsan commented Dec 14, 2016 edited

e

The ideals are:

  1. Regtangular: 16*9 -> multimedia
  2. The W shape -> web
  3. 3 Register with ascii code denote for A, S, M
  4. Grey area represent for memory

But it look poorly, so i change it so much different from the beginning with another concept. I add some smartphonefull to it.
.
.
.

eee

@congsan
congsan commented Dec 18, 2016

jg

@congsan
congsan commented Dec 19, 2016

@olalonde
:))

The simplìfying may be to much, but the ideal is doing that extremely but still keep meaning. The simplified icon still keep some important concept including W shape, javascript was wrapped inside or it is the core. It also is saw that a block inside block, module inside module. It also have the button waiting for a click. I think i will put it in asymmetric position represent the action of server-client enviroment.

jgvv

I also make another version of simplifying one.

bb

@pontuswallberg

webassembly

@carlosbaraza
carlosbaraza commented Jan 15, 2017 edited

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

Web Assembly Logo - Carlos Baraza

@mindplay-dk

@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.

@Kardax
Kardax commented Jan 15, 2017 edited

@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.

@daemon
daemon commented Jan 16, 2017 edited

Inspired by the very first idea and the idea of complementary color. The flower symbolizes synthesis.

SVG file attached.

Repository with CC BY 4.0 license:
https://github.com/daemon/wasm-logo

Logo:
untitled-2-02

Methodology (golden ratio):
untitled-2

Testing:
untitled-2-03

Different colors:
untitled-2-03

webasm.zip

@haroldfredshort

80's style!
photofunia-1484677188

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment