Animacion principal del logotipo CODE.org

anim-0.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="800"
   height="800"
   viewBox="0 0 260 260">
   <defs>
    <g id="code">
	   <g>
		<path id="bordeExterior" fill="none" stroke="#000000" stroke-miterlimit="10" d="M256,238.327c0,7.795-6.378,14.173-14.173,14.173H16.173
			C8.378,252.5,2,246.122,2,238.327V15.673C2,7.878,8.378,1.5,16.173,1.5h225.654C249.622,1.5,256,7.878,256,15.673V238.327z"/>
		</g>
		<g>
		<path id="cBlock" fill="black" stroke="none" stroke-miterlimit="10" d="M125,109.327c0,7.795-6.378,14.173-14.173,14.173H33.173
			C25.378,123.5,19,117.122,19,109.327V31.673C19,23.878,25.378,17.5,33.173,17.5h77.653c7.795,0,14.173,6.378,14.173,14.173V109.327
			z"/>
		</g>
		<g>

		<path id="oBlock" fill="black" stroke="none" stroke-miterlimit="10" d="M239,109.327c0,7.795-6.378,14.173-14.173,14.173h-77.654
			c-7.795,0-14.173-6.378-14.173-14.173V31.673c0-7.795,6.378-14.173,14.173-14.173h77.654c7.795,0,14.173,6.378,14.173,14.173
			V109.327z"/>
		</g>
		<g>
		<path id="dBlock" fill="black" stroke="none" stroke-miterlimit="10" d="M125,222.327c0,7.795-6.378,14.173-14.173,14.173H33.173
			C25.378,236.5,19,230.122,19,222.327v-77.654c0-7.795,6.378-14.173,14.173-14.173h77.653c7.795,0,14.173,6.378,14.173,14.173
			V222.327z"/>
		</g>
		<g>
		<path id="eBlock" fill="black" stroke="none" stroke-miterlimit="10" d="M239,222.327c0,7.795-6.378,14.173-14.173,14.173h-77.654
			c-7.795,0-14.173-6.378-14.173-14.173v-77.654c0-7.795,6.378-14.173,14.173-14.173h77.654c7.795,0,14.173,6.378,14.173,14.173
			V222.327z"/>
		</g>
		<text transform="matrix(1 0 0 1 48 93.5)" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" font-family="sans-serif" font-size="72">C</text>
		<text transform="matrix(1 0 0 1 161 93.5)" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" font-family="sans-serif" font-size="72">O</text>
		<text transform="matrix(1 0 0 1 48 206.4453)" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" font-family="sans-serif" font-size="72">D</text>
		<text transform="matrix(1 0 0 1 161 206.4453)" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" font-family="sans-serif" font-size="72">E</text>
    </g>
   </defs>
   <g>
   <use xlink:href="#code">
	<animateTransform
	  id="escala"
	  attributeName="transform"
	  type="scale"
	  from="1"
	  to="0.25"
	  begin="mousedown"
	  dur="2s"
	  fill="freeze"
	/>
   </use>
	<animateTransform
		attributeName="transform"
		type="translate"
		from="0 0"
		to="50 50"
		begin="escala.begin"
		dur="2s"
		fill="freeze"
	/>
   </g>
</svg>