Dywan na lotnisko

17

W 2015 r . Międzynarodowe lotnisko w Portland rozpoczęło wymianę kultowego dywanu . Chcę, żebyś napisał program rysujący stary dywan w jak najmniejszej liczbie bajtów.

Dywan:

Jedna płytka

Dane techniczne

  • Oto link do skalowalnego obrazu pdf jednego kafelka. Twój wynik powinien odpowiadać względnym wymiarom i położeniu tego obrazu.

  • Wszystkie kolory na ostatecznym obrazie powinny mieścić się w granicach 15 każdej wartości RGB określonego obrazu. Są one wymienione poniżej dla Twojej wygody.

                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
    
  • Twój wynik musi mieć co najmniej 150 x 150 pikseli i powinien być kwadratowy. Jeśli zdecydujesz się na wyjście w formacie skalowalnym, takim jak obraz wektorowy, powinieneś dokładnie dopasować obraz.

  • Możesz wyprowadzić obraz w dowolnym istniejącym formacie obrazu.

  • To jest więc powinieneś dążyć do zminimalizowania liczby bajtów w swoim kodzie.

Post Rock Garf Hunter
źródło
@Hexaholic Nie sądzę, więc trafiałem losowo na wikipedię i trafiłem na stronę. Być może jednak widziałem to wcześniej na reddit.
Post Rock Garf Hunter
1
Czy musi to być obraz dwuwymiarowy, czy może to być coś w rodzaju modelu oglądanego pod określonym kątem?
devRicher

Odpowiedzi:

9

Czysty HTML, 873 bajtów

<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 bajtów

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

Neil
źródło
9

Tikz, 725 693 681 671 bajtów

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

Wypróbuj online!

Wyjaśnienie

Dużą część kodu stanowi opakowanie:

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

Jest to niewielka odmiana standardowego opakowania Tikz, ponieważ ma również linię, \usepackage{xcolor}dzięki czemu możemy poprawnie tworzyć kolory.

Pierwszą rzeczą, którą należy zrobić, jest line width=20,every node/.style={minimum size=20}]ustawienie odpowiedniego rozmiaru linii i węzłów.

Po wykonaniu tej czynności określamy kolory, których będziemy używać w różnych częściach obrazu:

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

Teraz, gdy wszystko jest już ustawione, pomalujemy tło na naszą płócienną turkus:

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

(Nie dołączę obrazu tego, ponieważ jest to tylko turkusowy kwadrat, ale dołączę zdjęcia każdego kroku)

Pierwszy dodawany przez nas węzeł to pomarańczowy węzeł po lewej stronie środka płótna.

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

Pomarańczowy na morzu

Teraz narysujemy jasnoniebieskie i purpurowe węzły. Istnieje 7 niebieskich węzłów i 4 niebieskie węzły, ale możemy narysować dodatkowe węzły, które zostaną później pokryte liniami, więc narysujemy 7 każdego z nich.

\foreach\x in{1,...,7}{
    \draw(-\x,-1)node[fill=m]{};
    \draw(0,\x)node[fill=b]{};
}

Rozwidlone ścieżki

Teraz narysujemy wszystkie grupy 3 kropek za pomocą pojedynczej \foreachpętli

\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]{};}

Rozrzucone kropki

Teraz narysujemy właściwą linię. Ta linia będzie prostą linią z przesunięciami .35w każdym kierunku, aby dopasować do wielkości węzła.

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

Kolizja

Teraz musimy narysować ciemnoniebieskie linie i kwadraty na osi x. Narysujemy je jedną linią przy użyciu niestandardowego wzoru kreski.

Ten wzór jest [dash pattern=on20off8.5on162.5off8.5]To tworzy kwadrat z długim solidnym ogonem. Nasza linia rozpocznie się od dołu i nie obejmie do końca 2 cykli wzoru.

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

Finał

A teraz skończymy.

Post Rock Garf Hunter
źródło
Czy możesz używać liczb do reprezentowania kolorów RGB w Tikz, zamiast wpisywać przesunięcia RGB?
Yytsi
@TuukkaX Myślę, że tak, ale nie mogłem tego rozgryźć. Jeśli wiesz, jak byłbym wdzięczny za oświecenie.
Post Rock Garf Hunter
W ogóle nie znam Tikza, więc nic na to nie poradzę :( Jeśli jednak zrozumiałem twoją zasadę dotyczącą „w granicach 15 każdego RGB”, możesz zmienić 108 na 99, ponieważ błąd jest poniżej 15.
Yytsi
@TuukkaX Thanks!
Post Rock Garf Hunter
Używanie \definecolorze HTMLspecyfikacją (zamiast RGB) pozwala określić kolory za pomocą heksadecymalnego.
Julian Wolf,
6

dosłowny plik PNG, 283 , 234 227 bajtów

EDYTOWAĆ : Korzystając z internetowej usługi kompresji obrazu https://compress-or-die.com/ , zmniejszyło się to o kolejne 7 bajtów.

albn @ alexhi

j:~/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=

dywan3.png

227 bajtów to rzeczywisty rozmiar pliku binarnego carpet.png. Po zakodowaniu w base64, jak pokazano w cytowanym bloku powyżej, jest on o kilka bajtów dłuższy (308 bajtów). Hermetyzacja tego we fragmencie HTML, który od razu renderuje obraz, doda kolejne kilka bajtów:

HTML, 414 , 343 , 336 bajtów

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

Edycja : usunąłem cytaty i zamknąłem>, jak sugerował Kudłaty. Również skompresował obraz o kolejne 17 , 24 bajtów

niedziela
źródło
1
Nie sądzę, że dosłowny plik jest uważany za prawidłowy język programowania tutaj na golfie. Od OP zależy, czy jest to ważne, czy nie.
Towarzysz SparklePony,
1
Być może masz rację, ale nawet opis znacznika złożoność kolmogorov na codegolf.stackexchange.com/tags/kolmogorov-complexity/info wspomina o złożonym ciągu, którego najkrótszą reprezentacją może być wydrukowanie go dosłownie. Jeśli dosłowny ciąg jest uważany za „najgorsze rozwiązanie” dla golfowego kodu opartego na ciągach, dosłowny plik obrazu może być uważany za „najgorsze rozwiązanie” dla golfowego kodu opartego na obrazie. Edycja: wysłałem tylko plik, ponieważ byłem zaskoczony, że tak naprawdę był on krótszy niż inne rozwiązania opublikowane wcześniej. (po usunięciu opcjonalnego fragmentu CZASU z pliku)
niedziela,
Jeśli to zależy ode mnie, wszystko w porządku.
Post Rock Garf Hunter
2
Przy odrobinie kompresji możesz to obniżyć. Ponadto upuść znaki cudzysłowu, wszelkie końcowe =i końcowe >. Oto 366-bajtowa wersja, nad którą pracowałem, zanim zobaczyłem twoją odpowiedź:<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII
Kudłaty
1
@ComradeSparklePony Na ogół nie wymagamy odpowiedzi w języku programowania na takie pytania: codegolf.meta.stackexchange.com/questions/3610/…
isaacg
5

Mathematica, 285 bajtów

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

Łatwiej czytać:

 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  }

Linie 1–3 definiują krótkie nazwy funkcji, z których najważniejszą jest snarysowanie kwadratu pośrodku otrzymanych współrzędnych (tak naprawdę 3-krotność współrzędnych, dla odpowiedniego skalowania). Wiersz 4 definiuje funkcję koloru za pomocą „skrótu” systemu Mathematica RGB:, RGBColor["#xyz"]gdziexyz są cyframi szesnastkowymi, oznacza RGBColor[{17x, 17y, 17z}](tak, że każda współrzędna ma 16 równomiernie rozmieszczonych opcji od 0 do 255). Pierwsze polecenia w wierszach 6–10 zmieniają bieżący kolor, używając kolorów skrótów najbliższych wyznaczonym pięciu kolorom (żadna wartość nie jest wyłączona o więcej niż 8, gdy zaokrąglamy do najbliższej wielokrotności 17).

Linia 6 rysuje duży kwadrat turkusowy. Linia 7 rysuje linię magenta kwadratów, linia 8 rysuje linię pomarańczowych kwadratów i pojedynczy pomarańczowy kwadrat. Linia 9 rysuje linię jasnoniebieskich kwadratów. Linia 11 rysuje trzy ukośne linie ciemnoniebieskich kwadratów, a także pojedynczy granatowy kwadrat na dole. Na koniec linia 12 rysuje trzy długie ciemnoniebieskie prostokąty. Dane wyjściowe są poniżej:

Portland

(Wskazówka golfowa: polecenie Cuboid, które jest przeznaczone dla obiektów graficznych 3D, działa dobrze w 2D i jest krótsze niż Rectangle.)

Greg Martin
źródło
2

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()
dieter
źródło
1

HTML / SVG, 550 542 521 bajtów

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

Kudłaty
źródło
1

HTML, 366 bajtów

W niedzielę otrzymałem odpowiedź Base64 , kiedy jeszcze nad tym pracowałem; jeśli zdecyduje się go użyć, usunę tę odpowiedź.

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

Jeśli ciąg Base64 jako taki jest poprawną odpowiedzią, to tylko 335 bajtów:

iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII
Kudłaty
źródło
1

HTML / SVG + JavaScript (ES6), 500 499 bajtów

>Wymagana jest dodatkowa funkcja, aby działała jak fragment kodu , zobacz ten Fiddle dla rzeczywistego kodu.

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


Wyjaśnienie

Tablicy tablic jest mapowany do funkcji a, tworząc klony rectw HTML, umieszczanie ich po początkowym recti ustawiania ich fill, x, y, widthi heightatrybuty. Każda tablica zawiera wartości dla tych atrybutów, w tej kolejności, a wszelkie brakujące wartości są ustawiane przez domyślne parametry a. Pozornie niepotrzebne r.id++pozwala na użycie cloneNode(), zapewniając jednocześnie, że jest tylko 1rect z an id; oszczędza to konieczności korzystania z absurdalnie drogich document.createElementNS("http://www.w3.org/2000/svg","rect").

Kudłaty
źródło
1

PHP + SVG, 425 bajtów

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

rozszerzony

<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

Wynik kodu we fragmencie HTML

<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 bajtów

Tę liczbę bajtów można osiągnąć poprzez kompresję SVG

<?=bzdecompress(base64_decode("QlpoNDFBWSZTWY2177gAASSZgEgA/+c/5B3gMAE5TQVtQeig0AAACU0VNMAAAEYIlEnpMKNlGahso2plh0zoaSEpIkukINaC3RWRF74IvArdRF1FcBXrSTFWXTorp2xvpb3k7FbaV62syISgiBEweHhxtWUmgWCsqqaKSEARyAOAEZJJOwYBQqTAWotSrmEXJbBRTYNhCg4RPaKOUUbAX+Fr4VfIrzzIQQkkJCWfMEEOOISTuDkOzgQzDQDNQKu/4K7AZh8L41DddV8iv2LQOBXv+iugriHAr6sK/IrUV1FeRXMV3FdhW8V9KugrmK8CvOQin+LuSKcKEhG2vfcA"));
Jörg Hülsermann
źródło