Draw the Ukrainian Flag

Question

As you probably know, there is a war going on in Ukraine. I noticed that it seems nobody has posted a Ukrainian flag challenge yet, so I thought I'd do it myself in support of Ukraine.

The Challenge

Here is the flag:

• The flag is divided horizontally across the middle into two equally sized stripes.
• Stripe colors: (0, 87, 183) or #0057B7 (blue, top) and (255, 215, 0) or #FFD700 (yellow, bottom).
• Colors must be exact if possible, otherwise use the closest available blue and yellow.
• The image can be saved to a file or piped raw to STDOUT in any common image file format, or it can be displayed in a window.
• The image must be sized at a 3:2 ratio, and at least 78 by 52 pixels.
• Alternatively, output a block of text at least 78 characters wide made of non-whitespace characters that depicts the flag, using ANSI color codes to color it. (Use standard blue and yellow.)
• Built-in flag images, flag-drawing libraries, or horrendously upscaling the Ukrainian flag emoji are prohibited.

This is code-golf, so shortest code wins!

Answer 1

HTML+SVG, 39 bytes

<svg viewbox=12.5,-8.9,1.5,1><text>😴

The question forbids zooming in on the Ukraine flag... but not the flag of Sweden! Apparently that's disallowed too, so I'm using an emoji.

This code is terrible practice and probably doesn't work on most browsers/OSes. It works on Firefox 98 on MacOS 12.2.1, and the emoji itself is very system dependent in its size and layout.

In particular, it doesn't seem to work in a Stack Snippet, so here's something: Try it Online!

Run this at your own risk, it will severely lag your computer.

Answer 2

Scratch, 155 bytes

when gf clicked
set pen color to(()+(22455
set pen size to(800
pen down
go to x:(-240)y:(-90
set pen size to(180
set pen color to(()+(16766720
set x to(240

Try it online! | Test it on Scratchblocks!

Explanation

So basically:

1. When the green flag is clicked, the program sets the pen color to ()+(22455), because the set pen color to block doesn't support bare numbers, so we have to do:
   [nothing, evaluates to 0]+22455
22455 is the Scratch color value of RGB(0, 87, 183) (blue).
2. Then the pen size is set to 800, which is just a big number
3. After executing pen down, the pencil goes to x:-240, which is the leftmost pixel, and to y:-90 (the starting point for the bottom part). As it goes, the pencil draws a big blue blob which fills out the entire screen.
4. The pen size is set to 180, half of the window height.
5. The pen color is set to ()+(16766720, the scratch color value for RGB(255, 215, 0) (yellow).
6. Finally, with setting x to 240, the program draws the bottom "line".

Answer 3

CSS, 78 75 74 71 bytes

*>*{width:9em;border-top:3em solid #0057B7;border-bottom:3em solid gold

Edit: Saved 3 bytes by using @pxeger's observation that gold is #FFD700. Saved 1 byte thanks to @RickN. Saved 3 bytes thanks to @IsmaelMiguel.

Answer 4

Python 3, 53 51 45 42¹ bytes

(+2 bytes if you want to use the Full Block Unicode Character █ instead of X)

¹ saved 3 bytes thanks to @pxeger

x="\x1b[3%dm"+("\n"+"X"*78)*13;print(x%4,x%3)

Attempt This Online!

Nicer alternative that uses background colors instead of foreground colors:

x="\x1b[4%dm"+("\n"+" "*78)*13;print(x%4+x%3)

Note that this solution is not valid since it uses spaces.

Attempt This Online!

Here, the programs are represented with 3 more bytes, since the byte \x1b does not get rendered (see ATOs).

On my terminal 13 rows seems to be the appropriate height, but it may vary.

Answer 5

HTML + SVG + CSS, 73 70 68 66 bytes

<svg width=225 style=background:linear-gradient(#0057B7+50%,gold+0

Explanation:

• As a replaced element, the <svg> element in HTML defaults to dimensions of 300px x 150px
• Setting width="225" gives the <svg> a width/height ratio of 225px / 150px or 3 / 2

Update 1: Another 3 bytes sliced off after @pxeger's suggestions on how to abuse the HTML even further.

Update 2: A further 2 bytes shaved off thanks to @cornonthecob's ideas on how to strip from the HTML any vestige of its remaining self-respect.

Update 3: 2 more bytes removed thanks to @Sphinxxx's excellent observation that gold may be followed by the value 0 (or anything less than 50%) without visibly altering the linear-gradient background.

Answer 6

Excel VBA, ₈₄ 66 Bytes

Anonymous function that takes no input and outputs to the range A1:NH830. Cell sizes are not adjusted, rather the cell that are selected are adjusted to account for the \$\approx415:124\$ default cell aspect ratio.

[A1:NH830].Interior.Color=55265:[A1:NH415].Interior.Color=12015360

Output

Answer 7

Wolfram Language (Mathematica), 56 55 bytes

Image@{{{0,29,61}/85},{{1,.843,0}}}~ImageResize~{78,52}

Try it online!

• The best I've found using exponentiation, 56 byte:

Image@{{{0,.05,.4}},{{1,.62,0}}}^.36~ImageResize~{78,52}
Image@{{{0,.19,.6}},{{1,.77,0}}}^.65~ImageResize~{78,52}
Image@{{{0,.26,.66}},{{1,.81,0}}}^.8~ImageResize~{78,52}

• The only valid dimension that can be written in fewer bytes than {78,52} is 9{9,6}.
  If it weren't for x~f~y precedence over xy, this would have saved one byte.

Answer 8

Red, 59 57 54 53 51 50 bytes

x: 99x33 view/tight[below h1 x#0057B7 h1 x#FFD700]

-1 byte thanks to an anonymous user!

-2 more bytes saved by an anonymous user!

-1 again

Answer 9

TI-Basic 83, 25 bytes

This is a rather extreme abuse of the "closest color in your language" rule, as the TI-83 Plus' LCD screen is only capable of two colors (black and "white"; white in air-quotes, as the off color is more green than anything), but it beats all the other graphical output answers except Unicorn, and I imagine a newer TI calculator with a color display, such as the TI-84 Plus CE, could do it right with almost identical code, but I don't think I can test that, as I don't own any such calculator, and a quick search of the internet didn't find any free emulators.

:AxesOff
:Shade(0,10
:Shade(-10,0,-10,10,3,2

Edit: @MarcMush pointed out that, per site consensus, I can assume that the graph bounds are already initialized to ZStandard, allowing me to trim that, and explained some details of how the calculator's MEM screen displays program bytecounts, revising my bytecount down to 25

Output:

To make my rules abuse slightly better, I did opt to make the "yellow" half be lightly filled instead of empty. Although this might not technically constitute a solid color, in the context of what a TI-83 can display, I feel like it is closer to yellow than no fill.

Answer 10

R, 72 58 55 bytes

barplot(rbind(1,1),3,co=c("gold","#0557b7"),bo=NA,as=1)

Try it on rdrr.io!

Answer 11

SQL, 379 346 244 bytes

This uses Microsoft T-SQL in SQL Management Studio's (SSMS) to generate spatial data. This code should work with Oracle's PL-SQL with few changes. Not sure about how it would work with others.

Updated with changes to reduce byte count by t-clausen.dk and removed unnecessary spaces and line breaks, though it's not very readable anymore.

DECLARE @C INT=1,@ VARCHAR(MAX)='' WHILE @C<32 SELECT @+='|.0,0 .x'+iif(@C=14,'|26,0 x',''), @C+=1 SET @=REPLACE(REPLACE(REPLACE(@+'|-26,0 -26?', '|','SELECT CAST(''POLYGON((0 0,78 0,78 '),'x','26?UNION ALL '),'?',',0 0))''AS GEOMETRY)')EXEC(@)

Update using REPLACE to cut out redundant parts of the strings and removing some extra spaces after commas:

DECLARE @C INT = 1,@S VARCHAR(MAX) = '',@G VARCHAR(99)='|1 0,1 .1,0 .1,0 0))'' AS GEOMETRY) G UNION ALL ' 

WHILE @C<=31 --loop is just to cycle through the colors 

BEGIN
    SET @S+=@G  --MERGE SELECT STATEMENTS OF UNVIEWABLE OBJECTS (TOO SMALL) FOR WRONG COLORS 
    IF @C=14 SET @S+='|78 0,78 26,0 26,0 0))'' AS GEOMETRY) UNION ALL '  --ADD TOP OF FLAG IN BLUE
    SET @C+=1   --UPDATE COLOR COUNTER
END
SET @S+='|78 0,78 -26,0 -26,0 0))'' AS GEOMETRY)'
SELECT @S = REPLACE(@S,'|','SELECT CAST(''POLYGON ((0 0,')
EXEC (@S)  --execute query

Original T_SQL:

DECLARE @C INT = 1,@S VARCHAR(MAX) = '',@G VARCHAR(99)='SELECT CAST(''POLYGON ((0 0, 1 0, 1 .1, 0 .1, 0 0))'' AS GEOMETRY) G UNION ALL ' 

WHILE @C<=31 --loop is just to cycle through the colors 

BEGIN
    SET @S+=@G  --MERGE SELECT STATEMENTS OF UNVIEWABLE OBJECTS (TOO SMALL) FOR WRONG COLORS 
    IF @C=14 SET @S+='SELECT CAST(''POLYGON ((0 0, 78 0, 78 26, 0 26, 0 0))'' AS GEOMETRY) UNION ALL '  --ADD TOP OF FLAG IN BLUE
    SET @C+=1   --UPDATE COLOR COUNTER
END

SET @S+='SELECT CAST(''POLYGON ((0 0, 78 0, 78 -26, 0 -26, 0 0))'' AS GEOMETRY)' --ADD BOTTOM OF FLAG IN YELLOW(ish)

EXEC (@S)  --execute query

Unfortunately, the colors look a little faded. Apologies to Ukraine for the bad colors. There don't seem to be too many colors available and they are all faded tones.

SQL Fiddle doesn't handle the spatial data. If there's another fiddle site that does, let me know or add a link. Or if there's a way to set the colors.

Answer 12

Python 3 + Pillow, 120 100 bytes

from PIL.Image import*;i=new("RGB",(78,52));i.putdata([(0,87,183)]*2028+[(255,215,0)]*2028);i.show()

Answer 13

QBasic, 56 bytes

SCREEN 9
LINE(1,1)-(99,33),1,BF
LINE(1,34)-(99,66),14,BF

Try it at Archive.org.

Draws a 99x66 flag on the screen:

Answer 14

HTML + CSS, 79 bytes

<p style=background:#0057B7><p><style>*{aspect-ratio:3;margin:0;background:gold}

The final } should be removed, but this doesn't work in a Stack Snippet.

The HTML named colour gold is exactly the right colour for the yellow of the flag. I wonder whether this is a coincidence.

Answer 15

Desmos, 56 54 bytes

C=rgb([0,255],[87,215],[183,0])
[2,0]<y<[4,2]\{0<x<6\}

Try It On Desmos!

Try It On Desmos! - Prettified

I noticed that when I converted the rgb values to hsv, I got that both had a common s value of 100.0. It saves one byte compared to rgb, but I wasn't sure if the values I got were exact or if they were just rounded (especially the v value of 71.8 for the blue color), so I decided not to use hsv in case it was inaccurate.

Answer 16

ZSH, 93 characters

This works in ZSH. I'm using Ubuntu, but ZSH on other systems should work fine. I have no hidden Unicode characters

a(){printf "`printf '.%.0s' {1..78}w`\n%.0s" {1..13}};printf '\033[44m';a;printf '\033[43m';a

Output

Note: for some reason, if you run it many times, it breaks, so I advise running reset between invocations of this.

Explanation

# make a function named a
a() {
  # generate a row of periods followed by a newline, and print that row 13 times. See https://stackoverflow.com/a/5349842/16886597 for exactly what that does. Basically, this function creates a 78x13 grid of dots, and prints them to the screen
  printf "`printf '.%.0s' {1..78}w`\n%.0s" {1..13}
};
# set the color to blue
printf '\033[44m';
# print the dots
a;
# set the color to yellow
printf '\033[43m';
# print the dots
a

Note that I also use the shortcut for command substitution, saving one char.

Answer 17

Zsh -F, 38 bytes

eval ';<<<␛[4'{4,3}m\${(l:78+{a..m}:)}

Attempt This Online!

␛ should be the literal ASCII escape character, but this doesn't display in StackExchange markdown.

Demo

Answer 18

Unicorn, 14 10 bytes

P3X4Y3C7P3

Note: There isn't a closer blue; the alternative is cyan.

Answer 19

Asymptote 88 82 bytes

(I update my shortest code here, including its history. Hope that it is legal!)

Run on http://asymptote.ualberta.ca/

// Asymptote 82 bytes
fill(box((0,0),(78,26)),rgb(0,87,183));fill(box((0,0),(78,-26)),rgb("#FFD700"));

---

// Asymptote 88 bytes
fill(box((0,0),(300,100)),rgb(0,87,183));
fill(box((0,0),(300,-100)),rgb(255,215,0));

---

In this world of civilization, it's hard to believe that there have been an invasion war from Russia. Stand with Ukraine!

Appendix TikZ 125 bytes (by @Joe85AC)

\documentclass[tikz]{standalone}\begin{document}\tikz{\def~#1;{\color[HTML]{#1}\fill rectangle(3,}~0057b7;);~ffd700;-1)}\stop

TikZ 187 bytes

\documentclass[tikz]{standalone}\begin{document}\tikz{\definecolor{b}{RGB}{0,87,183}\definecolor{r}{RGB}{255,215,0}\fill[b](0,0)rectangle(3,1);\fill[r](0,0)rectangle(3,-1);}\end{document}

TikZ 297 bytes

\documentclass[tikz,border=5mm]{standalone}
\begin{document}
\begin{tikzpicture}
\definecolor{Ukraine blue}{RGB}{0,87,183}
\definecolor{Ukraine yellow}{RGB}{255,215,0}
\fill[Ukraine blue] (0,0) rectangle (3,1);
\fill[Ukraine yellow] (0,0) rectangle (3,-1);
\end{tikzpicture}
\end{document}

Answer 20

Rust, 107 106 92 86 85 bytes

NOTE: you can't actually copy the escape characters from the code below for some reason. Be sure to click the try it online link if you want to test the code; don't copy it from the answer! The odd thing is, the escape characters could be copied in the edit preview, but not in the actual answer. I've asked a question on Meta about it.

fn main(){print!("[38;2;0;87;183m{}[38;5;220m{0}",("X".repeat(78)+"
").repeat(13))}

If you want one more byte, you can use █ instead of X.

Try it online!

To 106 bytes: Removed the first r, and added a 0 in the second pair of braces {}.

To 92 bytes: Thanks to Toothbrush's help, I was able to reduce the code even more by removing the let statement, rearranging the formatting, and changing the gold color to 220.

To 86 bytes: Credit to Aiden4, I reduced the code to 86 bytes by using literal escape characters. I know you can't see them in the code, but you can see them online (86-byte version).

To 85 bytes: Removed the \n and just used an actual newline in the code.

Answer 21

HTML4, 98 95 85 bytes

<table width=78 height=52 cellspacing=0><tr><td bgcolor=#0057B7><tr><td bgcolor=gold>

Edit: Saved 3 bytes by using @pxeger's observation that gold is #FFD700. Saved 10 bytes thanks to @IsmaelMiguel. Note that the sizes here work in Firefox but other browsers may have other default table styles which alter the resulting size.

Answer 22

Python 3 + pygame, 124 117 bytes

There's already two other python solutions to this problem, but I might as well add a third.

from pygame import*
d,r=display,draw.rect
s=d.set_mode()
r(s,"#0557b7",(0,0,78,26))
r(s,"gold",(0,26,78,26))
d.flip()

There might be something I could golf by being smarter with sizes, but this seems pretty close to optimal. By pure luck, "gold" happens to be exactly equal to #ffd700 in pygame's color library, scraping off 3 bytes.

Edit -7 bytes: Hold on a sec apparently you don't actually need to do pygame.init()??? I strongly suspect this is undefined behavior, but it works even running from the command line, so who am I to argue.

Output:

Answer 23

Java, 169 bytes

import java.awt.*;v->new Frame(){public void paint(Graphics g){for(int i=0;i<2;g.fillRect(0,i*30-i/2*4,78,26))g.setColor(new Color(i*255,i*128+87,++i%2*183));}{show();}}

Output:

Explanation:

import java.awt.*;        // Required import for Frame/Graphics/Color
v->                       // Method with empty unused parameter and Frame return
  new Frame(){            //  Create a Frame (window for graphical output)
    public void paint(Graphics g){
                          //   Overwrite its default paint method:
      for(int i=0;i<2     //    Loop `i` in the range [0,2):
          ;               //      After every iteration:
           g.fillRect(    //       Draw the rectangle
             0,i*30-i/2*4,//       at x,y position 0,30i-i//2*4 (i=1→30; i=2→56),
                          //       where the +30 is to account for the title-bar
             78,26))      //       of 78 pixels wide and 26 pixels high
                          //       (so the flag is the minimum required 78x52)
       g.setColor(new Color(i*255,i*128+87,++i%2*183));}
                          //     Change the RGB-color based on `i`:
                          //      i=0 (blue):     0, 87,183
                          //      i=1 (yellow): 255,215,  0
                          //     (and increase `i` by 1 with `++i`)
  {                       //   And in an inner initializer block:
   show();}}              //    Show the frame

Answer 24

Perl (51 characters)

The following piece of code writes the file as a PNM picture

say"P6 78 52 255 ","\0W\xb7"x2028,"\xff\xd7\0"x2028

Answer 25

JavaScript/HTML 117 112 102 100 98 bytes

c=c.getContext`2d`
f=k=>c.fillRect(0,(c.fillStyle=k)>c?33:0,99,33)
f`gold`,f`#0057b7`

<canvas id=c>

With continued help from @Samathingamajig and @pxeger's answer

1. <canvas id=c> is invalid HTML when missing an end tag but at least Chromium-Edge and Firefox create the element anyway.

2. c=c.getContext`2d` is using template literal syntax,

---

Slava Ukraini!

Answer 26

D Language, 122 bytes

Code

import std.stdio;
void main(){
char[78]l='.';
foreach(c;["\033[44m","\033[43m"])foreach(x;0..13)writeln(c,l,"\033[0m");
}

Output

Answer 27

WebP, 42 bytes

UklGRiIAAABXRUJQVlA4TBUAAAAvTcAMABCQJEPb3TRh/me3/5nUH/UA

Encoded in Base64 RFC4648

Answer 28

dc, 73 71 68 bytes

0d34[27P91PnA9P]dsax[33lax]sc[APd-r1+r]sn[35Pr1+d77<nrdD=cd26>u]dsux

Output:

Outputs a 78x26 grid of coloured '#' characters to stdout. This is a 3:2 aspect ratio assuming that the font's aspect ratio is 1:2.

Edits:

-2 bytes: use integers rather than strings for the newline and # character

-3 bytes: it turns out that dc will treat 'A' as 10 and 'D' as 13, even with the input radix set to 10. It also treats 'A9' as 109 (i.e. 'm') for some reason (looks like it treats each digit separately?)

Answer 29

Racket, 94 bytes

(require 2htdp/image)(define(f c)(rectangle 78 26"solid"c))(above(f(color 0 87 183))(f"gold"))

Answer 30

Python 3 + tkinter, 132 128 124 bytes

There are several Python 3 answers already here, but none of them use tkinter, so I thought I'd add one that uses tkinter.Canvas:

from tkinter import*
c=Canvas(Tk())
c.pack()
d=c.create_rectangle
d(5,5,83,31,f="#0057B7")
d(5,31,83,57,f="gold")
mainloop()

To 128 bytes: Thanks to the help of pxeger, using a wildcard import reduces the size by 4 bytes.

To 124 bytes: Thanks to the help of des54321, removing the space before the * and changing the #FFD700 to gold reduced the code by another 4 bytes.

Outputs a mostly empty screen with the flag in the corner: