HTML 5 te neler var?

Ref: Google I/O 2010


KIRMIZI : HTML
YEŞİL : Javascript
SARI : CSS

Canvas 3D (WebGL)

SVG hakkında

<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)" >
  <rect x="10" y="10" width="5" height="5" fill="firebrick" />
  <circle r="10" fill="seagreen" stroke="blue"/>
  <rect x="5" y="5" width="12" height="2" fill="gray" stroke="silver"/>
</g>

<?xml version='1.0'?>
<svg width='100%' height='100%'>

  <filter id='dropshadow'>
    <feGaussianBlur in='SourceAlpha' stdDeviation='3' result='blur'/>
    <feOffset id= 'depth' in='blur' dx='1' dy='1' result='offsetBlur'/>
    <feMerge>
      <feMergeNode in='offsetBlur'/>
      <feMergeNode in='SourceGraphic'/>
    </feMerge>
  </filter>

  <!--<g transform='scale(2.5)'>
    <line x1='-110' y1='110' x2='-110' y2='-110' style='stroke:rgb(99,99,99);strokewidth:2'/>
    <line x1='-110' y1='110' x2='110' y2='110' style='stroke:rgb(99,99,99);strokewidth:2'/>
  </g>-->

  <line x1='0' y1='110' x2='0' y2='0'  style='stroke:red;strokewidth:2'/>
  <line x1='50' y1='110' x2='50' y2='0'  style='stroke:green;strokewidth:2'/>
  <g transform='scale(1.5)'>
    <g >
      <line x1='0' y1='110' x2='0' y2='0'  style='stroke:red;strokewidth:2'/>
      <line x1='50' y1='110' x2='50' y2='0'  style='stroke:green;strokewidth:2'/>


      <circle cx='10' cy='32' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='20' cy='47' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='30' cy='40' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='40' cy='30' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='50' cy='37' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='60' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='70' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='80' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='90' cy='35' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='100' cy='23' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='110' cy='31' r='1' stroke='black' strokewidth='2' fill='black'/>


      <polyline points='10 32, 20 47, 30 40, 40 30, 50 37, 60 29, 70 29, 80 29, 90 35, 100 23, 110 31,' style='fill:white;stroke:red;strokewidth:2'/>
      <!--<polyline points='1 32, 2 47, 3 40, 4 30, 5 37, 6 29, 7 29, 8 29, 9 35, 10 23, 11 31,' style='fill:white;stroke:red;strokewidth:2'/>-->
      <!--<polyline points='10 -32, 20 -47, 30 -40, 40 -30, 50 -37, 60 -29, 70 -29, 80 -29, 90 -35, 100 -23, 110 -31,' style='fill:white;stroke:red;stroke-width:2'/>-->


    </g>
  </g>

  <g transform='scale(-1.5) rotate(-90) transform'>
    <g >
      <line x1='0' y1='110' x2='0' y2='0'  style='stroke:red;strokewidth:2'/>
      <line x1='50' y1='110' x2='50' y2='0'  style='stroke:green;strokewidth:2'/>


      <circle cx='10' cy='32' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='20' cy='47' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='30' cy='40' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='40' cy='30' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='50' cy='37' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='60' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='70' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='80' cy='29' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='90' cy='35' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='100' cy='23' r='1' stroke='black' strokewidth='2' fill='black'/>

      <circle cx='110' cy='31' r='1' stroke='black' strokewidth='2' fill='black'/>


      <polyline points='10 32, 20 47, 30 40, 40 30, 50 37, 60 29, 70 29, 80 29, 90 35, 100 23, 110 31,' style='fill:white;stroke:red;strokewidth:2'/>

    </g>
  </g>



  <defs>
    <path id='path1' d="M10,150 A15 15 180 0 1 70 140 A15 25 180 0 0 130 130 A15 55 180 0 1 190 120" stroke="lightgreen" stroke-width="4" fill="none" marker-mid="url(#marker2)" marker-end="url(#marker1)" />

    <g id="group1" fill="green" opacity="0.9" >
      <rect x="20" y="20" width="100" height="100" opacity="0.5" />
      <rect x="80" y="80" width="100" height="100" fill="gray" />
    </g>
  </defs>
  <use x="500" y="0" width="200" height="200" xlink:href="#group1" />
  <use xlink:href="#group1" transform="rotate(70, 100, 100) translate(100,100)" />
  <use x="300" y="0" xlink:href="#path1" />

</svg>