New Mexico flag SVG generator


+ - 450 × 300  set image width:    reset color scheme: 

Uses inline SVG and a canvas to generate a New Mexico flag of any size.
Resize using the +/- links, or set the width directly.
Right-click to save the image as a png.
Should work in any modern browser (except Internet Explorer).


According to New Mexico Statutes and Court Rules, Section 12-3-2:

Said flag shall be the ancient Zia sun symbol of red in the center of a field of yellow.  The colors shall be the red and yellow of old Spain.  The proportion of the flag shall be a width of two-thirds its length.  The sun symbol shall be one-third of the length of the flag.  Said symbol shall have four groups of rays set at right angles; each group shall consist of four rays, the two inner rays of the group shall be one-fifth longer than the outer rays of the group.  The diameter of the circle in the center of the symbol shall be one-third of the width of the symbol.

—https://en.wikipedia.org/wiki/Flag_of_New_Mexico

I confess that if I were designing the flag from scratch, I would make the sun symbol a little larger.  Try it (note that it will no longer be an official flag).


What are “the red and yellow of old Spain?”  The colors of the flag of Spain, as officially defined by the Spanish Royal Decree 441/1981 of 27 February, in CIELAB (actually CIEHCL) and CIE-1931 Yxy, both evidently using Illuminant C, are:

HCL Yxy sRGB
Rojo bandera (flag red) 35.070.037.0 9.50.6140.320 b00b1a
Amarillo gualda bandera (flag weld-yellow) 85.095.080.0 56.70.4880.469 fdbd00

—https://en.wikipedia.org/wiki/Flag_of_Spain
—https://www.lamoncloa.gob.es/espana/simbolosdelestado/Paginas/legislacion/BanderaRD441-1981.aspx
—http://www.brucelindbloom.com/index.html?ColorCalculator.html

The Wikipedia article gives RGB values of aa151b and f1bf00 for the above; but these are based on D50, not Illuminant C.  And many online images use a brighter color scheme, bf0a30 (sometimes called “Old Glory Red,” but this does not appear to be any sort of standard), and ffd700 (“Gold” in the CSS named colors).  Here, I have used c00000 (“Free Speech Red”) and Gold.

Old Glory RedFree Speech Red


The width and spacing of the rays, and the thickness of the circle, are not oficially specified.
Starting from the center and working outward using the measurements in the diagram below, the diameter of the circle is 50 units.
The length of the long rays is therefore 50 × 3 = 150, and the short 150 × (5/6) = 125.
The flag dimensions are (150 × 3) × (150 × 2) = 450 × 300.




(A note about the code:  the SVG dimensions are based on a stroked circle and paths, and the stroke width is taken into account when drawing and positioning the shapes.)