Draw the flag of Tennessee

Question

The flag of Tennessee is specified by chapter 498 of the Public Acts of 1905.

An oblong flag or banner in length one and two thirds times its width, the large or principal field of same to be of color red, but said flag or banner ending at its free or outer end in a perpendicular bar of blue, of uniform width, running from side to side; that is to say, from top to bottom of said flag or banner, and separated from the red field by a narrow margin or stripe of white of uniform width; the width of the white stripe to be one-fifth that of the blue bar; and the total width of the bar and stripe together to be equal to one-eighth of the width of the flag.

In the center of the red field shall be a smaller circular field of blue, separated from the surrounding red field by a circular margin or stripe of white of uniform width and of the same width as the straight margin or stripe first mentioned. The breadth or diameter of the circular blue field, exclusive of the white margin, shall be equal to one-half of the width of the flag. Inside the circular blue field shall be three five-pointed stars of white distributed at equal intervals around a point in the center of the blue field and shall be of such size and arrangement that one point of each star shall approach as closely as practicable without actually touching one point of each of the other two around the center point of the field; and the two outer points of each star shall approach as nearly as practicable without actually touching the periphery of the blue field. The arrangement of the three stars shall be such that the centers of no two stars shall be in a line parallel to either the side or end of the flag, but intermediate between same; and the highest star shall be the one nearest the upper confined corner of the flag.

Here is the flag, with annotations for its ratios:

Your task is to draw this flag in a way that complies with the statute. However, because the statute is ambiguous, you have some wiggle room with what you output. Specifically:

• You may use any colors reasonably recognizable as "red", "white", and "blue". (The sample image uses #cc0000, #002d65, and #ffffff.)
• The "stars" may have any exterior or interior angles. But all the interior angles must be equal, all the exterior angles must be equal, all edges must be the same length, it must have ten edges and ten vertices, and it must be reasonably recognizable as a five-pointed star.
• The stars must be as large as "practicable" so that their points do not touch each other in the center or the white band around the edge of the circle. Between the two points of each star closest to the edge and the edge, and between the points approaching the center of any two stars, there must be at least 1 pixel of space but not more than 1/48 of the length of the flag.
• The centers of the three stars may form any equilateral triangle, so long as no side of the triangle is parallel to an edge of the flag, and the vertex closest to the top of the flag is closer to the top left corner than the top right corner.

Shortest code wins.

Answer 1

PostScript, 346 315 bytes

Code (compressed version):

5 5 scale<</C {setrgbcolor}/R{1 0 0 C}/B{0 0 1 C}/W{1 setgray}/o{closepath fill}/c{0 360 arc o}/f{rectfill}/t{translate}/p{currentpoint}/s{gsave p t 4{0 -11 lineto p t -144 rotate}repeat o grestore}>>begin R 0 0 74 48 f B 75 0 5 48 f W 37 24 13 c B 37 24 12 c W 37 24 t 3{-.1 -.5 moveto s 120 rotate}repeat showpage

Code (uncompressed version):

5 5 scale                 % over-all scale

% define some short-named procedures for later use
<<
  /C {setrgbcolor}
  /R {1 0 0 C}            % set red color
  /B {0 0 1 C}            % set blue color
  /W {1 setgray}          % set white color
  /o {closepath fill}
  /c {0 360 arc o}        % draw circle
  /f {rectfill}
  /t {translate}
  /p {currentpoint}
  /s {                    % draw 5-pointed star
    gsave
    p t
    4 {
      0 -11 lineto          % one line of star
      p t
      -144 rotate           % rotate by 144°
    } repeat
    o                       % fill the star
    grestore
  }
>> begin

R 0 0 74 48 f             % draw big red rectangle
B 75 0 5 48 f             % draw blue rectangle
W 37 24 13 c              % draw white circle
B 37 24 12 c              % draw blue circle
W
37 24 t                   % translate to center of circle
3 {
  -.1 -.5 moveto          % move a little off the center
  s                       % draw white star
  120 rotate              % rotate by 120°
} repeat
showpage

Result:

Answer 2

HTML+CSS 28+291 = 319 bytes

Tested on FireFox 69 and Chrome 77 on Windows 10 1903.

*{position:absolute}c,d{height:480px}d,e{background:blue}c{width:700px;background:red}d{width:84px;left:716px}e{width:240px;height:240px;left:214px;top:104px;border-radius:100%;color:#FFF;border:16px solid}f{left:21px;top:-44px}g{font-size:150px;transform:rotate(120deg);top:65px;left:110px}

<c><d></d><e><f><g>★<g>★<g>★

---

HTML+CSS 28+278 = 306 bytes

This version uses % instead of pixels, so some places can be off by a tiny amount of pixels, but CSS is shorter.

*{position:absolute}c,d{height:480px}d,e{background:blue}c{width:700px;background:red}d{width:84px;left:102%}e{width:34%;height:50%;left:31%;top:22%;border-radius:100%;color:#FFF;border:16px solid}f{left:9%;top:-19%;font-size:938%}g{transform:rotate(120deg);top:65px;left:110px}

<c><d></d><e><f><g>★<g>★<g>★

Answer 3

Scratch, 530 bytes

Try it online!

I will be explaining the code here as well as in Scratch so that parameters can be more easily confirmed. Note that 1/48 = 2 pixels. Alternatively, 43 blocks

define W
set pen color to(#fff
define B
set pen color to(#036
when gf clicked
set y to(-48
erase all
set pen size to(1
pen down
repeat(96
change y by(1
set x to(86
B
set x to(76
W
set x to(74
set pen color to(#c00
set x to(-74
end
go to x:()y:(
set pen size to(52
W
pen down
set pen size to(48
B
pen down
set pen size to(1
W
repeat(3
pen up
go to x:()y:(
turn cw(120)degrees
move(2)steps
pen down
set[S v]to(20
repeat(9
change[S v]by(-2
turn cw(18)degrees
move(1)steps
turn ccw(18)degrees
repeat(5
move(S)steps
turn cw(144)degrees

Definitions

define W                Combined, these definitions save ~ 40 bytes
set pen color to(#fff   Sets the pen color to white
define B                Note that these hex values are approximations - they may not be perfectly replicated in vanilla Scratch
set pen color to(#036   Sets pen color to blue

Base

when gf clicked         Initiates code
set y to(-48            Sets y position to the bottom of the flag 
erase all               Clears the stage
set pen size to(1       Resets the pen to be 1 pixel in diameter
pen down                Applies the pen
repeat(96               Loops code for each row of pixels in the flag
change y by(1           Moves y position to the next row
set x to(86             Sets the x position to the right side of the flag
B                       Sets pen color to blue
set x to(76             Draws a horizontal line 10 pixels long
W                       Sets pen color to blue
set x to(74             Draws a horizontal line 2 pixels long
set pen color to(#c00   Sets pen color to red
set x to(-74            Draws a horizontal line 148 pixels long
end                     Signifies the end of the code that should be looped

Circles

go to x:()y:(        Sets position to the center of the red field (which, for optimization, is the origin)
set pen size to(52   Sets the diameter of the pen to 52 pixels (diameter of the white ring)
W                 Sets the pen color to white   
pen down             Applies the pen
set pen size to(48   Sets the diameter of the pen to 48 pixels (diameter of the blue circle)
B                    Sets the pen color to blue
pen down             Applies the smaller blue circle onto the white, making the ring

Stars

set pen size to(1     Sets the diameter of the pen to 1 pixel
W                     Sets the pen color to white
repeat(3              Loops code for each star
pen up                Removes the pen
go to x:()y:(         Moves to the center of the circle
turn cw(120)degrees   Rotates around the center
move(2)steps          Moves 2 pixels out in a certain direction
pen down              Applies the pen
set[S v]to(20         Sets the size of the stars to 20 pixels
repeat(9              Loops code so that 9 nesting pentagrams are drawn, essentially filling in the stars
change[S v]by(-2      Decrements the size of the next pentagram
turn cw(18)degrees      Moves the starting position
move(1)steps            of the pentagram to adjust
turn ccw(18)degrees     for the smaller size
repeat(5              Loops code for each edge of a pentagram
move(S)steps          Draws an edge of the appropriate length
turn cw(144)degrees   Rotates the edge to be drawn an appropriate amount

     Note that an "end" line is not needed if a "c-block" is at the end of a script

Answer 4

PHP, 288 bytes

<?php
echo gzuncompress(base64_decode("eJyNjssKgzAQRX9loIupi9DM+GgF47+IJiagtcT08fnVYMFCF90Mc+Hcw63mR19XXrcBnq4LViEzo9Wut0EhZRkaNwwKD62UeNrI10rluBUo/8VLLla+h+Cb62wmPyqM79AEfSQiOHPygY0xWFet8+2gwStMy7W7ywXCt/fWBAuuW5wIyx0FExCU4gKLuRC5oJgEMVBMIgXiGCOxOu6zBuu1WawBdzP9FOJGlskfGGcRewOZ3F4l"))?>

Unpacks and echos the following inline svg image that abuses the browser's handling of both the HTML and SVG standards (newlines added for readability):

<svg>
<rect width='222'height='144'fill='#c00'/>
<rect x='225'width='15'height='144'fill='#026'/>
<g transform='translate(111 72)'fill='#fff'>
<circle r='39'/>
<circle r='36' fill='#026'/>
<path id='t' d='m-21 1 9-8 11 6-5-11 9-8-12 1-5-11-3 12-12 1 11 6'/>
<use href='#t'transform='rotate(120)'/>
<use href='#t'transform='rotate(240)'/>

Tested under Chrome and Firefox.

Try it on phpfiddle.org

Answer 5

Java + Processing, 441 bytes

void star(float x,float y,float r1,float r2){float t=TWO_PI/5;beginShape();for(float a=0;a<TWO_PI;a+=t){vertex(x+cos(a)*r2,y+sin(a)*r2);vertex(x+cos(a+t/2.0)*r1,y+sin(a+t/2.0)*r1);}endShape();}void setup(){size(166,100);background(#cc0000);stroke(255);fill(#002d65);strokeWeight(2.1);circle(77,50,50);rect(154,-3,13,103);noStroke();fill(255);for(int i=0;i<3;i++){pushMatrix();translate(77,50);rotate(i*2*PI/3);star(-5,12,4,11);popMatrix();}}

5 pointed star function modified from Processing examples.

Answer 6

Python+PIL, 485 bytes

from math import*;from PIL import Image,ImageDraw
_=255
w,B,W,l,a=(_,_,_),(0,45,101),425,393,1.85
I=Image.new('RGB',(W,_))
d=ImageDraw.Draw(I)
t=d.rectangle
t([0,0,W,_],(_,0,0));t([l,0,W,_],B);t([l,0,398,_],w)
x,y,e,f=193,127,64,'d.ellipse([(x-e,y-e),(x+e,y+e)],%s)'
exec(f%'w'+';e-=4;'+f%'B')
def S(x,y,R):p,a,v,r=[],pi/5,2.65,29;exec('R+=2*a;p+=[(x+cos(R)*r,y+sin(R)*r),x+cos(R+a)*r/v,y+sin(R+a)*r/v];'*5);d.polygon(p,w)
exec('S(193+cos(a)*32,127+sin(a)*32,a-1.85);a+=2;'*3)
I.save('img.png')

Answer 7

SVG, 260 bytes

Not very cross browser friendly, renders correctly in Firefox.

<svg viewBox=-35,-24,80,48 style=background:red><g fill=blue stroke=#fff><circle r=12.5 /><path d=M39.5,-44v99h99 /><g fill=#fff stroke=blue stroke-width=.2><text x=-10>★</text><text x=-10 transform=rotate(120)>★</text><text x=-10 transform=rotate(240)>★