title: CSS - Draw SVG Lines Animations
body: <p>I have a simple diamond made in an SVG. I'd like to create an animation where the lines draw themselves from their x1/y1 points to the x2/y2 points over the period of 3 seconds or so using CSS3. </p>
  
  <p>Animations I've done before, but can't seem to figure out how to do it with an SVG. Any help is apprecieated! Thanks.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Ellipse_2_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0px" y="0px" viewBox="82 165.3 443.1 461.3" enable-background="new 82 165.3 443.1 461.3" xml:space="preserve"&gt;
  &lt;line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="133.5" y1="396.9" x2="306.6" y2="223.8"/&gt;
  &lt;line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="478.5" y1="396.9" x2="305.4" y2="223.8"/&gt;
  &lt;line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="478.5" y1="395.7" x2="305.4" y2="568.8"/&gt;
  &lt;line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="306.6" y1="568.8" x2="133.5" y2="395.7"/&gt;
  &lt;/svg&gt;
  </code></pre>