SVG: NASA “meatball” logo – code update exercise

I recently went through NASA’s “meatball” logo, originally designed by James Modarelli in 1959. Looking at the svg version of this famous logo, I was interested in the svg code. It was obviously designed by some editor and not “by hand”. Here is an updated “beautified” version, at least from the code perspective, the result of a good and interesting svg exercise. There is an interesting fact that paths for all four letters are mixing absolute and relative path commands. It means that it is impossible to easily change a letter’s location, if necessary. 

<svg version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
     x="0px" y="0px" width="550px" height="460px" viewBox="0 0 110 92" enable-background="new 0 0 110 92"
     xml:space="preserve">
<defs>
 <g id="Spiky4StarRelative" transform="scale(0.5,0.5)">
 <path d="M-1.2,-1.2
l 0.2,-2.2 0.2,2.2 a1,1 0,0,1 0.8, 0.8
l 2.2,0.2 -2.2,0.2 a1,1 0,0,1 -0.8, 0.8
l-0.2,2.2 -0.2,-2.2 a1,1 0,0,1 -0.8,-0.8
l -2.2,-0.2 2.2,-0.2 a1,1 0,0,1 0.8,-0.8
 z" fill="white"/>
</g>
 <g id="RoundStars">
<circle fill="white" cx="47.68" cy="12.57" r="0.45"/>
<circle fill="white" cx="52.30" cy="13.17" r="0.45"/>
<circle fill="white" cx="58.36" cy="21.33" r="0.45"/>
<circle fill="white" cx="25.12" cy="63.33" r="0.45"/>
<circle fill="white" cx="26.29" cy="66.93" r="0.45"/>
<circle fill="white" cx="35.80" cy="61.32" r="0.45"/>
<circle fill="white" cx="38.50" cy="67.02" r="0.45"/>
<circle fill="white" cx="70.84" cy="61.08" r="0.45"/>
<circle fill="white" cx="82.48" cy="60.42" r="0.45"/>
<circle fill="white" cx="76.72" cy="57.96" r="0.45"/>
<circle fill="white" cx="70.84" cy="58.20" r="0.45"/>

<circle fill="white" cx="20.71" cy="63.87" r="0.337"/>
<circle fill="white" cx="39.01" cy="70.94" r="0.338"/>
<circle fill="white" cx="67.71" cy="64.98" r="0.337"/>
<circle fill="white" cx="76.05" cy="55.92" r="0.338"/>
<circle fill="white" cx="35.17" cy="23.96" r="0.337"/>
<circle fill="white" cx="44.35" cy="17.22" r="0.337"/>
<circle fill="white" cx="43.35" cy="16.56" r="0.337"/>
<circle fill="white" cx="42.45" cy="15.90" r="0.337"/>
<circle fill="white" cx="36.61" cy="25.70" r="0.337"/>
<circle fill="white" cx="50.13" cy="08.16" r="0.337"/>
<circle fill="white" cx="52.35" cy="17.88" r="0.337"/>
<circle fill="white" cx="48.85" cy="15.98" r="0.337"/>
<circle fill="white" cx="42.85" cy="18.56" r="0.337"/>
<circle fill="white" cx="69.31" cy="73.88" r="0.337"/>
<circle fill="white" cx="24.55" cy="65.61" r="0.338"/>
<circle fill="white" cx="48.01" cy="69.96" r="0.338"/>
<circle fill="white" cx="31.53" cy="65.34" r="0.338"/>
<circle fill="white" cx="34.45" cy="70.10" r="0.338"/>
<circle fill="white" cx="55.93" cy="67.10" r="0.337"/>
<circle fill="white" cx="67.77" cy="60.42" r="0.337"/>
<circle fill="white" cx="76.75" cy="64.52" r="0.337"/>
<circle fill="white" cx="79.82" cy="66.48" r="0.337"/>
<circle fill="white" cx="80.31" cy="61.14" r="0.337"/>
<circle fill="white" cx="35.67" cy="53.58" r="0.337"/>
</g>
 <g id="SpikyStars">
<use xlink:href="#Spiky4StarRelative" transform="translate(58.710,12.288)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(39.824,24.746)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(81.659,57.684)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(36.044,74.906)"></use>
<use xlink:href="#Spiky4StarRelative" transform="translate(78.104,66.506)"></use>
 </g>
</defs>
<g id="NASA_logo_meatball">
 <circle fill="#0B3D91" cx="50.049" cy="45" r="40.14"/>
 <use xlink:href="#RoundStars"></use>
 <use xlink:href="#SpikyStars"></use>
 <path id="redFlames" fill="#FC3D21"
       d="M59.568,35.385c-4.667,1.814-9.219,3.433-13.06,4.635c-7.805,2.444-29.16,9.06-42.06,17.4l1.08,0.42 c7.86-4.44,12.969-5.835,17.88-7.38c5.34-1.68,22.603-5.72,30.42-7.92c2.641-0.743,5.734-1.716,9.01-2.9 c-0.762-1.063-1.566-2.129-2.412-3.193C60.143,36.088,59.856,35.734,59.568,35.385z M65.27,43.244 c-1.13,0.763-2.077,1.372-2.74,1.756c-3.84,2.22-22.561,15-26.82,17.94s-16.08,14.1-19.56,17.34l-0.12,1.319 c11.22-10.08,14.74-12.566,19.2-15.959c5.52-4.2,16.939-11.97,20.82-14.46c3.71-2.38,7.056-4.569,10.059-6.572 c-0.049-0.082-0.098-0.164-0.147-0.247C65.736,43.99,65.505,43.618,65.27,43.244z M82.809,24.72 c-5.466,3.204-14.081,7.071-22.439,10.352c0.2,0.245,0.399,0.492,0.597,0.741c0.934,1.176,1.815,2.36,2.644,3.545 c6.57-2.42,13.779-5.668,19.499-9.599c-2.725,2.582-11.734,9.315-17.227,13.068c0.283,0.461,0.557,0.922,0.822,1.381 c8.322-5.569,13.922-9.668,17.185-12.409c4.5-3.78,14.76-12.24,18.66-23.58C95.709,16.92,87.621,21.899,82.809,24.72z"/>
 <path id="orbit" fill="white"
       d="M44.884,54.939c-0.885-1.114-2.109-2.606-3.028-3.763c-1.229-1.547-2.366-3.11-3.408-4.671 c-0.34,0.085-0.679,0.17-1.018,0.255c1.258,1.963,2.655,3.923,4.177,5.839c1.112,1.4,2.123,2.527,2.641,3.228 c0.105,0.142,0.313,0.456,0.594,0.874c0.324-0.22,0.651-0.442,0.981-0.666C45.504,55.688,45.189,55.323,44.884,54.939z M51.344,60.803c-0.727-0.688-2.49-1.837-4.325-3.561c-0.405,0.278-0.814,0.56-1.224,0.844c1.185,1.67,2.799,3.721,4.063,4.319 C51.762,63.307,52.275,61.685,51.344,60.803z M60.967,35.813c-10.492-13.206-23.309-20.461-28.835-16.07 c-4.292,3.41-2.53,13.376,3.386,23.845c0.306-0.105,0.609-0.208,0.909-0.31c-5.971-10.2-7.605-19.679-3.557-22.896 c5.087-4.042,17.37,3.241,27.558,16.064c2.109,2.654,3.963,5.318,5.533,7.915c6.012,9.95,7.857,18.948,3.703,22.621 c-1.271,1.124-5.155,1.565-10.243-0.725c-0.071,0.089,0.043,0.33,0.132,0.389c4.392,1.766,8.599,2.439,10.723,0.752 C75.38,63.342,71.459,49.019,60.967,35.813z"/>

 <g id="NASA">
		 <path id="N" fill="white"
      d="M15.969,37.38h6.72l5.64,9.57c0,0,0-6.93,0-7.47c0-0.84-1.065-1.935-1.44-2.1c0.45,0,4.38,0,4.65,0 c-0.285,0.075-1.2,1.185-1.2,2.1c0,0.45,0,10.5,0,10.98c0,0.675,0.975,1.605,1.44,1.965h-6.48l-5.73-9.615c0,0,0,7.17,0,7.56 c0,0.75,0.735,1.47,1.5,2.085h-4.95c0.705-0.3,1.38-1.245,1.44-1.995s0-10.425,0-10.845C17.559,38.7,16.674,37.95,15.969,37.38z"/>
   <!--path id="Absolute" fill="black" d="M38.559,50.79c0.09-0.6,0.36-1.8,0.36-1.8h4.98c0.225,0.6,0.393,1.139,0.48,1.65 c0.105,0.615-0.525,1.305-1.08,1.785h7.871 c0.164-0.11,0.327-0.22,0.49-0.329c-0.305-0.27-0.586-0.675-0.771-1.156 c-0.3-0.78-5.04-13.56-5.04-13.56h-7.8c0.375,0.345,1.455,1.275,1.29,2.28 c-0.147,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815C38.859,51.915,38.469,51.39,38.559,50.79zM41.049,41.58 l2.22,5.49h-3.9L41.049,41.58 z"/-->
   <path id="Arelative" fill="white" d="M38.559,50.79c0.09-0.6,0.36-1.8,0.36-1.8h4.98c0.225,0.6,0.393,1.139,0.48,1.65 c0.105,0.615-0.525,1.305-1.08,1.785h7.871 c0.164-0.11,0.327-0.22,0.49-0.329c-0.305-0.27-0.586-0.675-0.771-1.156 c-0.3-0.78-5.04-13.56-5.04-13.56h-7.8c0.375,0.345,1.455,1.275,1.29,2.28 c-0.147,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815
     c-0.45,-0.659 -0.84,-1.22, -0.75,-1.82 z m2.5,-9.2 l2.22,5.49h-3.9 z"/>
   <path id="S" fill="white"
      d="M65.748,44.848c-1.468,0.978-3.017,1.999-4.649,3.065c0.732,0.355,1.315,0.801,1.371,1.377 c0.104,1.082-2.07,1.605-4.035,1.38c-0.393-0.045-0.779-0.148-1.147-0.286c-0.408,0.263-0.82,0.528-1.238,0.796 c-0.425,0.273-0.941,0.609-1.53,0.997v1.553c0.39-0.765,1.243-1.45,1.905-1.485c0.285-0.015,1.275,0.9,5.355,0.675 c1.98-0.109,5.805-2.22,5.745-4.65C67.489,46.834,66.739,45.714,65.748,44.848z M54.519,48.6v1.582 c0.361-0.241,0.717-0.478,1.066-0.709C55.036,49.091,54.647,48.734,54.519,48.6z M64.353,43.855 c-0.38-0.225-0.765-0.422-1.134-0.596c-1.92-0.9-3.93-1.065-4.35-2.28c-0.296-0.857,0.54-1.65,2.58-1.62 c2.04,0.03,3.93,1.245,4.44,1.68v-3.87c-0.15,0.15-0.808,0.905-1.41,0.78c-1.155-0.24-3.12-0.553-5.37-0.54 c-2.58,0.015-4.8,2.009-4.875,4.53c-0.105,3.525,2.715,4.485,4.305,5.04c0.164,0.057,0.351,0.118,0.554,0.183 c1.525-0.992,2.731-1.756,3.437-2.163C63.004,44.726,63.625,44.334,64.353,43.855z"/>
   <path id="A" fill="white"
      d="M77.439,52.425h8.94c-0.495-0.12-1.05-0.705-1.35-1.485c-0.3-0.78-5.04-13.56-5.04-13.56H76.59 c-0.964,0.694-1.997,1.426-3.1,2.197c-0.003,0.028-0.006,0.056-0.011,0.083c-0.148,0.9-2.808,10.534-2.97,11.01 c-0.225,0.66-1.38,1.395-1.845,1.785h4.815c-0.48-0.54-0.87-1.065-0.78-1.665c0.09-0.6,0.36-1.8,0.36-1.8h4.98 c0.225,0.6,0.393,1.139,0.48,1.65C78.624,51.255,77.994,51.945,77.439,52.425z M73.509,47.07l1.68-5.49l2.22,5.49H73.509z M72.752,37.928c0.247-0.182,0.495-0.365,0.742-0.548h-1.305C72.319,37.5,72.534,37.689,72.752,37.928z"/>
	</g>
</g>
</svg>
This entry was posted in workday and tagged . Bookmark the permalink.

Leave a Reply