7
\$\begingroup\$

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:

Flag of Tennessee annotated with 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.

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

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:

result

\$\endgroup\$
5
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ This answer is invalid because the flag's proportions are incorrect (with a width of 480px it should be 800px long) and the stars are not correctly rotated: "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". \$\endgroup\$ – Purple P Oct 15 at 16:27
  • \$\begingroup\$ @PurpleP, I think the size is correct, total height = 480px, total width including white and blue strip = 800px, I will look into rotating stars later. \$\endgroup\$ – Night2 Oct 15 at 16:41
  • \$\begingroup\$ On my system, the stars clip outside the circle. \$\endgroup\$ – Purple P Oct 15 at 17:34
  • \$\begingroup\$ Looks ok on mine (Chrome on Windows). Nice work. \$\endgroup\$ – BradC Oct 15 at 20:48
2
\$\begingroup\$

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

\$\endgroup\$

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.