# Draw the national flag of Iceland

This year's UEFA Euro 2016 is over and besides a couple of negative headlines there has been a very positive surprise as well – the Iceland national football team. Let's draw their national flag.

Input

Well, obviously this challenge has no input.

Output

• Draw the flag of Iceland in any applicable visual format of at least 100 x 72 pixels or 25 x 18 characters.
• Save the output to a file or present it instantly – example formats are: images like png, jpg etc., vector graphics, draw on HTML canvas or even use non-whitespace characters for visualization.
• Use these colors: blue: #0048e0, white: #ffffff and red: #d72828.
• If your language doesn't support specific color values, use the standard values for red, blue and white from the ANSI color codes.
• Draw the flag with the correct proportions, as shown in the figure below:

Boilerplate

• You can write a program or a function. If it is an anonymous function, please include an example of how to invoke it.
• This is so shortest answer in bytes wins.
• Standard loopholes are disallowed.

var QUESTION_ID = 85141; // Obtain this from the url
// It will be like https://XYZ.stackexchange.com/questions/QUESTION_ID/... on any question page
var COMMENT_FILTER = "!)Q2B_A2kjfAiU78X(md6BoYk";
var OVERRIDE_USER = 41859; // This should be the user ID of the challenge author.
var answers = [], answers_hash, answer_ids, answer_page = 1, more_answers = true, comment_page;function answersUrl(index) {return "https://api.stackexchange.com/2.2/questions/" +  QUESTION_ID + "/answers?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + ANSWER_FILTER;}function commentUrl(index, answers) {return "https://api.stackexchange.com/2.2/answers/" + answers.join(';') + "/comments?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + COMMENT_FILTER;}function getAnswers() {jQuery.ajax({url: answersUrl(answer_page++),method: "get",dataType: "jsonp",crossDomain: true,success: function (data) {answers.push.apply(answers, data.items);answers_hash = [];answer_ids = [];data.items.forEach(function(a) {a.comments = [];var id = +a.share_link.match(/\d+/);answer_ids.push(id);answers_hash[id] = a;});if (!data.has_more) more_answers = false;comment_page = 1;getComments();}});}function getComments() {jQuery.ajax({url: commentUrl(comment_page++, answer_ids),method: "get",dataType: "jsonp",crossDomain: true,success: function (data) {data.items.forEach(function(c) {if (c.owner.user_id === OVERRIDE_USER)answers_hash[c.post_id].comments.push(c);});if (data.has_more) getComments();else if (more_answers) getAnswers();else process();}});}getAnswers();var SCORE_REG = /<h\d>\s*([^\n,]*[^\s,]),.*?(-?\d+)(?=[^\n\d<>]*(?:<(?:s>[^\n<>]*<\/s>|[^\n<>]+>)[^\n\d<>]*)*<\/h\d>)/;var OVERRIDE_REG = /^Override\s*header:\s*/i;function getAuthorName(a) {return a.owner.display_name;}function process() {var valid = [];answers.forEach(function(a) {var body = a.body;a.comments.forEach(function(c) {if(OVERRIDE_REG.test(c.body))body = '<h1>' + c.body.replace(OVERRIDE_REG, '') + '</h1>';});var match = body.match(SCORE_REG);if (match)valid.push({user: getAuthorName(a),size: +match[2],language: match[1],link: a.share_link,});});valid.sort(function (a, b) {var aB = a.size,bB = b.size;return aB - bB});var languages = {};var place = 1;var lastSize = null;var lastPlace = 1;valid.forEach(function (a) {if (a.size != lastSize)lastPlace = place;lastSize = a.size;++place;var answer = jQuery("#answer-template").html();answer = answer.replace("{{PLACE}}", lastPlace + ".").replace("{{NAME}}", a.user).replace("{{LANGUAGE}}", a.language).replace("{{SIZE}}", a.size).replace("{{LINK}}", a.link);answer = jQuery(answer);jQuery("#answers").append(answer);var lang = a.language;if (! /<a/.test(lang)) lang = '<i>' + lang + '</i>';lang = jQuery(lang).text().toLowerCase();languages[lang] = languages[lang] || {lang: a.language, user: a.user, size: a.size, link: a.link, uniq: lang};});var langs = [];for (var lang in languages)if (languages.hasOwnProperty(lang))langs.push(languages[lang]);langs.sort(function (a, b) {if (a.uniq > b.uniq) return 1;if (a.uniq < b.uniq) return -1;return 0;});for (var i = 0; i < langs.length; ++i){var language = jQuery("#language-template").html();var lang = langs[i];language = language.replace("{{LANGUAGE}}", lang.lang).replace("{{NAME}}", lang.user).replace("{{SIZE}}", lang.size).replace("{{LINK}}", lang.link);language = jQuery(language);jQuery("#languages").append(language);}}
body { text-align: left !important}#answer-list {padding: 10px;width: 290px;float: left;}#language-list {padding: 10px;width: 290px;float: left;}table thead {font-weight: bold;}table td {padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/codegolf/all.css?v=617d0685f6f3"><div id="answer-list"><h2>Leaderboard</h2><table class="answer-list"><thead><tr><td></td><td>Author</td><td>Language</td><td>Size</td></tr></thead><tbody id="answers"></tbody></table></div><div id="language-list"><h2>Winners by Language</h2><table class="language-list"><thead><tr><td>Language</td><td>User</td><td>Score</td></tr></thead><tbody id="languages"></tbody></table></div><table style="display: none"><tbody id="answer-template"><tr><td>{{PLACE}}</td><td>{{NAME}}</td><td>{{LANGUAGE}}</td><td><a href="{{LINK}}">{{SIZE}}</a></td></tr></tbody></table><table style="display: none"><tbody id="language-template"><tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td><a href="{{LINK}}">{{SIZE}}</a></td></tr></tbody></table>

This challenge is inspired by Draw the national flag of france.

• Far more challenging would be the flag of my country, who also did a lot better than expected in the Euros this year - Wales. :-) Jul 11, 2016 at 10:54
• @Gareth I'm looking forward to a waterproof specification of the dragon. ;) Jul 11, 2016 at 11:04
• It looks like the blue in the above image is darker than the actual #0048e0 Jul 11, 2016 at 12:32
• @MartinEnder Does carving it on a stone tablet count? That's waterproof. Jul 12, 2016 at 11:11
• @MartinEnder Mathematica will have one. Jul 12, 2016 at 18:57

# PICO-8/Lua, 108100 92 bytes (non-competing)

rectfill(0,0,24,17,12)
rect(0,7,24,10,7)
rect(7,0,10,17,7)
rect(0,8,24,9,8)
rect(8,0,9,17,8)


• Why is this marked "Non-competing"? Usually, that is reserved for using a language that's newer than the challenge. Jul 12, 2016 at 20:18
• Because the blue is brighter than the flag's blue. Jul 12, 2016 at 20:24
• I don't know much about Pico8/lua, but is it possible to make the colors match? Otherwise, this answer is incorrect, which means it should be deleted. Jul 12, 2016 at 20:25
• @daHugLenny Since the contest allows for ANSI colors if necessary, I'm sure this would be fine. Jul 12, 2016 at 20:26
• @DrGreenEggsandIronMan Nope, the PICO-8 has a fixed 16-color palette. :< The only two shades of blue in the palette are too dark and too bright, respectively.
– Lynn
Jul 30, 2016 at 19:07

$b="..."x28;$}=1x12;$@="..."x8;print"P6 100 72 31",$_="$b$}$@$}$b$b"x28,$\=($}x8 .$@.$}x15)x4,$@x100 Try it online! Outputs a PBM image. # Perl 5 + -M5.10.0 -p0513, 107 bytes ($},$@,$;)=map".[48;5;${_}m ",18,15,1;$}x=7;say$\="$}$@$; $@$}$} "x7,$_=$@x8 .$;.$;.$@x15 ."
",$;x=25," ",$

Try it online!

Uses ANSI escape sequences and assumes a Linux terminal to display the flag. Looks a bit weird using the measurements provided.

# Perl 5 + -M5.10.0 -p0513, 109 bytes

This version looks a bit closer to the expected dimensions...

($},$@,$;)=map".[48;5;${_}m  ",18,15,1;$}x=7;say$\="$}$@$;$;$@$}$} "x7,$_=$@x8 .$;.$;.$@x15 ."
",$;x=25," ",$

Try it online!

# Perl 5 + -M5.10.0 -p0513, 103 bytes

Using the standard ANSI colours (as specified in the question) saves another 4 bytes!

($},$@,$;)=map".[${_}m ",44,47,41;$}x=7;say$\="$}$@$;$@$}$}
"x7,$_=$@x8 .$;.$;.$@x15 ." ",$;x=25,"
",$ Try it online! • The weirdness comes from the fact that characters are taller than their width. Jul 13, 2016 at 9:22 • @EʀɪᴋᴛʜᴇGᴏʟғᴇʀ Indeed, I did wonder if there were square fixed-width fonts, but I don't imagine they'd look particularly good! I might update that second version to look even closer (it shouldn't take any more bytes than it currently is, but time...) Jul 13, 2016 at 9:36 • On a TTY, you cannot wonder such a thing, the font is THE FONT! You can't change it just because you don't like it. Jul 13, 2016 at 9:42 # GLSL, 266 265 bytes (non-competing) Just for fun! Only input it takes is the uniform which is the resolution of the texture it draws to. Needs an existing OpenGL context. The function r masks a rectangular area. The colors and the proportions are a bit off but looks believable. #define r(p,w,h)step(abs(p.x),w)*step(abs(p.y),h) uniform vec2 R;void main(){vec2 p=-1.+2.*gl_FragCoord.xy/R;p.y*=R.y/R.x*1.39;vec2 q=p;p.x+=.3;p=mod(p,2.)-1.;gl_FragColor.rgb=mix(mix(vec3(.83,.15,.15),vec3(1.),r(p,.9,.85)),vec3(0.,.28,.95),r(p,.8,.7))*r(q,1.,1.);}  • Can you do #define r(p,w,h)step(abs(p.x),w)*step(abs(p.y),h)? Jul 13, 2016 at 9:49 • Yes that works! Thank you! Jul 13, 2016 at 10:14 • codegolf.stackexchange.com/a/85518/6485 — you might want to look at this answer (it's also in GLSL but even smaller) Jul 16, 2016 at 15:11 • Thanks, I could help to save some bytes on that code. My solution works in a general GLSL context, his on shadertoy which has uniforms defined and has a change in the main function to work with arguments. Jul 16, 2016 at 16:30 ## PowerShell v2+, 379340289 286 bytes nal n New-Object Add-Type -A *.Dr*g,S*ms$x='$g.FillRectangle((n Drawing.SolidBrush ' ($f=n Windows.Forms.Form).Add_paint({$g=$args[1].Graphics;"$x'#0048e0'),0,0,100,72);$x white),28,0,16,72);$x white),0,28,100,16);$x'#d72828'),32,0,8,72);$x'#d72828'),0,32,100,8)"|iex})$f.ShowDialog()


Linebreaks and semicolons count the same, so linebreaks left in for clarity. ;-)

So, drawing in PowerShell is not its strong suit -- it needs to use lengthy .NET assembly imports and GDI+ function calls.

Saved 39 bytes saved thanks to TessellatingHeckler's answer, and another 51 bytes thanks to Joey's impressive golfing commentary. Thanks to them both!

We start with creating a New-Alias n and assign it New-Object. We can thus reference just n instead of New-Object elsewhere in the program. Next is the import calls, with wildcards -- we're importing System.Drawing and System.Windows.Forms. We then create a variable $x that we use for several repeated calls in the future, so we're not needing to type it out every time. The next line is the meat-and-potatoes of the program. We start with setting $f as a new Windows.Forms.Form and immediately call the Add_paint() routine on it.

Inside the paint routine, the first line is to create our graphics component, $g, that we'll use as our canvas. The next line is actually a constructed string that we pass to iex (similar to eval) so that we can leverage the $x variable from above. We're simply drawing the blue background, then two white rectangles, followed by two red rectangles. We adjust the values appropriately each time and pipe it to the Invoke-Expression.

The final line simply shows the dialog form as we've drawn it above.

Note that since we're creating a form object, and PowerShell is all about the pipeline, closing the pop-up form will pass along a System.Enum.DialogResult object of Cancel, since that's technically what the user did. Since we're not capturing or otherwise doing anything with that result, the word Cancel will be displayed to STDOUT when the program concludes, as it was left on the pipeline. That can be suppressed by adding >$a to the end of the last line, if so required, so the output redirects into a throwaway variable. • If you pinch the start of my script here: codegolf.stackexchange.com/a/59110/571 - you can drop to a single Add-Type call, and reuse the same string for adding the System.Windows.Forms type and creating the object. Jul 12, 2016 at 0:27 • @TessellatingHeckler Oh, that's excellent. I tweaked it around a little bit more and squeezed a few additional bytes out. Additionally, dropped the height/width setting of the form - the default (at least v4 on Win8.1) seems fine. Jul 12, 2016 at 12:39 • @Joey Wow, thanks for the massive golf. I left the nal in so it's for v2+, so it's at 289 now. Jul 15, 2016 at 12:54 • @Joey True, but if I surround it in quotes or prepend two grave accents, it's still two bytes each. Saved the quotes for white, though. Jul 15, 2016 at 13:51 • @AdmBorkBork the Add-Type can be shortened to Add-Type -A S*ms – root Jul 9, 2017 at 1:34 # Vim, 49 keystrokes 25i<Ctrl+k>:S<Esc>yy17pqal<Ctrl+v>G$khhqr<Space>j@akhr<Ctrl+k>?SGV8kdggP<Ctrl+v>G15ld$p  I'm certain it could be golfed more, but there you have it. I spent some extra keystrokes on the :S (MEDIUM SHADE) and ?S (DARK SHADE) digraphs for a result I'm pretty happy with: ## Explanation: 25i<Ctrl+k>:S<Esc>yy17p " Draw 18 lines of "blue" blocks qa " Start recording macro "a" l<Ctrl+v>G$khh           " Visual-block select the inner rectangle
q                        " Stop recording
r<Space>                 " Replace rectangle with spaces
j@akh                    " Select next inner rectangle
r<Ctrl+k>?S              " Replace rectangle with "red" blocks
GV8kdggP                 " Cut the last 9 lines and paste them before the first line
<Ctrl+v>G15ld$p " Cut the first 16 columns and paste them after the last column  If I have some time later I'll try to record a GIF of it in action. • I love seeing vim answers since there is a good chance you'll discover something new in the huge feature set of vim. This time for me: digraphs. Not as big a revelation as discovering o in visual mode, but still a useful thing to know. Jul 30, 2016 at 18:59 ## HTML+CSS, 276258254 234 bytes Ridiculously quite long compared to the SVG+JS solution. *{position:fixed;background:#fff}e,f{background:#d72828}a{background:#0048e0}c{top:36px;height:16px}d{left:36px;width:16px}e{top:40px;height:8px}f{left:40px;width:8px;}d,f,a{height:72px;top:8px}a,c,e{left:8px;width:100px <a><c><d><e><f • *{position:fixed} should do it. And it's 18 bytes shorter than a,a *{display:block;position:fixed}. Jul 11, 2016 at 21:02 • @insert Indeed, thanks for that. The other way I was working with failed though. Jul 11, 2016 at 21:09 • This should save you another 12 bytes: *{position:fixed;background:#fff}e,f{background:#d72828}a{background:#0048e0}c{top:36px;height:16px}d{left:36px;width:16px}e{top:40px;height:8px}f{left:40px;width:8px}d,f{top:8px}c,e{left:8px}a,c,e{width:100px}d,f,a{height:72px, fiddle. Jul 11, 2016 at 21:20 • @insert Thanks again, saved 20 with your hints :) Jul 11, 2016 at 21:59 • @insertusernamehere: looks fine here, but when copied to a regular document (in every Browser I have installed on all my machines: Windows 10, Ubuntu, Android, iPhone), fis not displayed. Jul 12, 2016 at 10:49 # Python 3.5 + Tkinter, 235 bytes: from tkinter import*;C=Canvas(Tk(),height=126,width=175,bg='#d72828');C.pack();X=lambda*a:C.create_rectangle(a,fill='#0048E0',outline='#fff',width=7);X(0,0,8,8);X(0,11,8,19);X(11,0,26,8);X(11,11,26,19);C.scale('all',0,0,7,7);mainloop()  Really long, but happy with it regardless. Basically creates a canvas with a red background and then draws 4 blue rectangles with white borders over the background in the 4 corners. After the drawing is all done, the canvas is enlarged by a scale factor of 7. Displays the completed flag in a new window on a canvas with the dimensions 175 x 126. Image of Output: # bash, 239 161 bytes took the closest colors I could find in ANSI golfed by a third (an amazing 78 bytes) with manatwork´s tips a="${u=${e=\e[48;5};20m}${s=       }${w=$e;231m} ${r=$e;124m}  $w$u$s$s${n=\e[0m }" printf "${t=$a$a$a$a$a$a$a}${b=$w$s $r$w $s$s$n}${c=$r$s    $s$s$n}$c$b$t"


u='\e[48;5;20m'             # color blUe
r='\e[48;5;124m'            # color Red
w='\e[48;5;231m'            # color White
#presets:
n="\e[0m\n"                 # No color + New line
s='       '                 # 7*chr(32)

# lines:
a="$u$s$w$r  $w$u$s$s$n" # blue-white-red-white-blue b="$w$s$r  $w$s$s$n"      # white-red-white
c="$r$s    $s$s$n" # all red # output: t="$a$a$a$a$a$a$a"          # 7* line $a printf "$t$b$c$c$b$t"  output pretty distorted due to character aspect ratio: • You could pack it to 159 characters without changing the base principle: pastebin.com/8YKAR7Mn (^[ is a literal escape character counted as 1). Regarding those function declarations, see Dennis's related tip in Tips for golfing in Bash. Jul 13, 2016 at 7:56 • @manatwork: A) Wow didn´t know about the variable definition in strings. B) ^[ doesn´t seem to work - what bash version is that? C) Same for the function definitions: a(){for i ...} => unexpected "{for" (a()(...) works) Jul 13, 2016 at 9:53 • A) See ${parameter:=word} in man bash. B) ^[ is the graphic image of the escape character. In command line and Vim you enter it with Ctrl+v, Esc, in MCEdit and Emacs with Ctrl+Q, Esc. (In MCEdit you may need a second Esc too, depending on configuration.) C) You have to add delimiters where required by syntax – a space after { and a ; before the }: a(){ for i ...;}. Jul 13, 2016 at 10:27
• so basically you used magic. That's pretty amazing tbh. Apr 9, 2017 at 22:19

# R/ggplot2, 273 bytes 270 bytes

Since we have a couple base R answers we obviously need a ggplot answer. One of the few areas where base might be better ;)

library(ggplot2);ggplot(data.frame(a=c(0,7,0,8,0),b=c(25,11,25,10,25),c=c(0,0,7,0,8),d=c(18,18,11,18,10),e=paste(c(1,2,2,3,3))),aes(xmin=a,xmax=b,ymin=c,ymax=d,fill=e))+geom_rect()+scale_fill_manual(values=c('#0048e0','white','#d72828'),g=F)+theme_void();ggsave('o.png')


## Ungolfed

library(ggplot2)

ggplot(
data.frame(xmin = c(0,  7,  0,  8,  0),
xmax = c(25, 11, 25, 10, 25),
ymin = c(0,  0,  7,  0,  8),
ymax = c(18, 18, 11, 18, 10),
fill = paste(c(1, 2, 2, 3, 3)))
) +
aes(xmin = xmin, xmax = xmax, ymin = ymin, ymax = ymax, fill = fill)+
geom_rect() +
scale_fill_manual(values = c('#0048e0', 'white', '#d72828'), g = FALSE) +
theme_void()

ggsave('o.png')


Edit: Thanks to plannapus for suggesting a way to shorten the fill specification.

• I don't actually use ggplot2 often but isn't it possible to fill argument fill with integers rather than character strings? As in c(1,2,2,3,3)? If not, you can still coerce them into characters with paste, and it'd still be shorter: paste(c(1,2,2,3,3)) is 19 bytes instead of the 22 of c('a','b','b','c','c'). Jul 15, 2016 at 8:19
• Can't be numeric or it will try fill with a gradient. Paste is a very good idea though! Jul 15, 2016 at 9:30

# Lua + LÖVE, 212 characters

f="fill"l=love
g=l.graphics
c=g.setColor
r=g.rectangle
l.window.setMode(100,72)function
l.draw()g.setBackgroundColor(0,72,224)c(-1,-1,-1)r(f,28,0,16,72)r(f,0,28,100,16)c(215,40,40)r(f,32,0,8,72)r(f,0,32,100,8)end


Sample output:

# Befunge, 126 124 bytes

99>+1-:00p0 >:01-\100g>:::9\55++\8\v
@_^#!:,+55$_^#*46:+1<|!\0:\*+\7\+< "[",5g,4g,3g," m",:,,^>$1+2/::39*,
174
404
010


2 bytes golfed thanks to Zacharý

This is a text solution using ANSI escape sequences to set the colours. It outputs 50x18 characters rather than 25x18 (doubling the horizontal resolution), since that more closely matches the required dimensions when the characters aren't square. If you prefer the 25x18 resolution, though, you can simply replace the :, on line 3 with two spaces.

Sample Output

(exact colours may vary depending on the operating system)

• I know that this is over a year old, but 9*,"[",5g,4g,3g," m",,^>$1+2/::3 would save 2 bytes on the third line if you use the 25x18 resolution. Jul 16, 2018 at 17:25 • It seems that this works for -4 bytes! Jul 16, 2018 at 17:37 • @Zacharý I don't think the 25x18 version really counts, because it's not the right shape, but that trick you used to compress the top loop is rather brilliant. Thanks. Nov 28, 2018 at 18:51 • Thanks, golfing syntax is what I do best on other people's code Nov 28, 2018 at 20:44 # Perl, 128 bytes $b=" 0 9 27"x28;$w=" 31"x12;$r=" 26 5 5"x8;
$t="$b$w$r$w$b$b"x28;$m=($w x8 .$r.$w x15)x4; print"P3 100 72 31",$t,$m,$r x100,$m,$t;


This is a straightforward compression of a PPM image. A PPM is supposed to have a line length of 70 or less, but in practice all readers will accept this image that's all on a single line. If you want to be properly portable, replace the first space in each of $b, $w and $r with a newline. I've assumed that the RGB values supplied are in sRGB coordinates, so no need to apply any gamma correction for PPM. • Picture! :) (Please include one.) – user9206 Jul 12, 2016 at 13:58 • It's a bit too long for a data: URL. Jul 12, 2016 at 14:03 • @TobySpeight Upload to imgur first, then post it here, no need for data: URLs. Jul 13, 2016 at 9:41 • You can get this down to 104 by changing to the binary PBM format, use binary bytes in your code and change the variables slightly: dom111.github.io/code-sandbox/… May 6 at 9:23 # JavaFX, 527 bytes import javafx.scene.*;import javafx.scene.paint.*;import javafx.scene.shape.Rectangle;public class I extends javafx.application.Application{public void start(javafx.stage.Stage s){Color w=Color.WHITE;Paint z=Paint.valueOf("#d72828");Group g=new Group();Scene n=new Scene(g,250,180,Color.valueOf("#0048e0"));g.getChildren().addAll(r(70,0,40,180,w),r(0,70,250,40,w),r(0,80,250,20,z),r(80,0,20,180,z));s.setScene(n);s.show();}Rectangle r(int x,int y,int w,int h,Paint p){Rectangle r=new Rectangle(x,y,w,h);r.setFill(p);return r;}}  Two red rectangles on two white rectangles on a blue background. Ungolfed: import javafx.scene.*; import javafx.scene.paint.*; import javafx.scene.shape.Rectangle; public class I extends javafx.application.Application { public void start(javafx.stage.Stage s) { Color w = Color.WHITE; Paint z = Paint.valueOf("#d72828"); Group g = new Group(); Scene n = new Scene(g, 250, 180, Color.valueOf("#0048e0")); g.getChildren().addAll( r(70, 0, 40, 180, w), r(0, 70, 250, 40, w), r(0, 80, 250, 20, z), r(80, 0, 20, 180, z)); s.setScene(n); s.show(); } Rectangle r(int x, int y, int w, int h, Paint p) { Rectangle r = new Rectangle(x, y, w, h); r.setFill(p); return r; } }  (Weirdly, if I change it to import javafx.scene.shape.*; it won't compile with Java 1.8.0_92. I'm not sure if that's a bug.) # Ruby with Shoes, 150 149 characters Shoes.app(width:100,height:72){background'0048e0' stroke fill'fff' rect 28,0,15,72 rect 0,28,99,15 stroke fill'd72828' rect 32,0,7,72 rect 0,32,99,7}  Thanks to: Sample output: • Can't do fill'fff' instead of fill white for -1? Jul 13, 2016 at 12:10 • Doh. You are right, @EʀɪᴋᴛʜᴇGᴏʟғᴇʀ. I remembered having some issues with shortening hex color codes earlier and not tried it this time. Jul 13, 2016 at 12:28 # FLIF, 48 bytes I'm surprised that no (bitmap) image formats have been used as answers here. A well compressed PNG comes in at a respectable 132 bytes (thanks to tools like pngout, pngcrush and optipng). However, I encountered another intriguing format that does even better! Using FLIF (Free Lossless Image Format) and some manual trimming I got down to 48 bytes: 4c46 4649 3133 6400 4800 4023 eb51 1272 9034 113b 7727 a2b6 fdac dc4e c1ae 6cf8 4a00 fc03 2064 7772 dc38 97a7 63f2 0a03  Viewing the image with viewflif gives the expected output: EDIT: Added link to FLIF web site. ## SVG+HTML, 134 <svg><path d="m0,2h100v72H0"fill="#0048e0"/><path d="M0 32H30V0h12V32h60v12H42V76H30V44H0"fill='#d72828'stroke="#fff"stroke-width='4'> Cheated a bit in that the rectangle is slightly offset so that I can use a second path with a red fill and white outline to draw the cross. This emerged as an idea while making suggestions to golf nicael's SVG+JS answer further and ended up as a complete rewrite of the SVG in question. In fact, this is pure SVG anyway, it just needs the HTML parser, so has to be put into an HTML file. ## HTML+CSS, 225 bytes I liked Nicael's answer, but I found a way to draw the bars in less bytes.  *{position:fixed;width:100px;margin:0}a{background:#0048E0;height:72px}b,c{box-shadow:0 0 0 4px #FFF;}b,c,d{background:#D72828}b,d{width:8px;left:32px}b{height:72px}c{height:8px;top:32px}d{height:16px;top:28px <a><b></b><c><d> • box-shadow is a nice idea. – Joey Jul 15, 2016 at 7:49 ## HTML+CSS, single element, 321 <p style="width:100;height:72;background:linear-gradient(0deg,transparent 44.4%,#D72828 44.5%,#D72828 55.6%,transparent 55.7%),linear-gradient(90deg,transparent 28%,#fff 28.1%,#fff 32%,#D72828 32.1%,#D72828 40%,#fff 40.1%,#fff 44%,transparent 44.1%),linear-gradient(0deg,#0047E0 38.9%,#fff 39%,#fff 61.1%,#0047E0 61.2%)">  Needs quirks mode to run, so the snippet below has the errors fixed: <p style="width:100px;height:72px;background:linear-gradient(0deg,transparent 44.4%,#D72828 44.5%,#D72828 55.6%,transparent 55.7%),linear-gradient(90deg,transparent 28%,#fff 28.1%,#fff 32%,#D72828 32.1%,#D72828 40%,#fff 40.1%,#fff 44%,transparent 44.1%),linear-gradient(0deg,#0047E0 38.9%,#fff 39%,#fff 61.1%,#0047E0 61.2%)"> # SVG pattern, 250 <svg><pattern id="a"width=9 height=9 patternUnits="userSpaceOnUse"patternTransform="translate(55,55),scale(10)"><path d="M0,0H7V7H0" fill="#0048e0"/><path d="M8,0V9M9,8H0"stroke="#d72828"fill="none"/></pattern><path d="M0,0H125V90H0" fill="url(#a)"/>  A square blue path, a red stroke (of default stroke-width) and all that scaled and offset into another path. Needs to be placed into HTML to work. • Welcome to PPCG! Jul 15, 2016 at 13:08 Java with ANSI escape codes, 278 bytes interface R{static void main(String[]a){String x=o(0,0)+"\n",l=o(4,7)+o(7,1)+o(1,2)+o(7,1)+o(4,14)+x,t=l+l+l+l+l+l+l,r=o(1,12)+o(1,13)+x,q=o(7,8)+o(1,2)+o(7,15)+x;System.out.print(t+q+r+r+q+t);}static String o(int c,int l){return"\33[4"+c+"m"+" ".substring(0,l);}}  • Remove the space after the class name, shorten the name of the args parameter to a single character, reduce the octal escape to \33 and don't count the unnecessary trailing newline character. That brings your count down to 282. – Joey Jul 15, 2016 at 9:49 • Change the class to an interface and remove the public from the method declaration. You can also remove the space after the return. This brings it down to 278. – Joey Jul 15, 2016 at 10:01 • Thanks you Joey, I added your ideas, now I am at 278 bytes, great job! =) Jul 19, 2016 at 10:27 # Javascript console, 242 bytes c='background:#';r=c+'d72828;';b=c+'0048e0;';w=c+'fff;';console.log(('%c '[E='repeat'](25)+'\n')[E](18),...((t=(v='b'[E](7))+'wrrw'+v+v)[E](7)+(o=(j='w'[E](7))+'wrrw'+j+j)+'r'[E](50)+o+t[E](7)).replace(/(.)/g,a=>eval(a)).slice(0,-1).split;)  # GLSL + shadertoy, 193190187 179 bytes void mainImage(out vec4 f,vec2 p){vec2 a=abs(p/iResolution.xy*vec2(25,18)-9.);int c=int(min(a.x,min(a.y,2.)));f=vec4(c==0?vec3(215,40,40):c==1?vec3(255):vec3(0,72,224),255)/255.;} The aspect ratio will be correct as long as the window/screen size is 25:18. Can be tested at https://www.shadertoy.com/new I wanted to use an array lookup in the last statement, but it seems I can't really make an array of vectors :/ Additional thanks going to @GáborFekete for tips for further golfing. Screenshot: • You can save 3 bytes by removing the in keyword in the mainImage argument. Jul 16, 2016 at 16:08 • Oh yeah, forgot about it. Thank you! Jul 16, 2016 at 16:09 • Also remove trailing zeros in floating values. And I'm not sure if it works on all browsers and OSes but try to assign only the .rgb values of the variable f. Jul 16, 2016 at 16:23 • trailing zeroes are necessary, without them there are "incompatible types" errors. (maybe it also works slightly differently depending on implementation) also I guess the second suggestion would be UB, but maybe I'll try later Jul 16, 2016 at 16:53 • I meant write 2. instead of 2.0. Jul 16, 2016 at 17:30 ## TRS-80 Color Computer BASIC, 133 bytes This one is a little off on the widths, but some of that is due to characteristics of the semi-graphics mode. In the emulator, the screen is 512x384 even though the actual programming is lower resolution. This color mode only supports 8 colors plus black, and the algorithm is a sort of threshold heat map which is using math to determine the color value to use if it gets within a certain range of the cross axes. The number 3 is blue, 5 is white, and 4 is red. Logical TRUE is -1, and FALSE is 0, so I leveraged that to add two to blue to make white, and subtract one to made red. I could have golfed further and removed some decimals sacrificing accuracy to gain 16 bytes. 1FORY=0TO31:FORX=0TO63:C=3-2*((ABS(21.5-X)<5.5)OR(ABS(15.5-Y)<4.5))+((ABS(21.5-X)<3.5)OR(ABS(15.5-Y)<2.5)):SET(X,Y,C):NEXT:NEXT:GOTO1  Ungolfed, and more conventional styling: 10 FOR Y=0 TO 31 20 FOR X=0 TO 63 30 C=3-2*((ABS(21.5-X)<5.5) OR (ABS(15.5-Y)<4.5)) + ((ABS(21.5-X)<3.5) OR (ABS(15.5-Y)<2.5)) 40 SET(X,Y,C) 50 NEXT X 60 NEXT Y 70 GOTO 10  I used the JS Mocha online interpreter, which made me feel all warm and fuzzy and want to take my CoCos out of the attic. Technically, I didn't need to have the last GOTO statement (6 bytes), but I left it in to keep the final result from scrolling off the screen a couple of lines as soon as it finished drawing. # Maple 231 bytes macro(t=thickness,w=white,c=color): plots:-display( plot([],background=blue), plot(9,0..25.2,t=48,c=w), plot([9,y,y=0..18.2],t=48,c=w), plot(9,0..25.2,t=24,c=red), plot([9,y,y=0..18.2],t=24,c=red), scaling=constrained,view=[0..25,0..18]);  Added newlines for readability. This code uses a couple of aliases for repeated terms. Another method, which is slightly cleaner and produces a slightly more crisp image but longer (285 without aliases) is: plots:-display( plottools:-rectangle([0,8],[25,10],color=red), plottools:-rectangle([8,0],[10,18],color=red), plottools:-rectangle([0,7],[25,11],color=white), plottools:-rectangle([7,0],[11,18],color=white), plottools:-rectangle([0,0],[25,18],color=blue), style=polygon,scaling=constrained);  # Python Turtle, 233 bytes from turtle import* import tkinter as _ _.ROUND=_.BUTT S=8 c=color w=width h=18*S c("navy") w(h) fd(25*S) c("white") w(4*S) home() pu() goto(9*S,-9*S) lt(90) pd() fd(h) c("#d72828") w(S+S) bk(h) pu() home() pd() fd(25*S) ht() done()  One feature of this implementation is that I sacrificed 15 bytes to make it scalable so you can set S to anything from 1: to however large you wish. If you want to run it under Python 2, simply change tkinter to Tkinter. # Postscript 148 characters (84 bytes when using binary shortcuts) First of all, there are two versions: One optimized for characters, and one optimized for binary shortcuts. Golfed character version: /s{setrgbcolor}def/R{rectfill}def 0.843 0.157 0.157 s 0 8 25 2 8 0 2 18 R R 0 0.282 0.878 s 0 0 7 7 0 11 7 7 8 copy R R 11 0 translate 2 1 scale R R  Less golfed version (character optimised): /s {setrgbcolor} def /R {rectfill} def 0.843 0.157 0.157 s 0 8 25 2 8 0 2 18 R R 0 0.282 0.878 s 0 0 7 7 0 11 7 7 8 copy R R 11 0 translate 2 1 scale R R  Less golfed version (binary optimised): 0.843 0.157 0.157 setrgbcolor 0 8 25 2 8 0 2 18 rectfill rectfill 0 0.282 0.878 setrgbcolor 0 0 7 7 0 11 7 7 8 copy rectfill rectfill 11 0 translate 2 1 scale rectfill rectfill  Hex of the binary representation version: 30 2E 38 34 33 20 30 2E 31 35 37 20 30 2E 31 35 37 92 9D 30 20 38 88 19 32 88 08 30 20 32 88 12 92 80 92 80 30 20 30 2E 32 38 32 20 30 2E 38 37 38 92 9D 30 88 00 37 88 07 30 88 0B 37 88 07 38 92 19 92 80 92 80 88 0B 30 92 AD 32 20 31 92 8B 92 80 92 80 • rectfill can take an array of numbers and draw multiple rectangles with one call. This can get it down to 139 bytes (by also changing the 8 copy to a dup). Also leading zeroes are not needed on the floats which brings it down to 134 Nov 1, 2016 at 14:27 # C - Win32 GDI 180 bytes #include <Windows.h> main(i,x,y,h,v){for(i=0;i<180000;i++)h=(x=i%500)/20,v=(y=i/500)/20,SetPixelV(GetDC(0),x,y,h>7&&h<10||v>7&&v<10?2631895:h>6&&h<11||v>6&&v<11?16777215:9910272);}  Very slowly draws the flag onto the desktop: • Why SetPixelV ? Can't it be SetPixel ? Jul 8, 2017 at 11:22 # Tcl/Tk, 180 162 158 pack [canvas .c -w 100 -he 72 -bg #0048e0] proc D {L f\ d72828} {.c cr r$L -w 0 -f #\$f}
D "28 2 44 74" fff
D "2 28 102 44" fff
D "32 2 40 74"
D "2 32 102 40"


Stupid margin at the end forced me to use 102 instead of 99; I could save two bytes.

• Visible at the right on i.imgur.com/m0bCgwT.png — you will see a vertical blue line where it shouldn't be. Jul 9, 2017 at 15:40
• @insertusernamehere On an unrelated thing, I finally discovered the origin of the "stupid margin"; the highlightthickness attribute of canvas is by default 2 (instead of 0) — stackoverflow.com/a/4311134/383779 Sep 3, 2017 at 9:57

# PaperScript, 149 bytes

R=Path.Rectangle
for(y=0;y<88;y+=44)R(0,y,28,28).fillColor=R(44,y,56,28).fillColor="#0048e0"
R(0,32,100,8).fillColor=R(32,0,8,72).fillColor="#d72828"


PaperScript is an extension of JavaScript based on the Paper.js vector graphics library. You can run PaperScript code directly, without having to mess with the HTML and CSS, at sketch.paperjs.org.

The code uses a loop to draw the top two blue rectangles, then the bottom two. It then adds two red rectangles to complete the flag. Try it at Paper.js Sketch!

### Ungolfed

for (var y = 0; y < 88; y += 44) {
new Path.Rectangle({
point: [0, y],
size: [28, 28],
fillColor: "#0048e0"
});
new Path.Rectangle({
point: [44, y],
size: [56, 28],
fillColor: "#0048e0"
});
}
new Path.Rectangle({
point: [0, 32],
size: [100, 8],
fillColor: "#d72828"
});
new Path.Rectangle({
point: [32, 0],
size: [8, 72],
fillColor: "#d72828"
});


# TI-Basic (TI-84 Plus CE), 76 74 bytes

9→Ymax
-9→Ymin
16→Xmax
-9→Xmin
AxesOff
For(A,-9,9,.2
DrawF A/(X2>4 and A2>4),10
DrawF A/not(X2>1 and A2>1),11
End


This was created independently of charredgrass's answer.

-2 bytes from lirtostat

TI-Basic is a tokenized language. Ymax, Ymin, Xmax, Xmin, and AxesOff are two-byte tokens; all other tokens used are one-byte tokens.

Possibly non-competing due to color values (blue 0x0000FF, white 0xFFFFFF, red 0xFF0000).

It takes quite a while to run, but it works.

9→Ymax                           # 5 bytes, adjust window
-9→Ymin                          # 6 bytes
16→Xmax                          # 6 bytes
-9→Xmin                          # 6 bytes
AxesOff                          # 3 bytes, remove axes
For(A,-9,9,.2                    # 11 bytes, for each Y-value, -9 to 9, by 0.2
DrawF A/(X2>4 and A2>4),10       # 20 18 bytes, draw a blue point if Y^2>4 and X^2>4
DrawF A/not(X2>1 and A2>1),11    # 18 bytes, draw a red point if Y^2 or X^2 is less than 1
End                              # 1 byte

• (X^2>4)/(A^2>4) -> X^2>4 and A^2>4? Dec 1, 2018 at 4:54
• I think you can win 2 bytes by reordering and using Ans for -9 May 3 at 9:41