Html 5 play

I'm always trying to coming up with some compelling reasons to code for my classes. The argument I try to make is that you can save time by making flexible and short code that does amazing things. I'm still only having limited success but maybe one day I'll have hit just the right code that lights a spark....

I did keep it relatively simple until I started to mess with the text...oops. The code tag doesn't seem to work within Blog spot...hmmm

 
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="230px" 
     height="360px" viewBox="0 0 230 360" enable-background="new 0 0 230 360" xml:space="preserve"> 

<!-- A bit of play with html 5 --> 
<defs> 
  <g id="Chev"> 
    <path id="C" transform="skewX(30) scale(1,0.8660)" d="M 0,0 0,80 80,80 80,0 60,0 60,60 20,60 20,0 z"/> 
    <path id="revC" opacity="0.4" transform="scale(1,-1) skewX(30) scale(1,0.8660)" d="M 0,0 0,80 80,80 80,0 60,0 60,60 20,60 20,0 z"/> 
  </g> 
</defs> 

<!-- HTML text --> 
<g>  <!-- incase I want to play with the colour --> 
  <g transform="translate(4,115)" >  <!-- had to position it here so that the skews were easier to figure out--> 
    <g> 
      <animateTransform id="breathIn" attributeName="transform" additive="sum" dur="2.5s" type="translate" values="80 0"/> 
      <animateTransform attributeName="transform" additive="sum" dur="2.5s" type="skewY" from="30" to="0"/> 
      <animateTransform attributeName="transform" additive="sum" dur="2.5s" type="translate" values="-80 0"/> 
      <text transform="skewY(-30) scale(1.42,1)" font-family="sans-serif" font-weight="bold" font-size="80" x ="0" y="0">H</text> 
    </g> 
  </g> 
  <g transform="translate(81,70)" >  <!-- had to position it here so that the skews were easier to figure out--> 
    <g> 
      <animateTransform attributeName="transform" attribueType="xml" dur="2.5s" type="skewY" from="-30" to="0"/> 
      <text transform="skewY(30) scale(0.85,1)" font-family="sans-serif" font-weight="bold" font-size="80" >TML</text> 
    </g> 
  </g> 
</g> 

<!-- the chevrons --> 
<g> 
  <g>  <!-- bottom red chevron (pointing down) --> 
    <animateMotion path="M 0,-400  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "red" transform="translate(150,115) rotate(-60,0,0) rotate(-30,0,0) translate(-200,-69.282)" /> 
  </g> 
  <g>  <!-- top red chevron (pointing up) --> 
    <animateMotion path="M 0,400  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "red" transform="translate(150,115) rotate(-60,0,0) rotate(150,0,0)" /> 
  </g> 
  <g>  <!-- top orange chevron (pointing up left) --> 
    <animateMotion path="M 346,200  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "orange" transform="translate(150,115) rotate(-60,0,0) rotate(90,0,0) translate(-120,69.282)" /> 
  </g> 
  <g>  <!-- bottom orange chevron (pointing down right) --> 
    <animateMotion path="M -346,-200  0,0 " dur="2.5s" /> 
    <use xlink:href="#Chev" fill = "orange" transform="translate(150,115) rotate(-60,0,0) rotate(270,0,0) translate(-160,-138.564)" /> 
  </g> 
</g> 
</svg>