77
\$\begingroup\$

As you will 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: Flag of Ukraine

  • 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 , so shortest code wins!

\$\endgroup\$
15
  • 1
    \$\begingroup\$ If the ANSI color code option is chosen, what aspect ratio should we assume each character has? \$\endgroup\$
    – Nitrodon
    Mar 19 at 16:38
  • 1
    \$\begingroup\$ @Nitrodon You may assume each character is a square. \$\endgroup\$
    – Ginger
    Mar 19 at 17:43
  • 2
    \$\begingroup\$ @des54321 It must be exact. \$\endgroup\$
    – Ginger
    Mar 19 at 18:53
  • 7
    \$\begingroup\$ Unless I'm misunderstanding the QBasic answer already posted, I think that answer has inexact colors due to limitations of the language, but it is certainly likely other ancient languages could also have too-limited color-spaces to display the correct colors \$\endgroup\$
    – des54321
    Mar 19 at 19:42
  • 3
    \$\begingroup\$ Related: codegolf.stackexchange.com/questions/230438/create-a-pride-flag \$\endgroup\$
    – tsh
    Mar 20 at 5:10

60 Answers 60

78
\$\begingroup\$

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.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ I like this answer... but does it pass the rule that 'Colors must be exact if possible'? \$\endgroup\$
    – Dingus
    Mar 22 at 3:52
  • \$\begingroup\$ @Dingus For this approach, it's as close as I've found so far. I tried a lot of emoji before I found this one. So I'd say yes. \$\endgroup\$
    – emanresu A
    Mar 22 at 3:54
  • 4
    \$\begingroup\$ Right, but presumably there's a non-emoji way to get the exact colours in HTML+SVG. Whether the rule applies on a per-approach or per-language basis isn't really clear though. \$\endgroup\$
    – Dingus
    Mar 22 at 4:09
39
\$\begingroup\$

Scratch, 196 168 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

Code
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".
\$\endgroup\$
4
  • 9
    \$\begingroup\$ wow scratch!! I think this is the first time I've seen this language on PPCG :P \$\endgroup\$
    – des54321
    Mar 19 at 18:38
  • 5
    \$\begingroup\$ @des54321 I think there have been quite a few before \$\endgroup\$
    – graffe
    Mar 19 at 22:46
  • 3
    \$\begingroup\$ @des54321 there have been quite a few scratch answers before \$\endgroup\$
    – ASCII-only
    Mar 20 at 12:20
  • 2
    \$\begingroup\$ I didn't know Scratch was supported here! \$\endgroup\$ Mar 26 at 8:56
29
\$\begingroup\$

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.

\$\endgroup\$
6
  • 7
    \$\begingroup\$ blue is on top not yellow. \$\endgroup\$
    – Ha'Penny
    Mar 19 at 15:44
  • 3
    \$\begingroup\$ @Ha'Penny Whoops, thanks! \$\endgroup\$
    – Neil
    Mar 19 at 16:35
  • 2
    \$\begingroup\$ It seems to still render fine with *>* which is one byte less than body. That will also style the (implicit) head tag and its contents, but those are not visible. \$\endgroup\$
    – RickN
    Mar 21 at 15:45
  • 2
    \$\begingroup\$ Instead of 78px, use 9em, and instead of 26px use 3em. This should give you a 9em X 6em flag. Which is a 3:2 ratio and larger in screen size AND saves 3 bytes. \$\endgroup\$ Mar 21 at 23:59
  • 1
    \$\begingroup\$ @IsmaelMiguel Thanks! \$\endgroup\$
    – Neil
    Mar 22 at 0:23
19
\$\begingroup\$

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.

\$\endgroup\$
5
  • 1
    \$\begingroup\$ With some more abuse of HTML you can save 3 bytes: <svg width=225 style="background:linear-gradient(#0057B7 50%,gold 50%" (removing the quotes around 225, and omitting the closing ) and >) \$\endgroup\$
    – pxeger
    Mar 20 at 15:01
  • 3
    \$\begingroup\$ You can abuse HTML even further by replacing the spaces in the style attribute with + and then you can remove the quotes: <svg width=225 style=background:linear-gradient(#0057B7+50%,gold+50% \$\endgroup\$ Mar 20 at 15:54
  • 1
    \$\begingroup\$ Another 2 bytes: Have the gold start at 0 (anything less than 50% will give you the desired sharp gradient). <svg width=225 style=background:linear-gradient(#0057B7+50%,gold+0 \$\endgroup\$
    – Sphinxxx
    Mar 21 at 23:00
  • \$\begingroup\$ Thank you, @Sphinxxx. Your observation seems obvious in hindsight, but it wasn't until you mentioned it that it was. \$\endgroup\$ Mar 22 at 13:29
  • \$\begingroup\$ In Chrome, it doesn’t work without the closing )> \$\endgroup\$ Jul 9 at 19:36
18
\$\begingroup\$

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.

\$\endgroup\$
4
  • \$\begingroup\$ If each character is a pixel I think you want 26 rather than 13. Also I think the escape could go in front of every newline, so x=("\033[3%dm\n"+"X"*78)*26;print(x%4,x%3) (does that work?). \$\endgroup\$ Mar 19 at 16:02
  • 1
    \$\begingroup\$ You can remove the 0 in the \033. In fact, you can include the character itself in the string verbatim: ato.pxeger.com/… \$\endgroup\$
    – pxeger
    Mar 19 at 16:07
  • \$\begingroup\$ @JonathanAllan it does not work because x would contain 26 escape sequences %d. For the height, I didn't consider each character as a pixel, but I tried to respect the aspect ratio. Anyway, it does not change much for the code-golf \$\endgroup\$
    – matteo_c
    Mar 19 at 16:09
  • 1
    \$\begingroup\$ Ah, yep %d >.< nice answer anyway :D \$\endgroup\$ Mar 19 at 16:10
17
\$\begingroup\$

Wolfram Language (Mathematica), 56 55 bytes

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

Try it online!

enter image description here

  • 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.
\$\endgroup\$
5
  • \$\begingroup\$ You probably do need 43/51 to satisfy "Colors must be exact" \$\endgroup\$
    – att
    Mar 19 at 21:05
  • 1
    \$\begingroup\$ @att good point. First, from Image docs: Image[data,"type"] can be used to create an image of a specified data type. Values in data are coerced to the specified type by rounding or clipping. By default, "Real32" is assumed. Hence 43/51 would still be flawed. But aside from this, when Mathematica interprets the data in the output as bytes it yields the correct RGB values. The sense is that, for Mathematica, .843 (along with many other floats) is exactly the value 215 in the 0-255 range of the RGB24 scale. \$\endgroup\$
    – Domenico
    Mar 19 at 23:00
  • \$\begingroup\$ Using the first two entries of ColorData[97] would be an amusing way to accomplish this. Unfortunately, though, those colors aren't quite right. \$\endgroup\$ Mar 22 at 17:20
  • \$\begingroup\$ @MichaelSeifert Interesting, I was unaware of that function... Maybe there are some flag for which it would do the trick \$\endgroup\$
    – Domenico
    Mar 22 at 18:39
  • 1
    \$\begingroup\$ Possibly. I mainly brought it up because the entries of ColorData[97] are the default colors for plots in Mathematica, and it happens that the first two of those default colors are blue and yellow(-ish). \$\endgroup\$ Mar 22 at 18:40
17
\$\begingroup\$

Red, 59 57 54 53 51 50 bytes

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

enter image description here

-1 byte thanks to an anonymous user!

-2 more bytes saved by an anonymous user!

-1 again

\$\endgroup\$
0
17
\$\begingroup\$

Excel VBA, 84 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

Excel limits how far you can zoom out to 10% normal zoom - so this solution doesn't quite fit on my 4K display. The output is also so large that attempting to copied and paste the output into a photo editor seems to exceed the maximum size for a single file in the Windows clipboard.

If you have a display that can fit the full output of this script, please feel free to take a snapshot of such and update this answer.

Slava Ukraini

In the meantime, this is what the solution looks like when cells are scaled, instead of changing what ranges are selected.

Slava Ukraini

\$\endgroup\$
1
  • \$\begingroup\$ You can use &HB75700 instead of 12015360 for the same number of bytes. \$\endgroup\$
    – Toothbrush
    Mar 29 at 11:27
14
\$\begingroup\$

R, 72 58 55 bytes

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

Try it on rdrr.io!

\$\endgroup\$
4
  • \$\begingroup\$ image(t(1:2),c=c("gold","#0557b7"),ax=F) \$\endgroup\$ Mar 19 at 23:34
  • 2
    \$\begingroup\$ @DominicvanEssen this was my first try, but it doesn't keep the ratio constant and depends on the viewing area. \$\endgroup\$
    – pajonk
    Mar 20 at 6:21
  • \$\begingroup\$ Ah, yes. With that in mind I like yours more! \$\endgroup\$ Mar 20 at 8:55
  • \$\begingroup\$ I feel like there is a way to use the bg argument/parameter and just plot one colour letting the background take care of the rest, but struggling to actually execute --- anyone got any ideas? \$\endgroup\$
    – JDL
    Mar 21 at 13:54
14
\$\begingroup\$

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()
\$\endgroup\$
3
  • 3
    \$\begingroup\$ You can shorten this a little bit by using [(0,87,183)]*2028+[(255,215,0)]*2028 instead of the list comprehension. \$\endgroup\$
    – flawr
    Mar 19 at 23:09
  • 2
    \$\begingroup\$ Another note: using ; instead of \n doesn't make a difference in bytes, so you can use newlines, unless of course you want to keep the decreased readability ;-). \$\endgroup\$ Mar 20 at 18:51
  • 2
    \$\begingroup\$ @SylvesterKruin this is CGSE, of course I want decreased readability /s \$\endgroup\$
    – Ginger
    Mar 21 at 14:57
14
+50
\$\begingroup\$

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.

A picture of the screen of a TI-83 calculator, with the top half of the screen fully filled in, and the bottom half lightly filled, overall showing a crude approximation of the Ukrainian flag

\$\endgroup\$
6
  • \$\begingroup\$ you can remove ZStandard (codegolf.stackexchange.com/a/52967/98541) and use Xmin instead of -10. Also, TI-Basic is tokenized. With these optimizations, I get 24 bytes \$\endgroup\$
    – MarcMush
    Mar 23 at 9:32
  • \$\begingroup\$ @MarcMush good one on removing ZStandard, but I cant seem to find Xmin as something I can put in on my calculator, and I'm aware of TI-Basic's tokenization, my bytecount is directly from my calculator's memory management screen \$\endgroup\$
    – des54321
    Mar 23 at 15:19
  • \$\begingroup\$ Actually I just tried something else, it seems that the bytecount displayed in the MEM screen includes the program's name, as renaming it to U instead of the name I had UKRAINE dropped the bytecount to 36, suggesting that my bytecount is actually 35 \$\endgroup\$
    – des54321
    Mar 23 at 15:20
  • \$\begingroup\$ Xmin is in VARS > Window... \$\endgroup\$
    – MarcMush
    Mar 23 at 15:42
  • \$\begingroup\$ an empty program is 10 bytes, so I substract 10 bytes from the program size (1-letter name of course), and I get the same program size as other people answering in TI-Basic. That way it will be the same as if you manually count with the token sizes \$\endgroup\$
    – MarcMush
    Mar 23 at 15:44
13
\$\begingroup\$

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.

enter image description here

\$\endgroup\$
5
  • 4
    \$\begingroup\$ Welcome to Code Golf, and nice answer! Had no idea SQL was capable of graphical output. \$\endgroup\$ Mar 21 at 19:29
  • 1
    \$\begingroup\$ hello, nice answer. I see some places this can be golfed, I suspect this can be at least 100 characters shorter. Everything inside your WHILE can be written as 1 expression, this allows you to remove BEGIN and END. G does not need to be declared as a variable as you only use it once and the last SET and SELECT can be written in 1 expression. C<=31 can be written as C<32 \$\endgroup\$ Mar 22 at 9:24
  • 1
    \$\begingroup\$ I tried to golf your answer, I cut a few corners. Feel free to copy whatever you want from this \$\endgroup\$ Mar 22 at 13:22
  • 2
    \$\begingroup\$ @t-clausen.dk - thanks. I have included your changes and removed some line breaks and spaces. \$\endgroup\$ Mar 22 at 16:30
  • \$\begingroup\$ you can still remove some of the spaces. You can use a line break instead of a otherwise necessary space, this will not change the length of the code \$\endgroup\$ Mar 25 at 9:05
12
\$\begingroup\$

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:

Ukrainian flag with "Press any key to continue" message

\$\endgroup\$
7
  • 1
    \$\begingroup\$ Those colors don't look exact, but I'm assuming QBasic has a very limited color palette? \$\endgroup\$
    – des54321
    Mar 19 at 19:21
  • \$\begingroup\$ Yeah, there are only 16 colors to choose from. I actually think color 9, light blue, looks a bit closer than color 1, but the OP said "Use standard blue and yellow"... though I guess technically ANSI colors are only allowed if a solution uses character output (which I can't really do because QBasic's console is only 24 lines long)... so I guess if the OP says this is invalid, I can delete it. \$\endgroup\$
    – DLosc
    Mar 19 at 20:53
  • 1
    \$\begingroup\$ Ah, I see you've already asked about it. "Closest available" works for me... except which is closer to (0, 87, 183): (0, 0, 170) or (0, 0, 255)? Hmm... \$\endgroup\$
    – DLosc
    Mar 19 at 21:01
  • 1
    \$\begingroup\$ I did do a bit of googling around and was actually able to find some QBasic documentation someones hosting that says that with the screen mode you're using, it actually gets 64 colors on video adapters with >64k memory, although I couldn't find anything on what those colors actually are \$\endgroup\$
    – des54321
    Mar 20 at 2:48
  • 2
    \$\begingroup\$ Nice to see QBasic after all these years! That was my first programming language! \$\endgroup\$ Mar 20 at 14:03
12
\$\begingroup\$

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

enter image description here


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

enter image description here

enter image description here

Appendix TikZ 122 bytes

\definecolor{b}{RGB}{0,87,183}\definecolor{ux}{RGB}{255,215,0}\fill[b](0,0)rectangle(3,1);\fill[ux](0,0)rectangle(3,-1);

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}
\$\endgroup\$
6
  • 1
    \$\begingroup\$ Presumably you could shave bytes by renaming "Ukraine blue" just "b" etc? \$\endgroup\$ Mar 21 at 22:47
  • \$\begingroup\$ @SteveBennett Thanks! I have added an update. In LaTeX, b is allowed, but y is not (also x). So I use ux instead. \$\endgroup\$
    – Black Mild
    Mar 22 at 5:45
  • 1
    \$\begingroup\$ The second picture (Nature) has zero code, thus it must be the winner. I REALY LIKE IT \$\endgroup\$
    – milevyo
    May 13 at 9:06
  • 1
    \$\begingroup\$ TikZ: 158 bytes --> \documentclass[tikz]{standalone}\def~{document}\begin~\tikz{\definecolorset{HTML}{}{}{b,0057b7;g,ffd700}\def~{rectangle(4,}\fill(,)[b]~2);\fill(,)[g]~0)} \end~ \$\endgroup\$
    – Joe85AC
    Aug 6 at 19:02
  • \$\begingroup\$ @Joe85AC Fantastic! Could you explain about (,) ? I see that it is not (0,0) \$\endgroup\$
    – Black Mild
    Aug 6 at 19:33
11
\$\begingroup\$

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.

\$\endgroup\$
11
\$\begingroup\$

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.

\$\endgroup\$
10
  • \$\begingroup\$ huh that HSV observation is interesting, but based on a quick conversion myself I'm getting 212,97,72 and 51,51,100 for the blue and yellow respectively, so I doubt there's a golfing opportunity there \$\endgroup\$
    – des54321
    Mar 20 at 3:19
  • \$\begingroup\$ @des54321 I used an online tool for the conversion because I don't know how to do it by hand, so it could be possible that the online tool is wrong. I got 211, 100, 71.8 for blue and 51, 100, 100 for yellow, using this tool I found online. \$\endgroup\$
    – Aiden Chow
    Mar 20 at 3:31
  • \$\begingroup\$ hmmm I plugged it into that tool too and I got 212,97.3,71.8 for the hsv, possibly you mis-typed something? I reversed it and the hsv you're getting seems to be hex #0558b7, instead of #0557b7 \$\endgroup\$
    – des54321
    Mar 20 at 3:34
  • \$\begingroup\$ @des54321 I found the problem. The question body put (0, 87, 183) for the rgb value for blue (which was what I was using for the conversion) which is apparently different from the hex value that follows immediately afterwards (#0557B7), which has a rgb value of (5, 87, 183). Now I'm not sure which one I'm supposed to be using because different answers use different values 0_0 \$\endgroup\$
    – Aiden Chow
    Mar 20 at 3:41
  • 1
    \$\begingroup\$ @des54321 No need to suggest another edit, I'll just edit it directly (because I have over 2k rep) \$\endgroup\$
    – Aiden Chow
    Mar 20 at 4:00
11
\$\begingroup\$

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

Screenshot of 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.

\$\endgroup\$
1
  • 3
    \$\begingroup\$ You can replace {1..13} and {1..78} with {a..m} and {+..y} respectively, because there are still the correct number of characters in each of those ranges. You also don't need that w. \$\endgroup\$
    – pxeger
    Mar 20 at 15:12
11
\$\begingroup\$

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

Screenshot of terminal showing the code being run and a Ukrainian flag being printed

\$\endgroup\$
11
\$\begingroup\$

Unicorn, 14 10 bytes

P3X4Y3C7P3

canvas with flag between (4,4) and (6,3)

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

\$\endgroup\$
2
  • \$\begingroup\$ Amazing! 14 bytes \$\endgroup\$
    – Black Mild
    Mar 24 at 8:47
  • \$\begingroup\$ @BlackMild As it turns out, that wasn't even a great way to do it. I got it down to 10 \$\endgroup\$
    – Laurel
    Mar 24 at 19:02
10
\$\begingroup\$

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:

A mostly black screen with a small Ukrainian flag displaying in the top left corner

\$\endgroup\$
2
  • \$\begingroup\$ For removing pygame.init(), I remember reading somewhere that it just imports all pygame modules, so that you don't need to manually import any of them yourself. It is highly recommended, but not required. \$\endgroup\$
    – Aiden Chow
    Mar 20 at 3:50
  • 1
    \$\begingroup\$ @AidenChow ah that makes sense, luckily this is PPCG, where all recommendations of good coding fall in the face of shorter code :P \$\endgroup\$
    – des54321
    Mar 20 at 3:53
10
\$\begingroup\$

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.

\$\endgroup\$
6
  • 1
    \$\begingroup\$ Welcome to Code Golf, and nice answer! You can also use tio.run/#rust to check the byte count of an answer. \$\endgroup\$ Mar 20 at 16:40
  • 1
    \$\begingroup\$ You don't need the let statement: fn main(){print!("\x1b[38;2;0;87;183m{}\x1b[38;2;255;215;0m{0}",("X".repeat(78)+"\n").repeat(13))} is 98 bytes. Also, you can save 1 byte by deduplicating part of the format string: fn main(){print!("{}0;87;183m{1}{0}255;215;0m{1}","\x1b[38;2;",("X".repeat(78)+"\n").repeat(13))} is 97 bytes \$\endgroup\$
    – Toothbrush
    Mar 21 at 15:32
  • 1
    \$\begingroup\$ Also, if you use standard blue and yellow as allowed in the rules, you can use fn main(){print!("\x1b[34m{}\x1b[33m{0}",("X".repeat(78)+"\n").repeat(13))} (75 bytes). \$\endgroup\$
    – Toothbrush
    Mar 21 at 15:51
  • 1
    \$\begingroup\$ If not, you can use fn main(){print!("\x1b[38;2;0;87;183m{}\x1b[38;5;220m{0}",("X".repeat(78)+"\n").repeat(13))} (92 bytes) since colour 220 is exactly #ffd700. \$\endgroup\$
    – Toothbrush
    Mar 21 at 15:55
  • 1
    \$\begingroup\$ You can use a literal escape character instead of using an ASCII escape for the escape character to get down to 86 bytes. Try it online! \$\endgroup\$
    – Aiden4
    Mar 21 at 18:37
9
\$\begingroup\$

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.

\$\endgroup\$
6
  • 4
    \$\begingroup\$ HTML is not a programming language /s \$\endgroup\$
    – Ginger
    Mar 19 at 14:17
  • \$\begingroup\$ Why use a table? Simple CSS will save at least 50 bytes... \$\endgroup\$
    – code
    Mar 21 at 4:03
  • 4
    \$\begingroup\$ @code Because this isn't an HTML+CSS answer... \$\endgroup\$
    – Neil
    Mar 21 at 8:27
  • \$\begingroup\$ <table width=80 height=56 cellspacing=0><tr><td bgcolor=#0057B7><tr><td bgcolor=gold> <-- Save 10 bytes. It works on Google Chrome 99.0.4844.74 on Windows 10. This makes an 80x56px table with spacing around, with each row taking 78x26px each. \$\endgroup\$ Mar 22 at 0:33
  • 1
    \$\begingroup\$ @IsmaelMiguel Huh, Firefox developer tools tells me that I need width=78 height=52 so I'll stick with those values but thanks for the 10 byte saving! \$\endgroup\$
    – Neil
    Mar 22 at 8:51
8
\$\begingroup\$

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
\$\endgroup\$
1
7
\$\begingroup\$

Racket, 94 bytes

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

enter image description here

\$\endgroup\$
7
\$\begingroup\$

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:

enter image description here

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
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Impressive! java golfing always gets a +1 from me \$\endgroup\$
    – des54321
    Mar 21 at 13:42
7
\$\begingroup\$

JavaScript (browser console), 94 bytes

j='height:4em;width:12em;display:block;background:',console.log('%c %c ',j+`#0057B7`,j+`gold`)

96 bytes

console.log('%c %c ',`${j='height:4em;width:12em;display:block;background:'}#0057B7`,`${j}gold`)

This is shorter (85 bytes), but in a bit of a grey area? If you size the console perfectly, the output will be the correct dimensions:

console.log('%c %c ',`${j='display:block;height:6em;background:'}#0057B7`,`${j}gold`)

97 characters

console.log('%c %c ',`${j='height:26px;width:78px;display:block;background:'}#0057B7`,`${j}gold`)

I think this works in most browsers these days?

enter image description here

(Incidentally, I note that the image in the question is not actually the colours described.)

\$\endgroup\$
7
\$\begingroup\$

C (GCC), 78 bytes

main(i){puts("P6\n78 52\n255");for(;i<4057;)printf(i++<2029?"%cW\xb7":"\xff\xd7%c",0);}

Attempt This Online! (code in Base64)

Outputs a PPM image to STDOUT.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Good answer! For those wondering how to save the image, they can run the compiled binary and redirect the output to a file. For example: /home/user/compiledflag > /home/user.flag.ppm. \$\endgroup\$ Mar 22 at 15:45
  • 1
    \$\begingroup\$ And for those wondering how to view the image, PPM is a format supported by most *NIX image tools, such as GIMP or the default GNOME Image Viewer (and many other, these are the ones installed on my system). :) \$\endgroup\$
    – matteo_c
    Mar 22 at 16:13
  • \$\begingroup\$ -7 bytes \$\endgroup\$
    – ceilingcat
    Mar 27 at 17:46
7
\$\begingroup\$

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!

\$\endgroup\$
11
  • \$\begingroup\$ You can remove 2 bytes with <canvas id=c> \$\endgroup\$ Mar 21 at 15:16
  • \$\begingroup\$ Another 2 bytes removed with c=c.getContext`2d` \$\endgroup\$ Mar 21 at 15:31
  • \$\begingroup\$ Yet another 2 bytes removed with c.fillRect(0,y,78,26) \$\endgroup\$ Mar 21 at 15:37
  • 1
    \$\begingroup\$ Again another 2 bytes removed with f=k=>c.fillRect(0,(c.fillStyle=k)>'$'?33:0,99,33) \$\endgroup\$ Mar 22 at 2:09
  • 1
    \$\begingroup\$ Hoping to get it to be below 100 chars, but all my changes are either staying the same or increasing. \$\endgroup\$ Mar 22 at 2:40
7
\$\begingroup\$

Batch, 93 bytes

@for %%i in (44 103)do @for /l %%j in (1,1,12)do @set/p=␛[%%im%PATH:~,80%<nul
@set/p=␛[m<nul

Assumes a default 80×25 screen with a PATH variable of at least 80 characters (this is true on a default Windows 10 installation). The last line is to stop the prompt appearing in yellow which wouldn't be a line of at least 78 non-whitespace characters and would therefore be illegal.

Note that is used to represent the nonprintable `` (good luck copying and pasting that).

\$\endgroup\$
7
\$\begingroup\$

HTML, 73 bytes

<p style=aspect-ratio:3/2;background:linear-gradient(#0057B7+50%,gold+50%

Thanks to @pxeger for pointing out that you can remove the quotes and not close the tag.

\$\endgroup\$
1
  • \$\begingroup\$ -3 bytes with the usual HTML abuse: <p style=aspect-ratio:3/2;background:linear-gradient(#0057B7+50%,gold+50% \$\endgroup\$
    – pxeger
    Mar 22 at 16:57

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.