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> 

Spinning with a spacer

I decided to modify that last pattern to be without hexagons. It has the same essential pattern but I exchanged the hexagons with triangles. I needed to add some green squares to space things out so that the paths didn't overlap. The decorative red squares eliminate some of the some of the white space that would make the non-mirror image spinny gap seem very different and thin 3-way gaps. Perhaps I should throw in the cool svg things to liven-up or fade the background so that I have more options for the white-ness of the gaps.