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 vertices1Pentagram at Wolfram MathWorld. is 0.381965 and the formulas for them in polar coordinates using radians are fairly elegant.2Drawing 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