Display the Hacker Logo

Question

You may have heard of the "Hacker Logo", also called the "Hacker Emblem". It looks like this:

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, the shortest answer in each language wins!

Please include a screenshot of the output of your program in your answer.

Answer 1

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 2

Mathematica, 62 bytes

Grid[{{,a=██,},{,,a},{a,a,a}},Frame->All,FrameStyle->Gray]

Mathematica, 71 bytes

Grid[{{,l=Graphics@Disk[],},{,,l},{l,l,l}},Frame->All,FrameStyle->Gray]

Answer 3

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.);}

See it in action: http://glslsandbox.com/e#40717.2

Answer 4

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

Showing the pixel grid:

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 5

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 6

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:

Answer 7

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:

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 8

PNG, 105 100 bytes

   (i.e. this image file)

Considering that HTML and other non-programming languages are allowed, 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 (-o7 -zm1-9 -strip all) and pngwolf. I also experimented with zopflipng, 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 (79)/(99) ≈ 78% of its cell.

Non-standard PNG, 88 bytes

As pointed out by @anatolyg, there is some golfing potential by removing the IEND chunk (12 bytes). Technically, IEND is required by the standard. 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 9

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

Answer 10

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

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:

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

Answer 12

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:

Edit: Now has grey gridlines.

Answer 13

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:

Answer 14

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

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 15

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

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 16

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

Answer 17

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! (It takes a few seconds.)

Output from the online interpreter:

Answer 18

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!

Answer 19

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}

Answer 20

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
Thanks pydude for reminding me about inequalities!
If needed, I can crop the exported Desmos PNG to remove the axis/unneeded graph space

Answer 21

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:

Answer 22

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);.

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 23

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.

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 24

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 25

R, 119 114 111 bytes

(Thans to @JayCe for saving me 3 bytes)

Not shorter than the other R solution, 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.

Answer 26

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

-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 27

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.

Answer 28

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

Answer 29

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:

Answer 30

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's comment made on Mark Thomas's Ruby solution.

Sample output: