Draw the flag of Bangladesh

Question

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

Answer 1

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

Answer 2

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

Answer 3

SVG in HTML, 74 bytes

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

-8 bytes by Joey

Answer 4

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:

Answer 5

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

Answer 6

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:

Answer 7

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.

Answer 8

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:

Answer 9

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

Answer 10

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

Answer 11

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)

Answer 12

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:

Thanks to MerseyViking for the suggestion about removing sqrt

Answer 13

HTML, 95 bytes

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

Try it online!

Answer 14

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.

Answer 15

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:

Answer 16

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)

Answer 17

p5.js, 97 bytes

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

Answer 18

Ruby with Shoes, 87 characters

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

Sample output:

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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

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*

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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:

Answer 27

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:

Answer 28

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.

Answer 29

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

Answer 30

Javascript + HTML, 167 153

Javascript: 154 140, HTML: 13

C.width=w=300
C.height=h=180 // 300 * 0.6
with(C.getContext`2d`)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