SVG Examples

Examples of the <svg> tag in HTML 5
SVG Christmas Tree Ornaments
A red circle and blue circle with glow on green gradient background
(see SVG demo above)
<svg xmlns="" version="1.1"
    style="width:400px; height:300px"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid slice"

      <linearGradient id="green-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
         <stop offset="0%" style="stop-color: #99ff99"/>
         <stop offset="100%" style="stop-color: #003300"/>
      <linearGradient id="red-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color: #ff0000"/>
         <stop offset="50%" style="stop-color: #990000"/>
         <stop offset="100%" style="stop-color: #990000"/>
      <radialGradient id="radial-glow-gradient" fx="40%" fy="40%" r="55%" spreadMethod="pad">
          <stop offset="0%"   style="stop-color: #ffffff; stop-opacity: 0.7"/>
          <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 0.01"/>
      <radialGradient id="radial-gradient" fx="35%" fy="25%" r="49%" spreadMethod="pad">
          <stop offset="0%"   style="stop-color: #ccccff; stop-opacity: 1.0"/>
          <stop offset="99%" style="stop-color: #0033ff; stop-opacity: 1.0"/>
          <stop offset="100%" style="stop-color: #66cc66; stop-opacity: 0.0"/>

   <rect x="0" y="0" width="100" height="100" style="fill: url(#green-gradient)"/>
   <circle cx="25" cy="65" r="15" style="fill: url(#red-gradient)"/>
   <circle cx="20" cy="58" r="6" style="opacity: 0.0; fill: url(#radial-glow-gradient)"
      <animate attributeType="CSS" attributeName="opacity"
         from="0.0" to="1.0" begin="5s" dur="8s" fill="freeze"/>
   <line x1="25" y1="36" x2="22" y2="47" style="stroke: #000000; stroke-width:1"/>
   <line x1="25" y1="36" x2="28" y2="47" style="stroke: #000000; stroke-width:1"/>
   <rect x="20" y="46" width="10" height="5" style="fill: #ffff00"/>

   <rect x="40" y="25" width="20" height="20" style="fill: url(#radial-gradient)"
      <animate attributeType="CSS" attributeName="opacity"
         from="0.0" to="1.0" begin="0s" dur="4s" fill="freeze"/>
   <text x="145" y="27" transform="scale(.33, 1.0)" style="fill:#000000;">^</text>
   <rect x="46" y="22" width="8" height="4" style="fill: #ffff00"/>


The large red ornament is created using an SVG <circle> tag with a separate circular glow gradient. Its "ornament hanger" is created with two SVG <line> tags. The animation causes the glow gradient to appear slowly. Since the animation starts after a five second delay (begin="5s"), the style on the circle must include opacity: 0.0, which matches the from attribute on the <animate tag; otherwise the glow would suddenly disappear when the animation starts.

The smaller blue ornament is created with more minimal code. The ornament ball and its glow are created with a single radial gradient in a rectangle. Its ornament hook is actually a scaled text caret character (^). Since the animation applies to the rectangle, the whole ornament slowly appears.