Inspired by recent events in Texas, I decided to create an SVG-format image of the lone star state flag. Compared with the US flag, it’s a fairly simple design, being:

A rectangle that: (1) has a width to length ratio of two to three; and (2) contains: (A) one blue vertical stripe that has a width equal to one-third the length of the flag; (B) two equal horizontal stripes, the upper stripe white, the lower stripe red, each having a length equal to two-thirds the length of the flag; and (C) one white, regular five-pointed star: (i) located in the center of the blue stripe; (ii) oriented so that one point faces upward; and (iii) sized so that the diameter of a circle passing through the five points of the star is equal to three-fourths the width of the blue stripe.

Flag of Texas at Wikipedia.

Once again, I needed to make a star in SVG. Having forgotten how I did it last time and realizing I’d likely have scaling issues if I just cut and pasted, I decided I’d reinvent the wheel, and maybe make it better this time. Searching online, I found the ratio between the radii of the circles for the inner and outer vertices^{1}Pentagram at Wolfram MathWorld. is 0.381965 and the formulas for them in polar coordinates using radians are fairly elegant.^{2}Drawing radial shapes in D3.js.

I created a spreadsheet for calculating the vertices and converting them into cartesian coordinates. This simplified adding offsets later on when I decided to put the star into a `<symbol>`

. Fortunately, I made all the calculations dependent on a single scale factor, simplifying reducing the number of significant digits from four to three when I realized I didn’t need all that precision.

Once I had the flag working, I decided to hand-optimize, converting the colored rectangles into smaller `<path>`

s. I did the same with the star, but after running the resulting file through SVGOMG, I realized that its optimizer is still smarter than me, using relative coordinates when it resulted in a smaller dataset.

Here’s my code:

```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 533">
<path d="M0 0H800V533H0Z" fill="#fff" />
<path d="M0 267H800V533H0Z" fill="#bf0d3e" />
<path d="M0 0H267V533H0Z" fill="#00205b" />
<path d="M133 167,111 236H38L97 279,75 348,133 305,192 348,170 279,228 236H156Z" fill="#fff" />
</svg>
```

I find it easier to read than the fully optimized version from SVGOMG. Of course, there’s the Pocket Guide to Writing SVG if you need a reference.

Having made the lone star state flag, it wasn’t much more effort to make a one-star state flag. ;-)

You can download the optimized versions of both flags, here:

I also have the one-star version available as a png:

Same as for the Ukrainian flag, I release my Texas state flag files to the public domain to use as you wish, no attribution required.

- 1Pentagram at Wolfram MathWorld.
- 2