$(function() {
    var r = Raphael("holder", 500, 500),
    discattr = {
        fill: "#fff", 
        stroke: "none"
    };
    function reset()
    {
        r.clear();
        var workText = "WORK";
        var xPositions = [55,175,280,380]
        for (var i = 0; i < workText.length; i++)
        {
           var key = workText[i];
           r.path(letters[key]).attr({
               fill: "#fff", 
               stroke: "#fff", 
               "fill-opacity": .3, 
               "stroke-width": 1, 
               "stroke-linecap": "round", 
                translation: xPositions[i]+" 50"
           });  
        }

        var theText = "สุดๆ";
        var colors = ["#f00","#0f0","#00f","#ff0"];
        for (i = 0; i < theText.length; i++)
        {
            var letter = r.path('M441.729,279.046c0').attr({
                fill: colors[i] , 
                stroke: "#fff", 
                "fill-opacity": 1, 
                "stroke-width": 1, 
                "stroke-linecap": "round"
            });  
            key = theText[i];
            if (key && key in letters) {
                letter.animate({
                    path: letters[key]
                    }, 1000);
            }

        }

        var btn= r.text(410, 450, "Again? click!").attr({
            fill: "#fff", 
            "font-size": 16
        });
        btn.mouseover(function (event) {
            this.attr({cursor: "pointer",fill: "red"});
        });
        btn.mouseout(function (event) {
            this.attr({fill: "#fff"});
        });
        btn.click(function (event) {
            reset();
        });

    }

    reset();
});

แล้วก็ใส่ div นี้ไว้ในใต้ tag <script> ข้างบน

<div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); 
width: 500px; height: 500px; float: left;" id="holder">
</div>

สิ่งที่ช่วยให้เกิดสิ่งนี้คือ Rapha?l—JavaScript Library ครับ

Download ไฟล์อันนี้ซึ่งมีตัวอย่างอยู่ครบเปิดดูได้เลย :
raphael.zip

แค่นี้ก็เปิดบน ipad ได้แล้ว!