[Question]
  [
You may have heard of the "Hacker Logo", also called the "Hacker Emblem". It looks like this:
[![hacker logo](https://i.stack.imgur.com/RlIUZ.png)](http://3.bp.blogspot.com/_-4G7w0aTpbg/Ss6YxNNOJ6I/AAAAAAAAAXA/rSmdVWvSZqM/s400/Symbol+Hacker.jpg)
This is a pattern from a mathematical simulation called the Game of Life. The glider is the simplest Life pattern that moves, and the most instantly recognizable of all Life patterns.
# The challenge
The challenge is pretty simple: Display the hacker logo. This is defined as:
* A 3x3 grid with a border, a white background and gray gridlines.
* Five black dots arranged in the GoL glider pattern.
* Nothing else.
# The rules
* The black dots must fill **40%**-**80%** of their individual grid-boxes.
* You will display the emblem with graphical output but **no ASCII art**.
* The output must be at least **30x30 pixels**.
* The output must only have the colors **gray, black and white**.
* Each grid-box in the grid will be the same size. The grid will be a **regular 3x3 square**.
* You may not pull the logo from the internet or your filesystem.
* Your program will display the logo on an empty screen/window. If it terminates it must do so normally.
* Note that "dots" does not necessarily mean "circles". A "dot" is a single geometric shape centered in the middle of the grid-box with one surface. For example, while a circle or square will qualify as a dot, two triangles or a checkerboard will not.
# The winner
As this is [code-golf](/questions/tagged/code-golf "show questions tagged 'code-golf'"), the shortest answer in each language wins!
Please include a screenshot of the output of your program in your answer.
  
[Answer]
# CSS+HTML, ~~56+84=140 bytes~~ 52+84=136 bytes
Saved 4 bytes by incorporating suggestions from the comments.
```
td{border:1px solid#888;line-height:.4;font-size:3em
```
```
<table cellspacing=0><tr><td><td>‚Ä¢<td><tr><td><td><td>‚Ä¢<tr><td>‚Ä¢<td>‚Ä¢<td>‚Ä¢
```
This uses the UTF-8 character `‚Ä¢` which is 2 bytes long and takes advantage of the graciousness of HTML syntax.
[Answer]
# Mathematica, 62 bytes
```
Grid[{{,a=‚ñà‚ñà,},{,,a},{a,a,a}},Frame->All,FrameStyle->Gray]
```
[![enter image description here](https://i.stack.imgur.com/wBDct.jpg)](https://i.stack.imgur.com/wBDct.jpg)
# Mathematica, 71 bytes
```
Grid[{{,l=Graphics@Disk[],},{,,l},{l,l,l}},Frame->All,FrameStyle->Gray]
```
  
[![enter image description here](https://i.stack.imgur.com/vo4q8.jpg)](https://i.stack.imgur.com/vo4q8.jpg)
[Answer]
# GLSL (fragment shader), ~~278~~ ~~235~~ 256 bytes
```
precision highp float;void main(){vec2 a=gl_FragCoord.xy/20.-.2;ivec2 b=ivec2(a);a-=vec2(b)+.5;if(b.x>2||b.y>2)discard;gl_FragColor=a.x<-.5||a.y<-.5||a.x>.3||a.y>.3?vec4(.5,.5,.5,1.):length(a+.1)<.4&&(b.x+b.y-3)*b.y==0?vec4(0.,0.,0.,1.):vec4(1.,1.,1.,1.);}
```
[![enter image description here](https://i.stack.imgur.com/gKrwI.png)](https://i.stack.imgur.com/gKrwI.png)
See it in action: <http://glslsandbox.com/e#40717.2>
[Answer]
# [Python 2](https://docs.python.org/2/), ~~¬†169 140¬†~~ 137 bytes
```
from turtle import*
up()
shape("square")
color("gray",[1]*3)
i=9
while i:i-=1;goto(20-i/3*20,i%3*20-20);stamp();209&2**i or dot(15,0,0,0)
```
Actual size, 61 by 61, plotted within a much larger canvas of 300 by 400:
[![actual size](https://i.stack.imgur.com/HHWOq.png)](https://i.stack.imgur.com/HHWOq.png)
Showing the pixel grid:
[![pixel grid version](https://i.stack.imgur.com/2JFBS.png)](https://i.stack.imgur.com/2JFBS.png)
The dots use 177 pixels within the range of 40%-80% whether considering the 19 by 19 white fill (144.4-288.8) or the 21 by 21 including both borders (176.4-352.8).
*Note:* the program terminates and closes the canvas window as soon as the drawing has been finished, to allow manual window closure append the line `done()`.
`turtle` is a Python package developed for introductory graphical programming. A pen starts at `x,y=0,0` in the middle of a 300 by 400 pixel canvas (by default), `up` lifts the pen, `goto` moves the pen, `shape` sets the shape of the pen to a named shape (`"square"` is a predefined shape with a default pixel-width of 21), `color` sets the colour, where two parameters set stroke (with default a width of 1) and fill; a byte is saved by using the `(r,g,b)` tuple option to replace `"white"` with `[1,1,1]` using the list multiplication `[1]*3`. Finally `dot` draws a dot with the given width in pixels and colour. The dot's default width value is too small to qualify, as is `9` so I made it an aesthetic and qualifying `15`. The dot's colour could be `"black"` but the unpacked `(r,g,b)` tuple of `0,0,0` is shorter by two bytes.
The pen must move away from any dot at the end since otherwise the gray/white pen hides the dot.
The grid is traversed using a div (`/`) and mod (`%`) of `i` starting at `8` (`i` is initialised to `9` but is decremented at the beginning of the `while` loop) and working down to `0`, offsetting the results of `2,1,0` to `-1,0,1` using `(1-...)` and scaling each up to the grid size using a factor of 20 (note that `20-i/3*20` is actually a byte less than `20*(1-i/3)`, same goes for `%`). This produces the order [bottom-left, centre-left, top-left, bottom-middle, centre-middle, top-middle, bottom-right, centre-right, top-right], and requires a "`hasDot`" evaluation of `[1,0,0,1,0,1,1,1,0]`, which is `302` in binary so may be accessed by inspecting the `i`th power of two component of `302` with using a bitwise-and, `302&2**i`. This can then be inverted to `209&2**1` enabling the use of `or` rather than `and`.
[Answer]
# HTML & CSS, 155 bytes
Turns out HTML is ***really*** forgiving about syntax errors.
*1 byte saved thanks to @Octopus* ¬∑ *1 byte saved thanks to @Downgoat* ¬∑ *2 bytes saved thanks to @StephenS*
*2 bytes saved thanks to @Ryan* ¬∑ *3 bytes saved thanks to @styfle* ¬∑ *4 bytes saved thanks to @Ferrybig*
*13 bytes saved thanks to @SteveBennett*
```
p{height:33px;width:33px;border-radius:50%;background:#000;margin:0
```
```
<table cellspacing=0 border=1><td><td><p><td><tr><td><td><td><p><tr><td><p><td><p><td><p
```
[Answer]
# [Applesoft BASIC](https://en.wikipedia.org/wiki/Applesoft_BASIC), ~~479~~ ~~476~~ ~~516~~ ~~515~~ ~~483~~ 482 bytes
-32 by using unreadable variable names :P  
-1 because Apple decided to be magical and let me use an implicit/nonexistent GOTO
Here is my own (very beatable) program for an example of an output that does not use circles:
```
1GR:POKE49234,0:COLOR=15:FORI=0TO39:VLIN0,47ATI:NEXT:COLOR=5:S=21:W=S:H=27:X=INT((40-W)/2):Y=INT((48-H)/2):D=INT(W/3):DX=D:C=Y+H:G=X+W:FORI=0TO3:VLINY,C ATX+I*D:NEXT:D=INT(H/3):FORI=0TO3:HLINX,G ATY+I*D:NEXT:YH=INT(D/2):Z=Y+H-YH:XH=INT(DX/2):COLOR=0:FORI=0TO2:B=Z:A=X+XH+I*DX:GOSUB5:NEXT:B=B-D:GOSUB5:B=B-D:A=A-DX:GOSUB5:K=PEEK(-16384):IFK<128THEN2:K=PEEK(-16368):TEXT:HOME:END 
5VLINB+2,B-3ATA:VLINB+2,B-3ATA-1:VLINB+2,B-3ATA+1:VLINB+2,B-3ATA+2:VLINB,B-1ATA-1:VLINB,B-1ATA+2:RETURN
```
Output:
[![](https://i.stack.imgur.com/Hqlde.png)](https://i.stack.imgur.com/Hqlde.png)
[Answer]
# IA-32 machine code, ~~81~~ 80 bytes
Hexdump:
```
60 8b f9 b8 50 35 20 20 ab b8 32 35 36 20 ab ab
ab fe 4f fe 33 c9 66 49 51 8a c1 d4 55 50 8a c5
d4 55 5b b2 80 84 c0 74 1f 84 db 74 1b b2 ff 2c
10 3c 35 77 13 93 2c 10 3c 35 77 0c 8d 0c 58 8a
cd b0 e4 d2 e0 79 01 42 92 aa 59 e2 cb aa 61 c3
```
It's a `fastcall` function called `doit` that returns the image in PGM format in the supplied buffer. Usage:
```
char buf[256 * 256 + 256];
doit(buf);
FILE* f = fopen("k.pgm", "wb");
fwrite(buf, 1, sizeof buf, f);
fclose(f);
```
Output:
[![hacker's logo](https://i.stack.imgur.com/Ak6MU.png)](https://i.stack.imgur.com/Ak6MU.png)
I used 256x256 resolution because ~~it's cool~~ it lets me split the pixel's index in `ecx` automatically into coordinates `y` in `ch` and `x` in `cl`. Also, the PGM file format requires the number 255 in the image header.
The inner squares are 54x54 (41% of the cell by area).
Source code (can be compiled by Visual Studio):
```
    pushad;                 // save all registers
    mov edi, ecx;           // edi is now the pointer to output
    mov eax, '  5P';        // PGM file header
    stosd;                  // store it
    mov eax, ' 652';        // the number 256 and a space
    stosd;                  // store the width
    stosd;                  // store the height
    stosd;                  // store maximum brightness
    dec byte ptr [edi-2];   // fix maximum brightness to 255
    xor ecx, ecx;           // initialize the counter of pixels
    dec cx;                 // to 65535
myloop:
    push ecx;
    mov al, cl;             // al = cl = x coordinate in the image
    _emit 0xd4;             // divide by 85
    _emit 85;               // ah = x cell number, al = x coordinate in cell
    push eax;
    mov al, ch;             // al = ch = y coordinate in the image
    _emit 0xd4;             // divide by 85
    _emit 85;               // ah = y cell number, al = y coordinate in cell
    pop ebx;                // bh = x cell number, bl = x coordinate in cell
    mov dl, 0x80;           // gray pixel value
    test al, al             // is cell boundary (y)?
    je output1;
    test bl, bl;            // is cell boundary (x)?
    je output1;
    mov dl, 255;            // white pixel value
    sub al, 16;
    cmp al, 53;
    ja output1;             // if outside the inner square, output white
    xchg eax, ebx;          // exchange the registers to shorten following code
    sub al, 16;
    cmp al, 53;
    ja output1;             // if outside the inner square, output white
    lea ecx, [ebx * 2 + eax]; // cell index = y * 2 + x
    mov cl, ch;
    mov al, 0xe4;           // load the bitmap for the glider pattern
    shl al, cl;             // shift the needed but into SF
    jns output1;            // the bit was 0? - output white
    inc edx;                // the bit was 1? - change to black
output1:
    xchg eax, edx;
    stosb;                  // output the byte
    pop ecx;
    loop myloop;
    stosb;                  // output an additional gray pixel
    popad;
    ret;
```
The cell pattern
```
0 1 0
0 0 1
1 1 1
```
can be represented by an "optimized" bitmap of 7 bits.
The bits are indexed by the expression `y * 2 + x`, where `(x,y)` is the location of the cell. This expression gives the same index to 2 pairs of cells. It's a lucky coincidence that the bit values there are the same.
[Answer]
# PNG, ~~105~~ 100 bytes
![PNG image](https://i.stack.imgur.com/UkWtc.png) ¬†¬† (i.e. this image file)
Considering that HTML and other [non-programming languages are allowed](https://codegolf.meta.stackexchange.com/a/10426/8478),
I was curious to see how much I could golf a plain browser-displayable image, to serve as a baseline comparison.
The result is compressed with the open-source tools [optipng](http://optipng.sourceforge.net) (`-o7 -zm1-9 -strip all`)
and [pngwolf](https://github.com/jibsen/pngwolf-zopfli).
I also experimented with [zopflipng](https://github.com/google/zopfli), but the results were bigger.
Other closed-source compression tools might be able to shave off a couple more bytes.
Image data in base64:
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA
fCAAAAAA6xUnlAAAAK0lEQVR42mM4gB8wHPgPAwf+M0DAf4TYqDwp
4Ydp0qg8ofBDqMXKGpXHDwDDq0qBspApTgAAAABJRU5ErkJggg==
```
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA
    fCAAAAAA6xUnlAAAAK0lEQVR42mM4gB8wHPgPAwf+M0DAf4TYqDwp
    4Ydp0qg8ofBDqMXKGpXHDwDDq0qBspApTgAAAABJRU5ErkJggg==">
```
**Edit** I made the dots touch the cell top and bottom, to cause more repetitiveness in the pixel pattern and thus improve the compression ratio.
But don't worry, a dot still only fills (7*9)/(9*9) ‚âà 78% of its cell.
  
# Non-standard PNG, 88 bytes
As pointed out by [@anatolyg](https://codegolf.stackexchange.com/users/25315),
there is some golfing potential by removing the IEND chunk (12 bytes).
Technically, IEND is [required by the standard](https://www.w3.org/TR/PNG/#11Critical-chunks).
However, each PNG chunk includes its own size and checksum information.
It is therefore not absolutely necessary to have an end-marker.
And indeed, all browsers I tested can display the image without issue.
Unfortunately (or fortunately), this non-standard image is rejected by imgur,
so I cannot actually upload it. This is the base64 encoding:
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA
fCAAAAAA6xUnlAAAAK0lEQVR42mM4gB8wHPgPAwf+M0DAf4TYqDwp
4Ydp0qg8ofBDqMXKGpXHDwDDq0qBspApTg==
```
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA
fCAAAAAA6xUnlAAAAK0lEQVR42mM4gB8wHPgPAwf+M0DAf4TYqDwp
4Ydp0qg8ofBDqMXKGpXHDwDDq0qBspApTg==">
```
[Answer]
## R (~~130~~ ~~119~~ 113 bytes)
```
plot(c(2,4,6,4,6),c(2,2,2,6,4),an=F,ax=F,xli=(l=c(1,7)),yli=l,xaxs="i",yaxs="i",pch=16,cex=19);grid(3,lt=1);box()
```
[![enter image description here](https://i.stack.imgur.com/rExSZ.png)](https://i.stack.imgur.com/rExSZ.png)
[Answer]
## Python 2.7, ~~214~~ ~~311~~ 309 bytes
```
from matplotlib.pyplot import*
f,x=subplots()
j=(0,0),(1,0),(2,0),(1,2),(2,1)
for i in j:x.add_artist(Circle((i),.4,color='k'))     
x.tick_params(labelbottom='off',labelleft='off')
for o in x.spines.values():o.set_edgecolor('gray')
for s in 'xy':exec"x.set_"+s+"ticks((.5,1.5,2.5));"+s+"lim(-.5,2.5);"
grid()
```
This is my first attempt here at code golf, so I'm sure this can be improved upon. I would have liked to not established the limits, but it appears that matplotlib can't detect that I plotted circles where I did. Without setting xlim() and ylim() it only shows the bottom two circles. 
Output:
[![Edit](https://i.stack.imgur.com/Y7MxR.png)](https://i.stack.imgur.com/Y7MxR.png)
Edit:Fixed the color of the borders and removed the tick numbers. I must say matplotlib is very densely worded, and not too friendly with changing axis colors.
Shaved off 3 bytes thanks to @DJMcMayhem
Edit:Took off two bytes by setting my ticks as a tuple inside of set\_ticks functions.
[Answer]
# Bash + ImageMagick, ~~233~~ 226 characters
```
convert xc: +antialias -resize 31 -draw "stroke gray fill none ${r=rectangle} 0,0 10,30$r 20,0 30,30$r 0,0 30,10$r 0,20 30,30stroke #000 fill #000 ${c=circle} 15,5 15,8$c 25,15 25,18$c 5,25 5,28$c 15,25 15,28$c 25,25 25,28" x:
```
Sample output:
![Glider drawn with Bash and ImageMagick](https://i.stack.imgur.com/4mIUi.png)
### Bash + ImageMagick, 215 characters
```
convert xc: -resize 31 -draw "stroke gray fill none ${r=rectangle} 0,0 10,30$r 20,0 30,30$r 0,0 30,10$r 0,20 30,30stroke #000 fill #000 ${c=circle} 15,5 15,8$c 25,15 25,18$c 5,25 5,28$c 15,25 15,28$c 25,25 25,28" x:
```
The question owner not answered yet the [anti-aliasing question](https://codegolf.stackexchange.com/questions/123797/display-the-hacker-logo/124152#comment304123_123797) and some other solutions also have additional gray shades added by the anti-aliasing, so for now this shorter one looks also acceptable.
Sample output:
![Glider drawn with Bash and ImageMagick - with anti-aliasing](https://i.stack.imgur.com/WuBSX.png)
[Answer]
# Ruby, 144 166 164 148 144 bytes
```
require'ruby2d'
set background:'grey'
c=482;g=2,13,24;d=0
g.map{|y|g.map{|x|Square.new(x,y,9);Square.new(x+2,y+2,5,"black")if c[d]>0;d+=1}}
show
```
Output:
[![output](https://i.stack.imgur.com/Jhspj.png)](https://i.stack.imgur.com/Jhspj.png)
Edit: Now has grey gridlines. 
[Answer]
# Tikz, ~~193~~ ~~175~~ 170 bytes
```
\documentclass[tikz]{standalone}\begin{document}\tikz{\def\a{)rectangle(}\def~{)circle(1)(}\draw(4,6\a2,0)(0,\a6,6)(0,2\a6,4);\fill(1,1~3,1~5,1~5,3~3,5~,)}\end{document}
```
Here is the output:
[![Output](https://i.stack.imgur.com/XAn6R.png)](https://i.stack.imgur.com/XAn6R.png)
[Answer]
# [Octave](https://www.gnu.org/software/octave/), ~~127~~ 124 bytes
Removed 3 bytes thanks to Luis. `grid` is sufficient (instead of `grid on`).
```
spy([0,1,0;0,0,1;1,1,1],'.k',300),set(gca,'XTick',.5:4,'XTickLabel','','YTick',.5:4,'YTickLabel',''),axis(.5+[0,3,0,3]),grid
```
Outputs (after saving):
Note that the output shows grey grid lines in the plot window. They turn black when saving it (for some reason).
[![enter image description here](https://i.stack.imgur.com/HLuA1.jpg)](https://i.stack.imgur.com/HLuA1.jpg)
Well, that was long and messy! Had to go through **a lot** of modifications to make this adhere to the specs. 
Explanation and hopefully some golfing coming up...
[Answer]
# Processing, 212 198 bytes
```
background(-1);noFill();stroke(99);rect(0,0,99,99);rect(0,33,99,33);rect(33,0,33,99);fill(0);int f=25;ellipse(15,83,f,f);ellipse(50,83,f,f);ellipse(83,83,f,f);ellipse(83,50,f,f);ellipse(50,15,f,f);
```
Basically, we are using simple Processing to draw a white Background, then setting the transparency of the rectangles used for the grid and drawing their strokes in gray. We continue by defining the rectangle, setting the fill value again to fill the circles black and defining fives circles.
Voil√†! 
[![enter image description here](https://i.stack.imgur.com/Il7lE.png)](https://i.stack.imgur.com/Il7lE.png)
You could add 
```
strokeWidth(2); 
```
or more to see the color of the strokes better.
(That's my first Code-Golf, I hope I did everything right.)
EDIT: Thanks to Kritixi Lithos! Removed the newlines, changed to int f=25 and used -1 in background(float)
[Answer]
# SmileBASIC, 125 bytes
```
GCLS-1GCOLOR #GRAY
GBOX.,8,30,38GBOX 10,8,20,38GBOX.,18,30,28G.,1G 1,2G-1,3G.,3G 1,3DEF G X,Y
GPUTCHR X*10+12,Y*10,58081,.END
```
58081 (U+E2E1, which is in the "Private Use Area" block) is the character code for a circle symbol. Putting it in a string would work too, but since it is encoded as 3 bytes in UTF-8, it would be the same length (and not show up correctly here).
[![markdown is awful](https://kland.smilebasicsource.com/i/xnmnr.png)](https://kland.smilebasicsource.com/i/xnmnr.png)
[Answer]
# [MATL](https://github.com/lmendo/MATL), ~~74~~ ~~69~~ ~~68~~ ~~64~~ 62 bytes
```
4:6B&f,.5+w]'k.'5Y08W5$XG7lZG1$3ZG1tZG4:"@th1Kh'k'3$XG1Mbw3$XG
```
Try it at [**MATL Online!**](https://matl.io/?code=4%3A6B%26f%2C.5%2Bw%5D%27k.%275Y08W5%24XG7lZG1%243ZG1tZG4%3A%22%40th1Kh%27k%273%24XG1Mbw3%24XG&inputs=&version=20.0.0) (It takes a few seconds.)
Output from the online interpreter:
[![enter image description here](https://i.stack.imgur.com/5XQd2.png)](https://i.stack.imgur.com/5XQd2.png)
[Answer]
## Processing, 134 bytes
Inspired by @Zep, here's my Processing one-liner (and also my first code golf):
```
stroke(127);for(int i=0;i<9;i++){int x=i%3*30;int y=i/3*30;fill(255);rect(x+5,y+5,30,30);if(i==1||i>4){fill(0);ellipse(x+20,y+20,23,23);}};
```
Thanks for @Kritixi Lithos for his brilliant tips on shaving a few bytes off!
[![glider in Processing](https://i.stack.imgur.com/ORrJm.png)](https://i.stack.imgur.com/ORrJm.png)
[Answer]
# LaTeX + Tikz, 155 bytes
```
\documentclass[tikz]{standalone}\begin{document}\tikz{\draw(0,0)grid(3,3);\foreach\x/\y in{0/0,1/0,2/0,2/1,1/2}\fill(\x+.5,\y+.5)circle(.5);}\end{document}
```
[![result](https://i.stack.imgur.com/4PkN4.png)](https://i.stack.imgur.com/4PkN4.png)
[Answer]
# Desmos, 90 characters/bytes
Nobody saw that one coming.
  
```
(x-3)^2+(y-1)^2<=1
(x-1)^2+(y-1)^2<=1
(x-5)^2+(y-1)^2<=1
(x-5)^2+(y-3)^2<=1
(x-3)^2+(y-5)^2<=1
```
[Graph link](https://www.desmos.com/calculator/lxzizsxfcp)
  
Thanks pydude for reminding me about inequalities!
  
If needed, I can crop the exported Desmos PNG to remove the axis/unneeded graph space
  
  
[![Desmos exported PNG](https://i.stack.imgur.com/q33f7.png)](https://i.stack.imgur.com/q33f7.png)
  
  
  
  
  
[![Desmos graph](https://i.stack.imgur.com/Nb24u.png)](https://i.stack.imgur.com/Nb24u.png)
[Answer]
# C#, 333 bytes
```
using System.Drawing;_=>{var b=new Bitmap(31,31);var g=Graphics.FromImage(b);g.FillRectangle(Brushes.White,0,0,31,31);for(int x=0,y;x<3;++x)for(y=0;y<3;++y){g.DrawRectangle(Pens.Gray,x*10,y*10,10,10);if(x==1&y<1|x>1&y==1|y>1)g.FillEllipse(Brushes.Black,x*10+1,y*10+1,8,8);}b.Save("t.png");System.Diagnostics.Process.Start("t.png");};
```
Full/Formatted version:
```
using System.Drawing;
Action<int> a = _ =>
{
    var b = new Bitmap(31, 31);
    var g = Graphics.FromImage(b);
    g.FillRectangle(Brushes.White, 0, 0, 31, 31);
    for (int x = 0, y; x < 3; ++x)
        for (y = 0; y < 3; ++y)
        {
            g.DrawRectangle(Pens.Gray, x * 10, y * 10, 10, 10);
            if (x == 1 & y < 1 | x > 1 & y == 1 | y > 1)
                g.FillEllipse(Brushes.Black, x * 10 + 1, y * 10 + 1, 8, 8);
        }
    b.Save("t.png");
    System.Diagnostics.Process.Start("t.png");
};
```
Idea is simple we create a graphics object from the image and use that to make the image all white. Then loop over each square of the image drawing the bounding rectangle. If it is one of the locations for a dot we draw that too. Lastly we save the image to file and let windows decide how to open it, in my case it opens with Windows Photo Viewer.
Using a `Process` to show the image and saving to file is a lot shorter than creating a windows forms or WPF app because of all the different classes and extra fluff needed to create them.
Output:
[![Output](https://i.stack.imgur.com/iSEFM.png)](https://i.stack.imgur.com/iSEFM.png)
[Answer]
# PHP, 221+2 bytes
```
<?imagefill($i=imagecreatetruecolor(31,31),0,0,~0);function q($i,$x,$y,$f){imagerectangle($i,$x*=10,$y*=10,$x+10,$y+10,5e6);$f?:imagefilledellipse($i,$x+5,$y+5,8,8,0);}for($p=16;$p--;)q($i,$p&3,$p>>2,53>>$p&1);imagepng($i);
```
Save to file; call in browser. Should your browser display gibberish,  
insert `header("Content-Type:image-png");` before `imagepng($i);`.
[![output](https://i.stack.imgur.com/Pj3Hn.png)](https://i.stack.imgur.com/Pj3Hn.png) The dots aren¬¥t very round; that¬¥s due to the small proportions.
**breakdown**
```
function q($i,$x,$y,$f){        # function to draw quadrant:
    imagerectangle($i,$x*=10,$y*=10,$x+10,$y+10,5e6);   # draw lines in 0x4c4b40
    $f?:imagefilledellipse($i,$x+5,$y+5,8,8,0);         # if bit not set, draw dot
}
imagefill($i=
    imagecreatetruecolor(31,31) # create image
    ,0,0,~0);                   # fill with 0xffffff (white)
for($p=16;$p--;)q($i,           # loop through positions, call function
    $p&3,                           # $x=lower two bits
    $p>>2,                          # $y=upper two bits
    53>>$p&1                        # $f=one bit from %0000 0000 0011 0101
);                                      # (reversed inverted bit mask for dots)
imagepng($i);                   # output image
```
I think that `0x4c4b40` qualifies as approximated gray. If not, add four bytes.
[Answer]
# R 313 236 bytes
```
l=c(1,7)
bmp('r',400,400)
plot(x=c(4,6,2,4,6),c(6,4,2,2,2),cex=14,pch=19,xlim=l,ylim=l,xlab='',ylab='',xaxs='i',yaxs='i',axes=F)
a=function(s,...){axis(s,labels=F,tck=1, col="gray",lwd=9,...)}
a(1,xaxp=c(l,3))
a(2,yaxp=c(l,3))
dev.off()
```
Revised Code, based mostly on comments from @user2390246 saved 77 bytes. Much appreciate the help.
Also, want to add a call-out to the shorter R solution by @mschilli. It shows an elegant way of addressing the problem of the R graphical defaults.
# Output
Goes to a file names "r". Omitting and extension saved me four bytes. But then I had to edit the file extension back to "bmp" to get it to upload. So maybe I should not get credit for those four bytes.
[![The Hacker Logo](https://i.stack.imgur.com/fxVCY.png)](https://i.stack.imgur.com/fxVCY.png)
# Commentary
I thought to myself, "That graphic's nothing but a simple graph with five dots. Should be a simple matter to implement in a language with robust data graphics capabilities. Let's try it in R." But then I had to spend on the order of 80% of the bytes just working around R's graphic defaults.
Kinda the wrong tool for the job....
I could not find a less verbose way of guaranteeing the size and aspect ratio of the graphic than by calling the bmp constructor and then dev.off(). The combination accounts for 25 bytes. If your R session is set up right, you might get a graphic that looks more or less correct without spending those bytes, but it's not reliable or consistent.
[Answer]
# TI-BASIC, ~~218~~ ~~140~~ 137 bytes
Note: this byte count is a bit inflated. The program only uses 85 tokens, but that's saved in 137 bytes. Also, if you're using a non-color calculator, you could save another 4 tokens because you don't have to specify the color (which is blue by default), but I don't know if their screens are large enough for this challenge because I don't own one.
prgmHACKER (138 bytes, 86 tokens):
```
{0,1,2,1,2}‚ÜíL1
{0,0,0,2,1}‚ÜíL2
.3‚ÜíR
For(I,0,5
L‚ÇÅ(I)+.5‚ÜíA
L‚ÇÇ(I)+.5‚ÜíB
For(N,0,R,dX
‚àö(R¬≤-N¬≤
Line(A+N,B-Ans,A+N,B+Ans,BLACK
Line(A-N,B-Ans,A-N,B+Ans,BLACK
End
End
```
For proper display, this program requires that Xmin = Ymin = 0, Xmax = Ymax = 3, Xscl = Yscl = 1. dX also needs to be properly set, but the calculator does that for you when you set any other window variable. I couldn't see how much space these variables used in RAM.
Furthermore, the format settings should be { RectGC, CoordOff, GridLine, GridColor:MEDGRAY, Axes:OFF, ExprOff, BorderColor:1, Background:OFF } but these are toggled values and don't consume any extra space depending on the setting.
[Answer]
# R, ~~119~~ ~~114~~ 111 bytes
(Thans to [@JayCe](https://codegolf.stackexchange.com/users/80010) for saving me 3 bytes)
Not shorter than the [other R solution](https://codegolf.stackexchange.com/a/123925/6741), but a completely different approach:
```
layout(matrix(c(1,9,2:8),3,,T))
par(mar=0*1:4)
for(i in 1:9){frame();if(i>4)points(.5,.5,,19,cex=29);box(fg=8)}
```
Uses a layout in which the 4 first plots are the empty cells, and the 5 others the ones with dots in them.
[![Glider](https://i.stack.imgur.com/OJJNN.png)](https://i.stack.imgur.com/OJJNN.png)
[Answer]
# Excel VBA, 180 bytes
An anonymous VBE Immediate window function that takes no input and outputs to the default worksheet object (`Sheet1`).
```
Cells.RowHeight=48:Cells.Interior.Color=-1:[B2:D4].Borders.Color=7434613:For Each s In[{21,32,13,23,33}]:Sheet1.Shapes.AddShape(9,48*(s\10)+4,Mid(s,2)*48+4,40,40).ShapeStyle=8:Next
```
**Commented Version**
```
Cells.RowHeight=48                      ''  Make the Cells square
Cells.Interior.Color=-1                 ''  Remove the default grid
[B2:D4].Borders.Color=7434613           ''  Create the 3x3 gray grid at range `B2:D4`
For Each s In [{21,32,13,23,33}]        ''  Assign and iterate over a list of where
                                        ''  to place the dots; This list is a range that 
                                        ''  is coerced into a numeric array
        
    Sheet1.Shapes.AddShape(         _   ''  Add a shape to the Sheet1 object
                9,                  _   ''  An Oval (msoShapeOval)
                48*(s\10)+4,        _   ''  At the calculated value from the left
                Mid(s,2)*48+4,      _   ''  At the calculated value from the top
                40,                 _   ''  that is 40 units wide
                40                  _   ''  and is 40 units tall
                ).ShapeStyle=8          ''  and is black filled with a black outline
Next                                    ''  repeat to end of list
```
**Output**
[![Hacker Logo](https://i.stack.imgur.com/J2Bpe.png)](https://i.stack.imgur.com/J2Bpe.png)
-6 bytes for using `[{21,32,13,23,33}]` over  `Split("21 32 13 23 33")`
-2 bytes for using `Mid(s,2)` over `Right(s,1)`
-3 bytes for using `(s\10)` over `Left(s,1)`
[Answer]
# Octave ~~107~~ ~~94~~ 103 bytes
```
scatter([1:3,3,2],[1,1,1:3],1e5,zeros(5,3),'.');axis off;a=[1,7]/2;for i=.5:3.5;line(a,i);line(i,a);end
```
or 
```
plot([1:3,3,2],[1,1,1:3],'k.','markersize',250);axis off;a=[1,7]/2;for i=.5:3.5;line(a,i);line(i,a);end
```
both solutions are 103 bytes.
![](https://i.stack.imgur.com/CpKbR.png)
[Answer]
# gnuplot, ~~158~~ 156 bytes
```
se si ra-1
se xti 2
se yti 2
se st l 9 lc"gray"lt 1
se gr xt ls 9 yt ls 9
se bor ls 9
uns k
se form""
p'-'w cir fc"black"fs s
3 5 1
5 3 1
1 1 1
3 1 1
5 1 1
```
Because the radii are the same, I tried the following:
```
[... first eight lines same as above ...]
p'-'u 1:2:(1) w cir fc"black"fs s
3 5
5 3
1 1
3 1
5 1
```
But that lead to the same byte count.
Ungolfed with comments:
```
set size ratio -1                                     # make it a square.
set xtics 2                                           # vertical lines every 2 units
set ytics 2                                           # horizontal lines every 2 units
set style line 9 linecolor rgb "gray" linetype 1      # define line type 9 as solid gray
set grid xtics linestyle 9 ytics linestyle 9          # make internal lines of type 9
set border linestyle 9                                # make outside lines of type 9
unset key                                             # no legend please
set format ""                                         # no numbers next to axes please
plot '-' with circle fillcolor rgb "black" fill solid # plot black circles
3 5 1                                                 # at these locations
5 3 1
1 1 1
3 1 1
5 1 1
end
```
[![](https://i.stack.imgur.com/UVVh4.png)](https://i.stack.imgur.com/UVVh4.png)
[Answer]
## Apple Swift (iOS - CoreGraphics/QuartzCore) - 832 Bytes
I drew the shape entirely using Quartz for an Apple iOS device. Unfortunatly this isn't a particularly size mindful language so the result is quite large, but this is as small as I can get it.
```
UIGraphicsBeginImageContext(CGSize(width:60,height:60));let c=UIGraphicsGetCurrentContext()!;UIColor.lightGray.setStroke();c.addRect(CGRect(x:0,y:0,width:60,height:60));c.move(to: CGPoint(x:20,y:0));c.addLine(to: CGPoint(x:20,y:60));c.move(to: CGPoint(x:40,y:0));c.addLine(to: CGPoint(x:40,y:60));c.move(to: CGPoint(x:0,y:20));c.addLine(to: CGPoint(x:60,y:20));c.move(to: CGPoint(x:0,y:40));c.addLine(to: CGPoint(x:60, y:40));c.strokePath();UIColor.black.setFill();c.addEllipse(in:CGRect(x:22,y:2,width:16,height:16));c.addEllipse(in:CGRect(x:42,y:22,width:16,height:16));c.addEllipse(in:CGRect(x:2,y:42,width:16,height:16));c.addEllipse(in:CGRect(x:22,y:42,width:16,height:16));c.addEllipse(in:CGRect(x:42,y:42,width:16,height:16));c.fillPath();let i=UIGraphicsGetImageFromCurrentImageContext();sub.addSubview(UIImageView(image:i))
```
A more readable version for anyone that is interested:
```
    UIGraphicsBeginImageContext(CGSize(width: 60, height: 60))
    let c = UIGraphicsGetCurrentContext()!
    
    UIColor.lightGray.setStroke()
    c.addRect(CGRect(x: 0, y: 0, width: 60, height: 60))
    c.move(to: CGPoint(x: 20, y: 0))
    c.addLine(to: CGPoint(x: 20, y: 60))
    c.move(to: CGPoint(x: 40, y: 0))
    c.addLine(to: CGPoint(x: 40, y: 60))
    c.move(to: CGPoint(x: 0, y: 20))
    c.addLine(to: CGPoint(x: 60, y: 20))
    c.move(to: CGPoint(x: 0, y: 40))
    c.addLine(to: CGPoint(x: 60, y: 40))
    c.strokePath()
    
    UIColor.black.setFill()
    c.addEllipse(in: CGRect(x: 22, y: 2, width: 16, height: 16))
    c.addEllipse(in: CGRect(x: 42, y: 22, width: 16, height: 16))
    c.addEllipse(in: CGRect(x: 2, y: 42, width: 16, height: 16))
    c.addEllipse(in: CGRect(x: 22, y: 42, width: 16, height: 16))
    c.addEllipse(in: CGRect(x: 42, y: 42, width: 16, height: 16))
    c.fillPath()
    
    let i = UIGraphicsGetImageFromCurrentImageContext()
    sub.addSubview(UIImageView(image: i))
```
Here is the output produced in the iOS Simulator:
[![Output](https://i.stack.imgur.com/W4LNm.png)](https://i.stack.imgur.com/W4LNm.png)
[Answer]
# Ruby with Shoes, 118 characters
```
Shoes.app{9.times{|i|
stroke gray
fill white
rect x=i%3*w=10,y=i/3*w,w,w
stroke fill black
oval x+2,y+2,7if 482[i]>0}}
```
Bit checking borrowed from [RJHunter](https://codegolf.stackexchange.com/users/14775/rjhunter)'s [comment](https://codegolf.stackexchange.com/questions/123797/display-the-hacker-logo#comment304648_123827) made on [Mark Thomas](https://codegolf.stackexchange.com/users/3743/mark-thomas)'s [Ruby solution](https://codegolf.stackexchange.com/a/123827).
Sample output:
![Glider drawn with Ruby with Shoes](https://i.stack.imgur.com/Hm5xT.png)
]