20
\$\begingroup\$

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

Specifications

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

\$\endgroup\$
  • \$\begingroup\$ Inspired by Reddit? \$\endgroup\$ – Hexaholic Feb 12 '17 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\$ – Ad Hoc Garf Hunter Feb 12 '17 at 18:07
  • 1
    \$\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 Feb 13 '17 at 8:17

12 Answers 12

10
\$\begingroup\$

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!

Explanation

A good deal of the code is a wrapper:

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz{...}\end{document}

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:

\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}

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

\fill[t](-7.5,-7.5)rectangle(7.5,7.5);

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

\draw(-1,0)node[fill=o]{};

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}{
    \draw(-\x,-1)node[fill=m]{};
    \draw(0,\x)node[fill=b]{};
}

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.

\draw[d](.65,0)--(7.35,0);

Collision

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

Final

And now we are done.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Can you use numbers to represent RGB colours in Tikz, instead of typing the RGB offsets? \$\endgroup\$ – Yytsi Feb 12 '17 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\$ – Ad Hoc Garf Hunter Feb 12 '17 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 Feb 12 '17 at 14:54
  • \$\begingroup\$ @TuukkaX Thanks! \$\endgroup\$ – Ad Hoc Garf Hunter Feb 12 '17 at 14:55
  • 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 Jun 2 at 12:21
9
\$\begingroup\$

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

#l{background:#5AD}th{background:#057}#o{background:#F33}#m>td{background:#A6B
<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>

| improve this answer | |
\$\endgroup\$
7
\$\begingroup\$

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 
iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3Ojpapthl
S7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQT
Sw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wG
MbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII=

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

| improve this answer | |
\$\endgroup\$
  • 1
    \$\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\$ – Comrade SparklePony Apr 26 '17 at 13:31
  • 1
    \$\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 Apr 26 '17 at 13:35
  • \$\begingroup\$ If its up to me I'm fine with it. \$\endgroup\$ – Ad Hoc Garf Hunter Apr 26 '17 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 Apr 26 '17 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 Apr 26 '17 at 16:46
6
\$\begingroup\$

Mathematica, 285 bytes

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

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:

Portland

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

| improve this answer | |
\$\endgroup\$
5
\$\begingroup\$

TikZ, 671 439 bytes

This answer starts 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.


\documentclass[tikz]{standalone}\def~{document}\begin~\definecolorset{HTML}{}{}{t,00a88e;m,a86cb9;r,f73a3a;l,5aa6d8;d,004d75}\tikz[t,line width=20]{\fill(-7.5,-7.5)rectangle++(15,15);\def\1#1,#2#3{\draw(#1,#3)node[minimum size=20,fill=#2]{};}\1-1,r0\def~#1{\foreach~in{1,...,#1}}~7{\1-~,m{-1}\10,l~}~3{\1~,d~\13+~,d{-3-~}\1-3-~,d{3+~}\14+~,r1}\draw[d](.65,0)--(7.35,0);\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35)}\end~

Try it Online!

Here's a more readable version:

01: \documentclass[tikz]{standalone}
02: \def~{document}
03: \begin~
04: \definecolorset{HTML}{}{}{t,00a88e;m,a86cb9;r,f73a3a;l,5aa6d8;d,004d75}
05: \tikz[t,line width=20]{
06: \fill(-7.5,-7.5)rectangle++(15,15);
07: \def\1#1,#2#3{\draw(#1,#3)node[minimum size=20,fill=#2]{};}
08: \1-1,r0
09: \def~#1{\foreach~in{1,...,#1}}
10: ~7{\1-~,m{-1}\10,l~}
11: ~3{\1~,d~\13+~,d{-3-~}\1-3-~,d{3+~}\14+~,r1}
12: \draw[d](.65,0)--(7.35,0);
13: \draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35)
14: }
15: \end~

Explanation

Let's start with the wrapper in lines 1, 2, 3, and 15. This is basically the standard TikZ-wrapper. It differs from it by the fact, that {document} was assigned as meaning to the single-character command ~ in order to save three bytes while using it twice in lines 3 and 15. Note that the only available single-character command ~ is now globally defined as a command but can be overwritten within the document scope without affecting its use at the very end.

In line 4, we define the colors. As we use the HTML color model together with the \definecolorset command that requires us to give strings of six bytes for each color, we can provide the exact color definitions in contrast to Ad Hoc Garf Hunter who could save one byte with a slight offset in magenta (and made a typo that could've saved him another byte with dark blue).

In line 5, we start the picture. We can add the option t, in order to avoid having to write [t] in line 6. This saves us one byte. Also, we can get rid of every node/.style={...} since we have only one explicit usage of node in the whole code.

In lines 7 and 9 most of the magic happens that allows us to save many bytes. Defining a very short command by the name of one single arabic digit allows us to get rid of spaces and braces when using it. Also, we only have to actually write node once. This command was used several times in both \foreach-loops in the original code. Also, defining a shorthand for the \foreach-loop by superloading the ~-command within the \tikz-scope helps saving. Note that, within the \foreach-scope, the ~-command obtains a third meaning.

All nodes and lines are exactly drawn as within Ad Hoc Garf Hunter's solution. Therefore, I refrain from giving additional explanations that would, anyways, sound like copy&paste.

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

| improve this answer | |
\$\endgroup\$
  • \$\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 Jun 1 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\$ – pppery Jun 1 at 17:14
  • \$\begingroup\$ "fork" is a typo for "work" in my above comment. \$\endgroup\$ – pppery Jun 1 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 Jun 2 at 8:46
  • 1
    \$\begingroup\$ (You can now comment, given that you have 71 rep) \$\endgroup\$ – pppery Jun 2 at 15:33
2
\$\begingroup\$

Python, 420

from PIL import Image,ImageDraw
B=0,77,117
I=Image.new('RGB',(300,300),(0,168,142))
r=ImageDraw.Draw(I).rectangle
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)
r([162,142,296,156],B)
r([142,82,156,136],B)
r([142,162,156,276],B)
I.show()
| improve this answer | |
\$\endgroup\$
2
\$\begingroup\$

T-SQL, 680 bytes

CREATE TABLE g(c INT,s geometry)
INSERT g SELECT c,geometry::Point(x,y,0).STBuffer(.4)
FROM(VALUES(1,7,8),(1,13,9),(1,14,9),(1,15,9),(2,2,14),(2,3,13),(2,4,12)
 ,(2,8,8),(2,9,9),(2,10,10),(2,11,11),(2,8,1),(2,12,4),(2,13,3),(2,14,2)
 ,(3,1,7),(3,2,7),(3,3,7),(3,4,7),(3,5,7),(3,6,7),(3,7,7)
 ,(35,8,12),(35,8,13),(35,8,14),(35,8,15))a(c,x,y)
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);
WITH t AS(SELECT 4n UNION ALL SELECT n+1FROM t WHERE n<34)
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

Notes:

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

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

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"

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

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:

iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII
| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Looks like they've chosen to use it. \$\endgroup\$ – S.S. Anne Feb 29 at 22:28
1
\$\begingroup\$

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.

[[t="5ad",2],[t,o=12],[t,p=22],[t,q=32],[,o,o],[,p,p],[,q,q],[,42,,28],[],[,v=62,s=82],[,52,92],[,42,102],[,,s,,68],[,s,,58],[,142],[,112,112],[,122,122],[,132,132],[t="f33",,v],[t,v,122],[t,v,132],[t,v,142],[t="a6b",s,2],[t,s,o],[t,s,p],[t,s,q],[t,s,42],[t,s,52],[t,s,v],["0a8",0,0,152,152]].map(x=>a(x[0],x[1],x[2],x[3],x[4]),a=(f="057",y=72,x=72,h=8,w=8)=>(c.after(r=c.cloneNode()),r.id++,r[s="setAttribute"]("fill","#"+f),r[s]("x",x),r[s]("y",y),r[s]("width",w),r[s]("height",h)))
<svg><rect id=c>


Explanation

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

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

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 />";

expanded

<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]] # Array containing color and position ,width, height of each rect without the background
]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 />"; # 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

<?=bzdecompress(base64_decode("QlpoNDFBWSZTWY2177gAASSZgEgA/+c/5B3gMAE5TQVtQeig0AAACU0VNMAAAEYIlEnpMKNlGahso2plh0zoaSEpIkukINaC3RWRF74IvArdRF1FcBXrSTFWXTorp2xvpb3k7FbaV62syISgiBEweHhxtWUmgWCsqqaKSEARyAOAEZJJOwYBQqTAWotSrmEXJbBRTYNhCg4RPaKOUUbAX+Fr4VfIrzzIQQkkJCWfMEEOOISTuDkOzgQzDQDNQKu/4K7AZh8L41DddV8iv2LQOBXv+iugriHAr6sK/IrUV1FeRXMV3FdhW8V9KugrmK8CvOQin+LuSKcKEhG2vfcA"));
| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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