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="http://www.w3.org/2000/svg" version="1.1" style="width:400px; height:300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" > <defs> <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> <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"/> </linearGradient> <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> <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"/> </radialGradient> </defs> <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"/> </circle> <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"/> </rect> <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"/> </svg>
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.