edu.eputers.net/Blog/_includes/banner.html

<section id="banner">
    <div class="wrapper">
	    <svg id="ice-bear" xmlns="http://www.w3.org/2000/svg"  version="1.1" width="100%" height="100%" viewBox="0 0 800 400">
		
            <g id="welcom-text" style="text-shadow: 1px 1px #EFEFEF, 2px 2px #ccc">
                <text x="50" y="130" fill="#ed5565" font-size="100">W</text>
                <text x="160" y="180" fill="#f4b350" font-size="100">E</text>
                <text x="230" y="140" fill="#f2db94" font-size="130">L</text>
                <text x="310" y="160" fill="#62ddbd" font-size="100">C</text>
                <text x="400" y="160" fill="#62B3E5" font-size="90">O</text>
                <text x="480" y="160" fill="#ec87c0" font-size="120">M</text>
                <text x="600" y="160" fill="#b3aeef" font-size="100">E</text>
            </g>
            <g id="bear-head" fill="white">
                <circle r="20" cx="380" cy="310"/>
                <circle r="20" cx="500" cy="310"/>
                <path d="M 360 400 V 355 A30 30 0 0 1 520 360 V 400"/>
                <circle r="5px" cx="410" cy="330" fill="black"/>
                <circle r="5px" cx="470" cy="330" fill="black"/>
                <ellipse rx="15" ry="10" cx="440" cy="340" fill="black"/>
                <path d="M 430 360 Q 440 370 450 360" stroke="black" stroke-width="2"/>
            </g>
            <g id="bear-paw-left">
                <path d="M 305 410 V 300 A30 30 0 0 1 365 310 V 410"fill="white" stroke="#C4E8F8" stroke-width="1px"/>
                <g fill="#62B3E5">
                    <circle r="5" cx="315" cy="305"/>
                    <circle r="5" cx="355" cy="305"/>
                    <circle r="5" cx="327" cy="295"/>
                    <circle r="5" cx="343" cy="295"/>
                    <ellipse rx="15" ry="10" cx="335" cy="320"/>
                </g>
                <!--<animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" values="-14 340 400;15 340 400;-15 340 400" repeatCount="indefinite"/>-->
            </g>
            <g id="sea">
                <path d="M 60 400 C 70 360 150 360 160 400 C 170 360 250 360 260 400 C 270 360 350 360 360 400 C 370 360 450 360 460 400 C 470 360 550 360 560 400 C 570 360 650 360 660 400 C 670 360 750 360 760 400 Z"  fill="#62B3E5"/>
            </g>
            <g id="bear-paw-right">
                <path d="M 515 440 V 380 A30 30 0 0 1 575 390 V 440"fill="white" stroke="#C4E8F8" stroke-width="1px" transform="rotate(20, 575 390)"/>
            </g>
        </svg>
    </div>
</section>