In 2015 the Portland International Airport began the replacement of their iconic carpet. I want you to write a program to draw their old carpet in as few bytes as possible.

The carpet:

One tile


  • Here is a link to a scalable pdf image of one tile. Your output should match the relative dimensions and placement of that image.

  • All colors in your final image should be within 15 of every RGB value in the specified image. These are listed below for your convenience.

                Red   Green Blue
    Teal:       0,    168,  142
    Magenta:    168,  108,  185
    Orange:     247,  58,   58
    Light Blue: 90,   166,  216
    Dark Blue:  0,    77,   117
  • Your output must be at least 150x150 pixels and should be square. If you choose to output in a scalable format like a vector image you should match the image exactly.

  • You may output the image in any preexisting image format.

  • This is so you should aim to minimize the number of bytes in your code.

  • \$\begingroup\$ Inspired by Reddit? \$\endgroup\$
    – Hexaholic
    Commented Feb 12, 2017 at 11:42
  • \$\begingroup\$ @Hexaholic I don't think so I was hitting random on wikipedia and I hit the page. However I may have also seen it on reddit before hand. \$\endgroup\$
    – Wheat Wizard
    Commented Feb 12, 2017 at 18:07
  • 2
    \$\begingroup\$ Does it have to be a two-dimensional image or could it be something like a model viewed from a specific angle? \$\endgroup\$
    – devRicher
    Commented Feb 13, 2017 at 8:17
  • \$\begingroup\$ I revisited this problem after 2 years of abstinence from code golf. Could you elaborate on the ratio of a) size of squares vs. size of spaces inbetween squares, and b) size of square vs. size of "border", i.e. distance from the outermost square to the border of the whole tile? I'd appreciate gathering this info for modifying my code to fit the exact sepcs of your challenge, @TaylorAlexRaine. Thx! \$\endgroup\$
    – Joe85AC
    Commented Aug 7, 2022 at 18:28

13 Answers 13


Tikz, 725 693 681 671 bytes

Some significant improvements can be made to this answer. If you would like to make major golfs then you should post your own answer with your modified version. For minor improvements that I just missed, and don't require large explanation, feel free to comment them. I would like to reward major improvements, and I will definitely upvote any answer that beats this.

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz[line width=20,every node/.style={minimum size=20}]{\definecolor{t}{RGB}{0,168,142}\definecolor{m}{RGB}{168,99,185}\definecolor{o}{RGB}{247,58,58}\definecolor{b}{RGB}{90,166,216}\definecolor{d}{RGB}{40,77,117}\fill[t](-7.5,-7.5)rectangle(7.5,7.5);\draw(-1,0)node[fill=o]{};\foreach\x in{1,...,7}{\draw(-\x,-1)node[fill=m]{};\draw(0,\x)node[fill=b]{};}\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}\draw[d](.65,0)--(7.35,0);\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);}\end{document}

Try it Online!


A good deal of the code is a wrapper:


This is a slight variation on the standard Tikz wrapper in that it also has the line \usepackage{xcolor} so that we can create the colors properly.

The first thing that is done is line width=20,every node/.style={minimum size=20}] which sets the lines and nodes to be the proper size.

Once that is done we define the colors we will be using for the various parts of the image:


Now that everything is set up we paint the background to our canvas teal:


(I wont include an image of this because it is just a teal square, but I will be including images of each other step)

The first node we add is the orange node just left of the center of the canvas.


An Orange at Sea

Now we will draw the light blue and magenta nodes. There are 7 blue nodes and 4 blue nodes, but we can draw extra nodes that will be covered up by lines later on so we will draw 7 of each.

\foreach\x in{1,...,7}{

Forked Paths

Now we will draw all the groups of 3 dots using a single \foreach loop

\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}

Scattered dots

Now we draw the right line. This line will be a simple line with offsets of .35 in each direction to match the size of a node.



Now we must draw in the dark blue lines and squares on the x-axis. We will draw them with one line using a custom dash pattern.

This pattern is [dash pattern=on20off8.5on162.5off8.5] This creates a square with a long solid tail. Our line will start from the bottom and will not quite cover 2 cycles of the pattern.

\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);


And now we are done.

  • \$\begingroup\$ Can you use numbers to represent RGB colours in Tikz, instead of typing the RGB offsets? \$\endgroup\$
    – Yytsi
    Commented Feb 12, 2017 at 14:51
  • \$\begingroup\$ @TuukkaX I think so but I couldn't figure it out. If you know how I would be thankful to be enlightened. \$\endgroup\$
    – Wheat Wizard
    Commented Feb 12, 2017 at 14:53
  • \$\begingroup\$ I don't know Tikz at all, so can't help with that :( However, if I understood your rule about "within 15 of every RGB" right, you can change 108 to 99, since the error is under 15. \$\endgroup\$
    – Yytsi
    Commented Feb 12, 2017 at 14:54
  • \$\begingroup\$ Using \definecolor with the HTML specification (rather than RGB) allows you to specify colors using hex. \$\endgroup\$ Commented Apr 18, 2017 at 19:59
  • 1
    \$\begingroup\$ @AdHocGarfHunter Thank you for pointing me to the right thing to do. I may now comment :-) Please have a look at my five easy improvements to your solution: You can (a) refrain from loading xcolor, (b) use \definecolorset and do that before you start \tikz{} OR define dark blue in the right manner (0 instead of 40 for the R-value), (c) add t, to the general \tikz-options in favour of leaving out [t] after your \fill-command, (d) use {1,2,3} instead of {1,...,3} in your second \foreach-loop, (e) leave out the last ;. \$\endgroup\$
    – Joe85AC
    Commented Jun 2, 2020 at 12:21

Pure HTML, 873 bytes

<table width=152 height=152 bgcolor=#0a8><tr><td colspan=7><td bgcolor=#5AD><tr><td><td bgcolor=#057><td colspan=5><td bgcolor=#5AD><tr><td><td><td bgcolor=#057><td colspan=4><td bgcolor=#5AD><tr><td><td><td><td bgcolor=#057><td><td><td><td bgcolor=#5AD><tr><td colspan=7><td bgcolor=#057><td><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td bgcolor=#057><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><td bgcolor=#057><td colspan=7 bgcolor=#057><tr><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td rowspan=6 bgcolor=#057><tr><td><tr><td><tr><td colspan=11><td bgcolor=#057><tr><td colspan=12><td bgcolor=#057><tr><td colspan=13><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057>

HTML + CSS, 625 bytes

<table width=152 height=152 bgcolor=#0A8><tr><td colspan=7><td id=l><tr><td><th><td colspan=5><td id=l><tr><td><td><th><td colspan=4><td id=l><tr><td><td><td><th><td><td><td><td id=l><tr><td colspan=7><th><td><td><th><tr><td colspan=7><th><td><th><tr><td colspan=7><th><th><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><th><th colspan=7><tr id=m><td><td><td><td><td><td><td><th rowspan=6><tr><td><tr><td><tr><td colspan=11><th><tr><td colspan=12><th><tr><td colspan=13><th><tr><td colspan=7><th>


literal PNG file, 283, 234 227 bytes

EDIT: Using online image compression service https://compress-or-die.com/, this went down another 7 bytes.

albn@alexhij:~/tmp$ ls -l carpet3.png
-rw-r--r-- 1 albn albn 227 15. Feb 12:01 carpet3.png
albn@alexhij:~/tmp$ base64 carpet3.png 


The 227 bytes are the actual size of the binary file carpet.png. When encoded in base64, as displayed in the quoted block above, it is a few bytes longer (308 bytes). Encapsulating that in an html snippet that renders the image rightaway will add another few bytes:

HTML, 414, 343, 336 bytes

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3OjpapthlS7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQTSw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wGMbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII

Edit: I removed the quotes and closing > as Shaggy suggested. Also compressed the image down another 17, 24 bytes

  • 2
    \$\begingroup\$ I don't think a literal file is considered a valid programming language here on code-golf. It is up to the OP whether this is valid or not. \$\endgroup\$
    – sporkl
    Commented Apr 26, 2017 at 13:31
  • 2
    \$\begingroup\$ You may be right, but even the description of the tag kolmogorov-complexity on codegolf.stackexchange.com/tags/kolmogorov-complexity/info mentions a complex string, which shortest representation might be to print it literally. If a literal string is considered the "worst case solution" to a string based code-golf, a literal image file could be considered a "worst case solution" to an image based code-golf. Edit: I only posted the file, because I was surprised that it was actually shorter than the other solutions posted earlier. (after removing the optional tIME chunk from the file) \$\endgroup\$
    – Sunday
    Commented Apr 26, 2017 at 13:35
  • \$\begingroup\$ If its up to me I'm fine with it. \$\endgroup\$
    – Wheat Wizard
    Commented Apr 26, 2017 at 14:41
  • 2
    \$\begingroup\$ With a bit of compression, you could get that down. Also, drop the quotation marks, any trailing = and the closing >. Here's a 366 byte version I was working on before I saw your answer: <img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII \$\endgroup\$
    – Shaggy
    Commented Apr 26, 2017 at 16:34
  • 1
    \$\begingroup\$ @ComradeSparklePony We generally don't require programming language answers to questions like this: codegolf.meta.stackexchange.com/questions/3610/… \$\endgroup\$
    – isaacg
    Commented Apr 26, 2017 at 16:46

Mathematica, 285 bytes


Easier to read:

 1  c = Cuboid; e = {1, 1};
 2  s = c[3 # - e, 3 # + e] &;
 3  a = Array; b = a[s[{1, -1} #] &, 3, #] &;
 4  r = RGBColor["#" <> #] &; 
 5  Graphics@{
 6   r@"0a8", c[-23 e, 23 e],
 7   r@"a6b", a[s@{-#, -1} &, 7],
 8   r@"f33", a[s@{#, 1} &, 3, 5], s@{-1, 0},
 9   r@"5ad", a[s@{0, #} &, 4, 4],
10   r@"057",
11    a[s[e #] &, 4, 0], b@4, b[-6], s@{0, -7},
12    {-1, 2}~c~{1, 10}, {-1, -2}~c~{1, -19}, {2, -1}~c~{22, 1}
13  }

Lines 1–3 define short names for functions, the most important of which is s which draws a square centered at the coordinates it receives (really 3 times its coordinates, for appropriate scaling). Line 4 defines a color function using Mathematica's "shortcut" RGB system: RGBColor["#xyz"], where xyz are hexadecimal digits, stands for RGBColor[{17x, 17y, 17z}] (so that each coordinate has 16 equally spaced options running from 0 to 255). The first commands on lines 6–10 switch the current color, using the shortcut colors that are closest to the designated five colors (no value is off by more than 8 when we round to the nearest multiple of 17).

Line 6 draws the large teal square. Line 7 draws the line of magenta squares, Line 8 draws the line of orange squares and the single orange square. Line 9 draws the line of light blue squares. Line 11 draws the three diagonal lines of dark blue squares, as well as the single dark blue square at the bottom. Finally, line 12 draws the three long dark blue rectangles. The output is below:


(Golf tip: the command Cuboid, which is intended for 3d graphics objects, works just fine in 2d and is shorter than Rectangle.)


TikZ, 671>439>432>377>334>311 (282) bytes

My original answer started from the code that Ad Hoc Garf Hunter provided above, cf. Tikz, 671 bytes.
I took this code and my knowledge about general LaTeX to make some improvements to the length of it, saving a bit more than 1 out of every 3 bytes.
However, two years later, I returned to this problem and gave it another try by starting from scratch.

Here's my all new, personal solution. Note that the solution uses non-printable single-byte characters. In the depiction of this solution, they are replaced by circled characters. The circled characters can be mapped by 0x(circled character) with the help of an ASCII table.


Try it Online!




Here's a more readable version of my personal new solution.

01: \documentclass[tikz]{standalone}\begin{document}\tikz{
02: \let~\def~Ⓒ{;\color[HTML]}~④{)rectangle++(.7}~Ⓕ{\fill(}
03: ~~#1#2{Ⓕ0x#1,0x#2④,.7);}
04: Ⓒ{00a88e}Ⓕ.85,.85④+14.3,15)
05: Ⓒ{004d75}~2E~3D~4C~BB~AA~99~88~C4~D3~E2~81
06: Ⓕ8,2④,5.7)(8,9④,2.7)(9,8④+6,.7)
07: Ⓒ{5aa6d8}~8F~8E~8D~8C
08: Ⓒ{f73a3a}~D9~E9~F9~78
09: Ⓒ{a86cb9}~17~27~37~47~57~67~77
10: }\stop

Let's start with the wrapper in lines 1 and 10. This is basically the standard TikZ-wrapper.

In line 2, we assign a shorthand (~) to the command \def within the TikZ-scope. Note that the only available printable single-character command ~ (catcode=13) is now defined as a command within the \tikz{} scope. This helps us to define even more shorthands in a very compact way. We then assign a shorthand to \color that allows us to change the color that we use for \fill-commands later on. As we have five colors in total, we will use the command five times. Note that for \color is a mnemonic declaration. We assign a shorthand to a string that will be used quite a lot to draw rectangles. for rectangle (with four sides) is a mnemonic assignment as well. It contains the closing bracket for the first and the opening bracket for the second coordinate as well as the most common value for the x-value of the second coordinate. In the end of the line, we define a shorthand for the \fill command. The assignment is again mnemonic: . Note that all of the three assignments to "circled characters" are really assignments to non-printable single-byte control characters (0xY, Y standing for the corresponding circled character, being interpreted as ASCII hex value). These characters are all active (catcode=13) characters. All those assignments are displayed as mid-dots in the "Try It Online"-version at Overleaf. This renders an actually sort of "unreadable" (but completely working!) code view that can be ameliorated if you just copy the code to another editor, e.g. here.

In line 3, we continue to redefine ~ and, from now on, use this command to draw little squares. We benefit from the fact that the whole tile can be divided in 15 by 15 squares which is less than 16 by 16. Therefore, we can use hexadecimal one-digit numbers to refer to a unique square with only two characters.

In lines 4 and 6, we draw a huge square in teal and some rectangles, more exactly: all those not being square, in dark blue. We don't need to pick the color dark blue, since this happens in line 5, see below.

Lines 5, 7, 8, and 9 draw all the squares in four different colors. As we pick dark blue as our color for the squares in line 5, we can keep it for the rectangles, see above. Thus, we only have to use the -command five times.

We can make it even shorter!

If you visited the "Try It Online"-link, you might have found a "hacky" version with 29 bytes less. This version produces the same output. However, it throws errors and has a white border. Therefore, the "hacky" version is non-competing. It differs from the version described above by two things: (A) We don't use \begin{document}. This produces errors, but we obtain an output nevertheless. We can save 16 bytes. (B) In the "hacky" definition of the final version of ~, ~ calls itself. This helps us to save a lot of ~ characters in lines 6, 7, 8, and 9 (10+3+3+6 = 22, to be exact). However, we will have to introduce the ~ character in line 3 and one pair of curly braces for each of the lines 6, 7, 8, and 9 to make this work, leaving us with a difference of 13 bytes.

Comments regarding Ad Hoc Garf Hunter's solution

I did not like the fact that I didn't fully understand the dash pattern that the other solution is using. Also, I tried to avoid nodes and lines by concentrating on rectangles. Furthermore, I believe in the metric system. Thus, I refrained from using other units than mm or cm. ;-) I believe that my second approach is much cleaner now.


Please feel free to comment and help me save more bytes.

Literal PNG file, 223 bytes

I've created this PNG file from my TikZ output.


  • \$\begingroup\$ @Ad Hoc Garf Hunter: Some minor improvements that do not need a lot of explanation also can be made to your code. You can (a) refrain from loading xcolor, (b) use \definecolorset and do that before you start \tikz{} OR define dark blue in the right manner (0 instead of 40 for the R-value), (c) add t, to the general \tikz-options in favour of leaving out [t] after your \fill-command, (d) use {1,2,3} instead of {1,...,3} in your second \foreach-loop, (e) leave out the last ;. \$\endgroup\$
    – Joe85AC
    Commented Jun 1, 2020 at 9:43
  • \$\begingroup\$ FYI that ping doesn't fork, since Ad Hoc Garf Hunter has had no interaction with this answer. If you want to suggest improvements to Ad Hoc Garf Hunter's answer, you'll have to wait until you get 50 reputation and then comment on it. \$\endgroup\$ Commented Jun 1, 2020 at 17:14
  • \$\begingroup\$ "fork" is a typo for "work" in my above comment. \$\endgroup\$ Commented Jun 1, 2020 at 21:49
  • \$\begingroup\$ @pppery Thanks, I know that. Anyways, I did have some sort of chat with Ad Hoc Garf Hunter through the comments. Just hope, that he checks back here until I can comment :-) \$\endgroup\$
    – Joe85AC
    Commented Jun 2, 2020 at 8:46
  • 1
    \$\begingroup\$ (You can now comment, given that you have 71 rep) \$\endgroup\$ Commented Jun 2, 2020 at 15:33

Python, 420

from PIL import Image,ImageDraw
for x,y,c in['7172737a98cde670123456bcd70112233456666778888888bcde23232323331111300000003333'[x::26]for x in range(26)]:exec'r([W,W,14+W,14+W],[(168,108,185),(247,58,58),(90,166,216),B][%s]);'.replace('W','2+20*0x%s')%(x,y,x,y,c)

T-SQL, 680 bytes

CREATE TABLE g(c INT,s geometry)
INSERT g SELECT c,geometry::Point(x,y,0).STBuffer(.4)
INSERT g SELECT c,geometry::STLineFromText('LINESTRING('+v+')',0).STBuffer(.4)
FROM(VALUES(0,'.8 .8,15.2 15.2'),(2,'8 2,8 7'),(2,'8 9,8 11'),(2,'9 8,15 8'))a(c,v);
INSERT g SELECT n,geometry::Point(1,1,0).STBuffer(.01)FROM t;
SELECT c,geometry::UnionAggregate(s.STEnvelope())FROM g GROUP BY c

So, this doesn't entirely satisfy the color requirement, but as I explain below, that's not fully under my control. Let's call this the faded carpet version.

Formatted/commented code and output:

enter image description here


  • The points (and lines) in the table are expanded into a circle with STBuffer, then squared off with STEnvelope.
  • The SQL spatial results pane has a fixed color palette, so I am limited in what colors I can display (no bright red, etc)
  • To get the colors I want, I have to select them in the correct order. Column c in my table defines the grouping order; the large teal square is group 0, the 4 blue squares are group 35.
  • To get multiple objects of the same color, I have to combine them into a single object, that's the purpose of the UnionAggregate() function at the end.
  • To "skip ahead" through the color palette to get to the light blue, I have to insert 31 dummy objects that are big enough to get assigned a color, but small enough not to show.

To see more strange uses of SQL spatial features, see draw the biohazard symbol and draw the Easter Bunny.


HTML/SVG, 550 542 521 bytes

<svg><path fill=#0a8 d="M0 0h152v152H0z"/><path fill=#5ad d="M72 2h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8z"/><path fill=#057 d="M12 12h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8zm40 10h8v28h-8zm0 30h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zM82 72h68v8H82zM72 82h8v58h-8zm0 60h8v8h-8zm40-30h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8z"/><path fill=#f33 d="M62 72h8v8h-8zm60-10h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"/><path fill=#a6b d="M2 82h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"


HTML, 366 bytes

Sunday got a Base64 answer up while I was still working on this; if s/he chooses to use it then I'll delete this answer.

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII

If the Base64 string on it's own is a valid answer then that's just 335 bytes:

  • \$\begingroup\$ Looks like they've chosen to use it. \$\endgroup\$
    – S.S. Anne
    Commented Feb 29, 2020 at 22:28

HTML/SVG + JavaScript (ES6), 500 499 bytes

An extra > is required in order for this to function as a Snippet, see this Fiddle for actual code.

<svg><rect id=c>


An array of arrays is mapped to function a, creating clones of the rect in the HTML, inserting them after the initial rect and setting their fill, x, y, width & height attributes. Each array contains values for those attributes, in that order, with any missing values being set by the default parameters of a. The seemingly unnecessary r.id++ allows the use of cloneNode() while ensuring there is only ever 1 rect with an id of c; this saves the need to use the ridiculously expensive document.createElementNS("http://www.w3.org/2000/svg","rect").


PHP+SVG, 425 Bytes

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><?foreach(["004d75"=>[[1,1],[2,2],[3,3],[7,14],[7,7],[8,6],[9,5],[10,4],[11,11],[12,12],[13,13],[7,4,0,2],[8,7,6,0],[7,8,0,5]],"5aa6d8"=>[[7,0],[7,1],[7,2],[7,3]],a86cb9=>[[0,8],[1,8],[2,8],[3,8],[4,8],[5,8],[6,8]],f73a3a=>[[6,7],[12,6],[13,6],[14,6]]]as$c=>$p)foreach($p as$v)echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />";


<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 />
,f73a3a=>[[6,7],[12,6],[13,6],[14,6]] # Array containing color and position ,width, height of each rect without the background
  foreach($p as$v)
    echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />"; # Output the rects

The result of the code in a HTML snippet

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><rect x=11 y=11 width=8 height=8 fill=#004d75 /><rect x=21 y=21 width=8 height=8 fill=#004d75 /><rect x=31 y=31 width=8 height=8 fill=#004d75 /><rect x=71 y=141 width=8 height=8 fill=#004d75 /><rect x=71 y=71 width=8 height=8 fill=#004d75 /><rect x=81 y=61 width=8 height=8 fill=#004d75 /><rect x=91 y=51 width=8 height=8 fill=#004d75 /><rect x=101 y=41 width=8 height=8 fill=#004d75 /><rect x=111 y=111 width=8 height=8 fill=#004d75 /><rect x=121 y=121 width=8 height=8 fill=#004d75 /><rect x=131 y=131 width=8 height=8 fill=#004d75 /><rect x=71 y=41 width=8 height=28 fill=#004d75 /><rect x=81 y=71 width=68 height=8 fill=#004d75 /><rect x=71 y=81 width=8 height=58 fill=#004d75 /><rect x=71 y=01 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=11 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=21 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=31 width=8 height=8 fill=#5aa6d8 /><rect x=01 y=81 width=8 height=8 fill=#a86cb9 /><rect x=11 y=81 width=8 height=8 fill=#a86cb9 /><rect x=21 y=81 width=8 height=8 fill=#a86cb9 /><rect x=31 y=81 width=8 height=8 fill=#a86cb9 /><rect x=41 y=81 width=8 height=8 fill=#a86cb9 /><rect x=51 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=71 width=8 height=8 fill=#f73a3a /><rect x=121 y=61 width=8 height=8 fill=#f73a3a /><rect x=131 y=61 width=8 height=8 fill=#f73a3a /><rect x=141 y=61 width=8 height=8 fill=#f73a3a />

PHP+SVG, 375 Bytes

This Byte count can be reach with compressing the SVG


HTML + Javascript(jQuery) : 474(js)+ 22(HTML) => 496bytes

a=$("table"),a.append("<tr>".repeat(15)),$("tr").append("<td width='15' height='15'>".repeat(15)),o={g:"#0a8",b:"#057",c:"#5AD",r:"#F33",p:"#A6B"},z="14g,b,",s="7g,c,8g,b,5g,c,9g,b,4g,c,10g,b,3g,c,"+z+"2g,b,11g,b,g,b,12g,2b,3g,3r,6g,r,8b,7p,b,"+z+z+z+"3g,b,10g,b,4g,b,9g,b,5g,b,8g,b",m="",t=s.split(",");for(var i=0;i<t.length;i++)m+=t[i].length>1?t[i].charAt(1).repeat(t[i].match(/(\d+)/g)):t[i].charAt(0);for(i=0;i<225;i++)$("td:eq("+i+")").attr("bgcolor",o[m.charAt(i)]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table bgcolor='#0A8'>


HTML + Javascript, 378 bytes

document.write`<canvas id=Y>`


document.write`<canvas id=Y>`                   // draw a canvas element

c=Y.getContext`2d`                              // Canvas2DContext

N=(w,o)=>[...w].map(d=>Number('0x'+d)*10+o)     // take a string, interpret each letter
                                                // as a hex number and add an offset

S=f=>c.fillStyle='#'+f                          // set global fill color

T=(z,p,s)=>c.fillRect(...N(p,1),...N(s,8))      // fill a rect
                                                // each x and y is (hex digit)*10 + 1,
                                                // each w and h is (hex digit)*10 + 8

S('0a8');c.fillRect(0,0,150,150)                // draw background

U=(f,s)=>{S(f);s.replace(/../g,w=>T(0,w,'00'))} // draw 8x8 squares

U('a6b','08182838485868')                       // magenta squares,  each represented
                                                // as two digits in the string

U('f33','67c6d6e6')                             // orange squares

U('5ad','70717273')                             // light blue squares

U('057','112233bbccdd778695a47e')               // dark blue squares

'740278058760'.replace(/(..)(..)/g,T)           // dark blue rects, each represented
                                                // as four digits in the string

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.