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

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:

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

• Related: Plot a centered circle. I adapted my answer from there Apr 20, 2021 at 7:52
• Next challenge: draw the flag of Bhutan.
– Mark
Apr 21, 2021 at 23:31
• So basically every attempt of mine to center a circle in a div 😂 Apr 22, 2021 at 18:38
• @Mark Mathematica, 23 bytes: "BT"~CountryData~"Flag" Jan 14, 2022 at 3:31

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


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

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

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

• The first comma is unnecessary. viewBox=-.9-.6,2,1.2 will also work Apr 21, 2021 at 10:22
• @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. Apr 21, 2021 at 10:25
• Ah, ok then :-) Apr 21, 2021 at 10:28
• 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 Apr 22, 2021 at 21:33
• 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 Apr 23, 2021 at 5:35

SVG in HTML, 74 bytes

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

-8 bytes by Joey

• 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.
– Joey
Apr 22, 2021 at 10:25
• 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
– Joey
Apr 22, 2021 at 10:31

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:

• Welcome to Code Golf! Nice first answer. Apr 20, 2021 at 18:14
• Some improvements for you Apr 20, 2021 at 21:21
• DigitalTrauma & RedwolfPrograms thank you very much! Apr 20, 2021 at 22:37

HTML, 110 bytes

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

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

• You don't need the trailing ;}
Apr 20, 2021 at 6:47
• Using p instead of div saves you a few bytes.
Apr 20, 2021 at 6:49
• 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.
– tsh
Apr 20, 2021 at 7:13
• this looks fine to me.
Apr 20, 2021 at 7:16
• Is there any significance to using <nav rather than <div? Apr 20, 2021 at 21:30

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:

• If you interpret ImageMagick to be a scripting language, arguably it goes down to 72 ;) Apr 21, 2021 at 22:57
• 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. Apr 21, 2021 at 23:07
• 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. Apr 23, 2021 at 10:48
• Me shocked. 🤯 Thank you, @ChrisDown. Apr 23, 2021 at 11:31
• 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. :-) Apr 23, 2021 at 13:18

CSS, 128107104 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.

• You can save 3 bytes using * instead of body Apr 20, 2021 at 15:21

PostScript, 114 95 bytes

Code:

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


Result:

• closepath and showpage can be deleted May 2, 2022 at 17:25
• @bartyslartfast Thanks, that removed 19 bytes. May 2, 2022 at 18:19

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


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  R, 143111108 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)  • 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 Apr 20, 2021 at 18:26 • @Frédéric, thanks. I chose T, because with the F the dot was "peeking" from behind the rectangle :) Apr 20, 2021 at 18:44 • And then I changed the approach :P Apr 20, 2021 at 18:56 C + stb_image_write, 296288278 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: Thanks to MerseyViking for the suggestion about removing sqrt • Welcome to Code Golf, and nice first answer! Be sure to check out our Tips for golfing in C page for ways you can golf your program Apr 21, 2021 at 21:41 • You can get rid of the sqrt by comparing the pow() sum against 3481 Apr 22, 2021 at 8:47 HTML, 95 bytes <p style="width:500;height:300;background:radial-gradient(200px at 45%,#f42a41 50%,#006a4e 0)">  Try it online! • Nice radial gradient! – Neil Apr 23, 2021 at 18:59 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): 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. Gnuplot, 147140137120 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: • Welcome to Code Golf, and nice first answer! Apr 22, 2021 at 15:53 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) • Why have you set $f to imagecolorallocate? Can't you save 7 bytes by using it directly? Apr 23, 2021 at 14:06
• @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); Apr 26, 2021 at 7:05
• Oh, I see! You're using it immediately after assigning it! That is clever after all! Apr 27, 2021 at 0:20
• @CJDennis this syntax only works in PHP 7+ though, in 5.6 you'll have a syntax error, unexpected '(' ;) Apr 27, 2021 at 7:20

p5.js, 97 bytes

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

• Replace setup with draw like in my submission to save a character. I didn't see this one when I first submitted. Apr 21, 2021 at 6:33

Ruby with Shoes, 87 characters

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


Sample output:

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

• Is from pygame import* works?
– tsh
Apr 20, 2021 at 13:18
• @tsh Oh yeah, then we get draw instead of p.draw.
– user100690
Apr 20, 2021 at 13:20
• 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?
– tsh
Apr 20, 2021 at 14:42
• use s.fill() for the green part Apr 20, 2021 at 16:45
• @Sadap wow how could I have missed s.fill? Probably because I used to make all my games on a black background...
– user100690
Apr 20, 2021 at 18:36

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


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


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


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

• You know that 0 / 255 = 0, right? And better use a g=l.graphics variable too. Apr 20, 2021 at 18:23

stacked, 93 bytes

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


Or, a screenshot of the webpage:

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*


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

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

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

• 206 bytes, 16 blocks
– att
Apr 22, 2021 at 19:30
• 204
– att
Apr 22, 2021 at 19:38

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:

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:

p5.js, 10598 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.

• Welcome to the site, and nice first answer! Apr 21, 2021 at 2:11

Desmos, 64 61 bytes

r=rgb(244,42,65)
g=rgb(0,106,78)
-9<=x<=11\{yy<36\}
xx+yy<=16


Try it on Desmos!

-3 bytes thanks to Aiden Chow

Javascript + HTML, 167 153

Javascript: 154 140, HTML: 13

C.width=w=300
C.height=h=180 // 300 * 0.6
with(C.getContext2d)fillStyle="#006a4e",fillRect(0,0,w,h),fillStyle="#f42a41",arc(.45*w,.3*w,.2*w,0,7),fill()
<canvas id=C>

-14 characters from @Ismael Miguel

• You can save a few bytes by using with(), like this: with(C.getContext2d)fillStyle="#006a4e",fillRect(0,0,w,h),fillStyle="#f42a41",arc(0.45*w,0.3*w,0.2*w,0,7),fill(). You can also assign the w variable like this: C.width=w=300. If you don't mind putting everything in a single line, you can just do this: C.width=w=300,C.height=h=0.6*w;with(C.getContext2d)fillStyle="#006a4e",fillRect(0,0,w,h),fillStyle="#f42a41",arc(0.45*w,0.3*w,0.2*w,0,7),fill(). The ; can be replaced with a newline for no size difference. In total, this saves 9 bytes. May 5, 2022 at 23:18