react-social-login

The easiest way to integrate Social Login in your React Apps ...Checkout NPM

Sunday, August 5, 2012

Talking Smiley with SVG, CSS and JQuery

Intent of this article is to show a simple SVG demo that has CSS and JQuery as icing on the cake

. I've no business with Images...! JQuery and SVG created me...!

SVG = Scalable Vector Graphics

SVG provides a means to create vector graphics using markup language that is almost supported by all major modern web browsers including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari. With giving a touch of scripting language, you can create cool graphics for web. Folowing is the code I wrote for creating SVG & JQuery Smiley .
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.eyes,#mouth{
fill:#000000;
stroke:white;
stroke-width:1
}
</style>
<script>
var open=true;
$(function(){
//mouth
setInterval(
function(){
        open = !open;
        $("#mouth").attr("rx",open?10:3);
          }
,250);
//eyes
setInterval(
function(){
        $(".eyes").attr("ry",open?1:5);
          }
,300);
});
</script>
</head>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="600">
<ellipse cx="100" cy="80" rx="80" ry="70" style="fill:yellow;stroke:red;stroke-width:10" />
<ellipse class="eyes" cx="80" cy="45" rx="5" ry="5" />
<ellipse class="eyes" cx="120" cy="45" rx="5" ry="5" style="" />
<ellipse cx="100" cy="80" rx="5" ry="15" style="fill:black;stroke:white;stroke-width:1" />
<ellipse id="mouth" cx="100" cy="115" rx="15" ry="5"/>
<text x="200" y="60" font-size="20">I've no business with Images...!</text>
<text x="200" y="80" font-size="20"> JQuery and SVG created me...!</text>
</svg> </html>

Dissecting Ellipse Tag

<ellipse cx="100" cy="80" rx="80" ry="70" style="fill:yellow;stroke:red;stroke-width:2" />

References:

http://www.w3schools.com/svg/svg_text.asp
http://www.w3.org/TR/SVG/