34
\$\begingroup\$

The flag of Bangladesh is very simple. It looks like below:

enter image description here

The flag will be in bottle green (#006a4e) and rectangular in size in the proportion of length to width of 10:6, with a red circle in near middle. The red circle (#f42a41) will have a radius of one-fifth of the length of the flag. This image will help you to understand the proportions properly:

enter image description here

In this Graphical output challenge, you need to draw the flag of Bangladesh like first image. Standard loopholes apply, Shortest code wins.

Resolution cannot be 0px, or echo style answers not supported.

Minimum resolution is 286*176

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Related: Plot a centered circle. I adapted my answer from there \$\endgroup\$ – Kaddath Apr 20 at 7:52
  • 8
    \$\begingroup\$ Next challenge: draw the flag of Bhutan. \$\endgroup\$ – Mark Apr 21 at 23:31
  • 6
    \$\begingroup\$ So basically every attempt of mine to center a circle in a div 😂 \$\endgroup\$ – DeepSpace Apr 22 at 18:38

28 Answers 28

41
\$\begingroup\$

Wolfram Language (Mathematica), 23 bytes

¯\__(ツ)_/¯ of course there is a built in for this...

"BD"~CountryData~"Flag"

but you can also get the same result with...

Wolfram Language (Mathematica), 78 bytes

Graphics@{(c=RGBColor)@"#006a4e",{0,0}~Cuboid~{5,3},c@"#f42a41",Disk[{9,6}/4]}

enter image description here

-8 bytes {first code) thanks to @Makonede for "Bangladesh" to "BD"
-4 bytes (second code) thanks to @att

\$\endgroup\$
5
  • 14
    \$\begingroup\$ As usual, there's a built-in for this \$\endgroup\$ – Recursive Co. Apr 20 at 13:41
  • \$\begingroup\$ I am gonna ban Mathematica for my next challenges :P \$\endgroup\$ – wasif Apr 22 at 10:39
  • \$\begingroup\$ Does BD work instead of Bangladesh? If so, you can save 8 bytes \$\endgroup\$ – Makonede Apr 22 at 16:23
  • \$\begingroup\$ @Makonede yes, I think you are right! \$\endgroup\$ – ZaMoC Apr 22 at 17:50
  • \$\begingroup\$ 78: Graphics@{(c=RGBColor)@"#006a4e",{0,0}~Cuboid~{5,3},c@"#f42a41",Disk[{9,6}/4]} \$\endgroup\$ – att Apr 22 at 19:00
33
\$\begingroup\$

SVG, 67 bytes

By tweaking the viewBox, we can take advantage of the fact that the stroke of a shape has a default width. That avoids creating any element for the background.

<svg viewBox=-.9,-.6,2,1.2><circle r=.9 fill=#f42a41 stroke=#006a4e

\$\endgroup\$
6
  • 1
    \$\begingroup\$ The first comma is unnecessary. viewBox=-.9-.6,2,1.2 will also work \$\endgroup\$ – r3mainer Apr 21 at 10:22
  • 3
    \$\begingroup\$ @r3mainer There's disagreement on whether "-" is a valid delimeter outside of "path". removing that comma in the viewbox will break the snippet in firefox. \$\endgroup\$ – SE - stop firing the good guys Apr 21 at 10:25
  • 2
    \$\begingroup\$ Ah, ok then :-) \$\endgroup\$ – r3mainer Apr 21 at 10:28
  • \$\begingroup\$ If it works on at least one implementation, it's acceptable here. Removing the , works on Chrome 89 on Windows 10, so even if it breaks in Firefox, it's still an acceptable golf \$\endgroup\$ – caird coinheringaahing Apr 22 at 21:33
  • 1
    \$\begingroup\$ nit: This is HTML + SVG, standalone SVG needs the xmlns="http://www.w3.org/2000/svg" attribute and doesn't offer the nice parsing recuperation that allows unclosed elements and unquoted attributes \$\endgroup\$ – Kaiido Apr 23 at 5:35
26
\$\begingroup\$

SVG in HTML, 74 bytes

<svg viewBox=-9,-6,20,12 style=background:#006a4e><circle r=4 fill=#f42a41

-8 bytes by Joey

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Technically HTML+SVG (or HTML5), as this is not valid SVG and will fail to render as an .svg file. You also need HTML's block element behavior for the background to work. \$\endgroup\$ – Joey Apr 22 at 10:25
  • 2
    \$\begingroup\$ You can also shorten it quite a bit with a more clever viewBox: <svg viewBox=-9,-6,20,12 style=background:#006a4e><circle r=4 fill=#f42a41 \$\endgroup\$ – Joey Apr 22 at 10:31
25
\$\begingroup\$

Python3 + Turtle, 112 84 bytes

from turtle import*
setup(286,176)
bgcolor("#006a4e")
ht()
bk(14)
dot(114,"#f42a41")

-28B thanks to Digital Trauma

Can't try it online but here is how it looks:
Turtle Screenshot

\$\endgroup\$
3
  • 4
    \$\begingroup\$ Welcome to Code Golf! Nice first answer. \$\endgroup\$ – Redwolf Programs Apr 20 at 18:14
  • 1
    \$\begingroup\$ Some improvements for you \$\endgroup\$ – Digital Trauma Apr 20 at 21:21
  • 1
    \$\begingroup\$ DigitalTrauma & RedwolfPrograms thank you very much! \$\endgroup\$ – bb1950328 Apr 20 at 22:37
18
\$\begingroup\$

HTML, 110 bytes

<div style=padding:10%35%10%25%;background:#006a4e><nav style=padding:50%;background:#f42a41;border-radius:50%

-1 bytes by Adám

Fun fact: percentage values on padding-top / padding-bottom follow the container’s width (not height).

\$\endgroup\$
5
  • \$\begingroup\$ You don't need the trailing ;} \$\endgroup\$ – Adám Apr 20 at 6:47
  • 1
    \$\begingroup\$ Using p instead of div saves you a few bytes. \$\endgroup\$ – Adám Apr 20 at 6:49
  • \$\begingroup\$ Remove ;} seems not work (at least on above snippet) But remove } only works fine. Using p will introduce an extra padding-bottom which cause the circle moves to wrong position. \$\endgroup\$ – tsh Apr 20 at 7:13
  • \$\begingroup\$ this looks fine to me. \$\endgroup\$ – Adám Apr 20 at 7:16
  • \$\begingroup\$ Is there any significance to using <nav rather than <div? \$\endgroup\$ – Jonah Apr 20 at 21:30
14
\$\begingroup\$

Bash + ImageMagick, 80 79 characters

convert -size 500x300 xc:#006a4e -draw 'fill #f42a41 circle 225,150,225,250' x:

Thanks to

  • Chris Down for pointing out word I missed in man bash: “a word beginning with # causes that word and all remaining characters on that line to be ignored”

Sample output:
flag of Bangladesh

\$\endgroup\$
5
  • \$\begingroup\$ If you interpret ImageMagick to be a scripting language, arguably it goes down to 72 ;) \$\endgroup\$ – JamesTheAwesomeDude Apr 21 at 22:57
  • \$\begingroup\$ Well, ImageMagick can certainly be used as programming language when you pass it code as FX expression. But if I read the meta question Is ImageMagick a programming language?, my solution looks quite pathetic compared to that. \$\endgroup\$ – manatwork Apr 21 at 23:07
  • 1
    \$\begingroup\$ Nice answer! You can remove a byte by omitting the backslash before the #, as bash doesn't consider octothorpes within a word to be comment starters. \$\endgroup\$ – Chris Down Apr 23 at 10:48
  • \$\begingroup\$ Me shocked. 🤯 Thank you, @ChrisDown. \$\endgroup\$ – manatwork Apr 23 at 11:31
  • \$\begingroup\$ Here are a couple of other potential improvements I see to save three more characters, assuming I didn't miss any constraints. :-) One is if you use 300x180, the y0 passed to circle saves one character (it becomes 90). The second is that you can, instead of specifying the bottom-most point of the circle, specify the northwest point for the smallest possible x1,y1. So doing something like ao = sqrt(4.5^2+3^2); ab = a0 - 2, where ab/a0 == x/3 == y/4.5 (scaling for 300*180 with factor 30), you can ultimately pass 135,90,85,57 as the arguments to circle, saving three characters. :-) \$\endgroup\$ – Chris Down Apr 23 at 13:18
11
\$\begingroup\$

CSS, 128 107 104 89 bytes

*{background:radial-gradient(200px at 45%,#f42a41 50%,#006a4e 0)0 0/500px 300px no-repeat

For best results run the code snippet and then click Full Page. Edit: Worked out that setting the background position and size works better than setting the body size. Saved 3 bytes thanks to @sech1p. Saved 15 bytes by copying @dingledooper's radial gradient.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ You can save 3 bytes using * instead of body \$\endgroup\$ – sech1p Apr 20 at 15:21
9
\$\begingroup\$

Red, 101 bytes

Red[Needs:'view]view[base 500x300 0.106.78
draw[pen 244.42.65 fill-pen 244.42.65 circle 225x150 100]]

Flag of Bangladesh, drawn in Red

\$\endgroup\$
9
\$\begingroup\$

PostScript, 114 bytes

Code:

0 .42 .31 setrgbcolor
0 0 300 180 rectfill
.96 .16 .25 setrgbcolor
135 90 60 0 360 arc closepath fill
showpage

Result:

result

\$\endgroup\$
8
\$\begingroup\$

R, 143 111 108 92 bytes

plot(0:9,,"n",as=1)
rect(0,0,10,6,,,"#006a4e",NA)
symbols(4.5,3,2,f=NA,bg="#f42a41",i=F,a=T)

Try it on rrdr.io

-32 bytes after looking at @Dominic's answer to related challenge
-3 bytes thanks to @Frédéric

Slighlty ungolfed to show full argument names (R allows partial matching):

plot(x=0:9,y=NULL,type="n",asp=1)
rect(0,0,10,6,col="#006a4e",border=NA)
symbols(4.5,3,circles=2,fg=NA,bg="#f42a41",inches=F,add=T)

result image

\$\endgroup\$
3
  • 1
    \$\begingroup\$ rect(0,0,10,6,c="#006a4e",b=NA) can be replaced with rect(0,0,10,6,,,"#006a4e",NA) for -2 bytes and the NA in the 1st line by either T ort F for a whopping -1 byte \$\endgroup\$ – Frédéric Apr 20 at 18:26
  • \$\begingroup\$ @Frédéric, thanks. I chose T, because with the F the dot was "peeking" from behind the rectangle :) \$\endgroup\$ – pajonk Apr 20 at 18:44
  • \$\begingroup\$ And then I changed the approach :P \$\endgroup\$ – pajonk Apr 20 at 18:56
7
\$\begingroup\$

Perl 5, 89 bytes

Using ANSI escape codes for Linux-like command terminals. WSL in Windows should also work:

print"\33[0;3",($_%286-129)**2+($_/286-88)**2<3442?"1m#":"2m#",$_%286?"":"\n"for 1..50336

Run it in a terminal like this to get a big or small flag respectively in ansi colors or via a .ppm image file that can show the flag using most image viewers or web browsers:

perl -e'print"\33[0;3",($_%286-129)**2+($_/286-88)**2<3442?"1m#":"2m#",$_%286?"":"\n"for 1..50336'
perl -e'print"\33[0;3",($_%72-32)**2+($_/72-22)**2<215?"1m##":"2m##",$_%72?"":"\n"for 1..3168'
perl -E'say"P3 286 176 255 ",map 3442>($_%286-129)**2+($_/286-88)**2?"244 42 65 ":"0 106 78 ",1..50336' > flag.ppm
\$\endgroup\$
7
\$\begingroup\$

HTML, 95 bytes

<p style="width:500;height:300;background:radial-gradient(200px at 45%,#f42a41 50%,#006a4e 0)">

Try it online!

\$\endgroup\$
1
  • \$\begingroup\$ Nice radial gradient! \$\endgroup\$ – Neil Apr 23 at 18:59
7
\$\begingroup\$

C + stb_image_write, 296 288 278 270 bytes

#define STB_IMAGE_WRITE_IMPLEMENTATION
#include"stb_image_write.h"#include<math.h>
main(i){char p[151008];for(i=0;i<151008;i+=3){p[i]=0;p[i+1]=106;p[i+2]=78;if(pow(i/3%286-129,2)+pow(i/3/286-88,2)<3481)p[i]=244,p[i+1]=42,p[i+2]=65;}stbi_write_bmp("b.bmp",286,176,3,p);}

Outputs a BMP image called b.bmp:

enter image description here

Thanks to MerseyViking for the suggestion about removing sqrt

\$\endgroup\$
2
6
\$\begingroup\$

Basic (Tandy CoCo3 specifically), 109 Bytes

Firstly, hopefully there isn't a 'hard fast' rule on the exact color when the target computer only has a palette of 64 total... :-) I got as close as I could. I used the darkest green available and the 2nd darkest red.

Also, putting a CoCo3 in graphic mode doesn't "stay" unless you put some kind of pause at the end - but at 0.89 MHz it draws slowly enough you can see the result before it disappears back to text mode.

HSCREEN1:PALETTE1,2:PALETTE2,32:HCOLOR1,3:HLINE(0,0)-(299,179),PSET,BF:HCIRCLE(134,89),60,2:HPAINT(99,89),2,2

That said, if you did want to "press Enter to erase" and make it re-runnable without retyping in the line, it'll cost 9 bytes:

0 HSCREEN1:PALETTE1,2:PALETTE2,32:HCOLOR1,3:HLINE(0,0)-(299,179),PSET,BF:HCIRCLE(134,89),60,2:HPAINT(99,89),2,2:INPUTK

then type 'RUN'. Here's a screenshot of the result (emulated via VCC 2.1.0c on Server 2016):

enter image description here

The resolution of the flag is 300x180; the resolution of the video mode is 320x192, hence the (default) brighter green border on the edges.

Lastly, the program technically takes less bytes than I specified as it's tokenized, but I don't feel like doing that math.

\$\endgroup\$
4
\$\begingroup\$

p5.js, 97 bytes

setup=x=>createCanvas(300,180)+background(0,106,78)+fill(244,42,65)+noStroke()+circle(135,90,120)
\$\endgroup\$
1
  • \$\begingroup\$ Replace setup with draw like in my submission to save a character. I didn't see this one when I first submitted. \$\endgroup\$ – EnderShadow8 Apr 21 at 6:33
4
\$\begingroup\$

Ruby with Shoes, 87 characters

Shoes.app(width:500,height:300){background'006a4e'
stroke fill'f42a41'
oval 125,50,200}

Sample output:

flag of Bangladesh

\$\endgroup\$
4
\$\begingroup\$

Python + Pygame, 124 bytes

from pygame import*
s=display.set_mode((286,176))
s.fill((0,106,78))
draw.circle(s,(244,42,65),(128,86),57)
display.update()

I haven't used Pygame in a long time, so I'm probably missing something obvious here (like setting the background of the window directly) but it's not the shortest answer overall either.

-7 bytes thanks to @tsh's suggestion -31 bytes thanks to @ChrisH and @Sadap, wow I really need to learn Pygame again

\$\endgroup\$
8
  • \$\begingroup\$ Is from pygame import* works? \$\endgroup\$ – tsh Apr 20 at 13:18
  • \$\begingroup\$ @tsh Oh yeah, then we get draw instead of p.draw. \$\endgroup\$ – Recursive Co. Apr 20 at 13:20
  • 1
    \$\begingroup\$ I’m not in front of my computer. And I had not tested these codes. Is while 1 required to make it work? May I move 2 draw statements out from while loop? \$\endgroup\$ – tsh Apr 20 at 14:42
  • \$\begingroup\$ use s.fill() for the green part \$\endgroup\$ – bb1950328 Apr 20 at 16:45
  • 1
    \$\begingroup\$ @Sadap wow how could I have missed s.fill? Probably because I used to make all my games on a black background... \$\endgroup\$ – Recursive Co. Apr 20 at 18:36
4
\$\begingroup\$

Scratch, 230 201 bytes

Try it online!
-26 thanks to @att, who used pen size to skip the lengthy circle formula!

Scratchblocks can't understand that hex values are literally what the value should be, and incorrectly displays a color. Visually, changing set[C v]to[#123abc to set pen color to(#123abc would work in Scratchblocks (and save bytes in the process), but due to Scratch's HSL system, such a color cannot be reached without hacks. Using the built-in eyedrop tool, we can get close (almost indistinguishable to the human eye) but it is only an approximation. Alternatively, 23 15 blocks.

when gf clicked
go to x:(240)y:(
erase all
set pen size to(288
set[C v]to(27214
set pen color to(C
pen down
set x to(-240
set[C v]to[#f42a41
set x to(-24
set pen size to(192
set pen color to(C
pen down
\$\endgroup\$
2
  • \$\begingroup\$ 206 bytes, 16 blocks \$\endgroup\$ – att Apr 22 at 19:30
  • 1
    \$\begingroup\$ 204 \$\endgroup\$ – att Apr 22 at 19:38
4
\$\begingroup\$

Gnuplot, 147 140 137 120 112 bytes

se si rat-2
se xr[0:20]
se yr[0:6]
uns ti
uns ke
uns bor
p'-'w cir fs s fc rgb var
9 3 99 27214
9 3 4 16001601
e

Written out neatly:

# set length unit ratio on 2:1
set size ratio -2

# set axis ranges
set xrange[0:20]
set yrange[0:6]

# make it look less like a chart
unset tics
unset key
unset border

# plot inline data series (everything on the next lines, up to an 'e')
# data cx cy radius color (rgb, decimal)
p '-' with cirles fillstyle solid fillcolor rgb variable
9 3 99 27214
9 3 4 16001601
e

Result in the 'qt' terminal: Bangladesh flag, rendered using Gnuplot

\$\endgroup\$
1
3
\$\begingroup\$

PHP, 129 bytes

($f=imagecolorallocate)($i=imagecreate(500,300),0,106,78);imagefilledellipse($i,225,150,200,200,$f($i,244,32,65));imagepng($i,a);

You cannot try it online as online testers logically disable image creation functions. Here is the result (original file is called "a", I added the extension for the import)

enter image description here

\$\endgroup\$
4
  • 1
    \$\begingroup\$ Why have you set $f to imagecolorallocate? Can't you save 7 bytes by using it directly? \$\endgroup\$ – CJ Dennis Apr 23 at 14:06
  • \$\begingroup\$ @CJDennis because it is used a second time, without it in a variable it would be 11 bytes more: imagecolorallocate($i=imagecreate(500,300),0,106,78);imagefilledellipse($i,225,150,200,200,imagecolorallocate($i,244,32,65));imagepng($i,a); \$\endgroup\$ – Kaddath Apr 26 at 7:05
  • \$\begingroup\$ Oh, I see! You're using it immediately after assigning it! That is clever after all! \$\endgroup\$ – CJ Dennis Apr 27 at 0:20
  • \$\begingroup\$ @CJDennis this syntax only works in PHP 7+ though, in 5.6 you'll have a syntax error, unexpected '(' ;) \$\endgroup\$ – Kaddath Apr 27 at 7:20
3
\$\begingroup\$

Python 3

I tried different solutions, here are my two best attempts...

Python + turtle, 113 bytes

Thanks to @Sadap to give me some hints on an "alternative" use of the turtle :)

from turtle import*
s=Screen()
s.screensize(300,180,'#006a4e')
s.setup(305,183)
ht()
setx(-15)
dot(120,'#f42a41')

python + turtle

Commented code:

from turtle import*
# initialize a new window
s=Screen()
# define the turtle drawing area, with thee green background
s.screensize(300,180,'#006a4e')
# setup the size of the window
# slightly bigger than the drawing area, to avoid the scroll bars
s.setup(305,183)
# hide turtle default image
ht()
# from the center of the image, move to the left
# center of the circle
setx(-15)
# draw the red circle
dot(120,'#f42a41')

Python + tkinter, 132 bytes

from tkinter import*  
c=Canvas(Tk(),bg='#006a4e',width=300,height=180)
c.create_oval(75,30,195,150,fill='#f42a41',width=0)
c.pack()

python + tkinter

Commented code:

from tkinter import*
# initialize a new window, setting the background color and the size 
c=Canvas(Tk(),bg='#006a4e',width=300,height=180)
# draw the red circle
c.create_oval(75,30,195,150,fill='#f42a41',width=0)
# add the circle to the canvas
c.pack()
\$\endgroup\$
3
\$\begingroup\$

Lua + LÖVE/Love2D, 176 160 bytes

l=love;g=l.graphics;c=255;l.window.setMode(500,300)function l.draw()g.setBackgroundColor(0,106/c,78/c)g.setColor(244/c,42/c,65/c)g.circle('fill',225,150,100)end

-16 bytes thanks to @manatwork

Screenshot

\$\endgroup\$
1
  • 1
    \$\begingroup\$ You know that 0 / 255 = 0, right? And better use a g=l.graphics variable too. \$\endgroup\$ – manatwork Apr 20 at 18:23
3
\$\begingroup\$

stacked, 93 bytes

400 setwidth 240 setheight'#006a4e'setbg'#f42a41'allstyle'370px Arial'font 69 226 to'●'text

Online interpreter. Here's the output generated (Firefox, latest version):

picture of bangladesh flag generated by stacked program

Or, a screenshot of the webpage:

screenshot of the program and bangladesh flag it generates

Explanation

Simply initializes the canvas with appropriate dimensions, sets the appropriate background color, and then draws a bullet character of the correct font height and location. We have to do this because stacked has no native way of drawing circles arbitrarily. The correctness of these arbitrary values can be verified with the following program, which draws a square on the lower-right quadrant of where the circle ought to be:

400 setwidth 240 setheight'#006a4e'setbg'#f42a41'allstyle'370px Arial'font 69 226 to'●'text

'white' allstyle
180 120 to
[80 go 90 turn] 4*

bangladesh flag with white measuring square on lower right quadrant

\$\endgroup\$
3
\$\begingroup\$

HTML / Pug + Tailwind, 96 bytes

.w-80.py-8.pl-20(style='background:#006a4e')
 .rounded-full.w-32.h-32(style='background:#f42a41')

Test

HTML / Pug + Tailwind, slightly changed colors, 64 bytes

.w-80.py-8.pl-20.bg-green-800
 .rounded-full.w-32.h-32.bg-red-600

Test

\$\endgroup\$
1
3
\$\begingroup\$

HTML/CSS, 168 bytes

<div><div style=left:125;top:50;width:200;height:200;background:#f42a41;border-radius:50%><style>div{position:fixed;left:0;top:0;width:500;height:300;background:#006a4e

You can try it out here (doesn't seem to work as a snippet, for whatever reason...)

-1 byte thanks to Adám by removing the } at the end of the style block
-2 bytes thanks to Manish Kandu
-12 bytes thanks to pxeger
-13 bytes thanks to Neil

\$\endgroup\$
8
2
\$\begingroup\$

Racket, 110 bytes

#lang slideshow
(pin-over(colorize(filled-rectangle 300 180)'(0 106 78))75 30(colorize(disk 120)'(244 42 65)))

Can't try it online!, but here's a screenshot:

enter image description here

\$\endgroup\$
2
\$\begingroup\$

FLTK, 135 characters

Function{}{}{Fl_Window{}{xywh{0 0 500 300}box BORDER_BOX color 0x6a4eff}{Fl_Box{}{xywh{125 50 200 200}box OFLAT_BOX color 0xf42a41ff}}}

Ungolfed:

Function {} {} {
    Fl_Window {} {
        xywh {0 0 500 300}
        box BORDER_BOX
        color 0x6a4eff
      } {
        Fl_Box {} {
            xywh {125 50 200 200}
            box OFLAT_BOX
            color 0xf42a41ff
        }
    }
}

Sample output:

flag of Bangladesh

\$\endgroup\$
2
\$\begingroup\$

p5.js, 105 98 96 bytes

draw=x=>createCanvas(300,180)+background(0,106,78)+noStroke()+fill(244,42,65)+circle(135,90,120)

Try it in the editor here.

\$\endgroup\$
1
  • \$\begingroup\$ Welcome to the site, and nice first answer! \$\endgroup\$ – caird coinheringaahing Apr 21 at 2:11

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.