svg.svg 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <svg
  2. width="800" height="600"
  3. xmlns="http://www.w3.org/2000/svg"
  4. onload="StartAnimation(evt)">
  5. <title>Test Tube Progress Bar</title>
  6. <desc>Created for the Web Directions SVG competition</desc>
  7. <script type="text/ecmascript"><![CDATA[
  8. var timevalue = 0;
  9. var timer_increment = 1;
  10. var max_time = 100;
  11. var hickory;
  12. var dickory;
  13. var dock;
  14. var i;
  15. function StartAnimation(evt) {
  16. hickory = evt.target.ownerDocument.getElementById("hickory");
  17. dickory = evt.target.ownerDocument.getElementById("dickory");
  18. dock = evt.target.ownerDocument.getElementById("dock");
  19. ShowAndGrowElement();
  20. }
  21. function ShowAndGrowElement() {
  22. timevalue = timevalue + timer_increment;
  23. if (timevalue > max_time)
  24. return;
  25. // Scale the text string gradually until it is 20 times larger
  26. scalefactor = (timevalue * 650) / max_time;
  27. if (timevalue < 30) {
  28. hickory.setAttribute("display", "");
  29. hickory.setAttribute("transform", "translate(" + (600+scalefactor*3*-1 ) + ", -144 )");
  30. }
  31. if (timevalue > 30 && timevalue < 66) {
  32. dickory.setAttribute("display", "");
  33. dickory.setAttribute("transform", "translate(" + (-795+scalefactor*2) + ", 0 )");
  34. }
  35. if (timevalue > 66) {
  36. dock.setAttribute("display", "");
  37. dock.setAttribute("transform", "translate(" + (1450+scalefactor*2*-1) + ", 144 )");
  38. }
  39. // Call ShowAndGrowElement again <timer_increment> milliseconds later.
  40. setTimeout("ShowAndGrowElement()", timer_increment)
  41. }
  42. window.ShowAndGrowElement = ShowAndGrowElement
  43. ]]></script>
  44. <rect
  45. fill="#2e3436"
  46. fill-rule="nonzero"
  47. stroke-width="3"
  48. y="0"
  49. x="0"
  50. height="600"
  51. width="800"
  52. id="rect3590"/>
  53. <text
  54. style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
  55. x="50"
  56. y="350"
  57. id="hickory"
  58. display="none">
  59. Hickory,</text>
  60. <text
  61. style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
  62. x="50"
  63. y="350"
  64. id="dickory"
  65. display="none">
  66. dickory,</text>
  67. <text
  68. style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
  69. x="50"
  70. y="350"
  71. id="dock"
  72. display="none">
  73. dock!</text>
  74. </svg>