Example of using jquery.svg.js to draw a quotation bubble around a tweet

svg_frames.js

$(function() {

    /* draw custom frames around certain types of items */

    doCustomFrames = function( $root ) {
        /* ugly global -- need to encapsulate this and provide some kind of interface */
        /* called when new content is loaded */
        $root.find('.item > .twitter.message .frame').svg( twitterFrame );
        $root.find('.tweet-module .tweet .frame' ).svg( twitterFrame );
    };

    doCustomFrames( $("body") );

    function twitterFrame( svg ) {
        drawTwitterFrame( svg );
        $( svg._container ).resize( function() {
            svg.clear( true );
            drawTwitterFrame( svg );
        });
    }

    function drawTwitterFrame( svg ) {
        var $box = $( svg._container );
        var w = $box.width();
        var h = $box.height();
        var r = 5;
        var to = 40; /* offset of triangle from left bottom */
        var th = 18; /* height of triangle */
        var tw = 18; /* width of triangle */
        var defs = svg.defs();
        var filter = svg.filter(defs, 'TwitDropShadow', 0, 0, "150%", "150%" );
        svg.filters.gaussianBlur( filter, "blurOut", "SourceAlpha", 2, 2 );
        svg.filters.blend( filter, "blendOut", "normal", "SourceGraphic", "blurOut" );
        var g = svg.group( {filter: 'url(#TwitDropShadow)'} );
        defs = svg.defs(g);
        svg.linearGradient(defs, 'TwitBG', [['0%','#444'],['100%','#333']],
                           '0%','0%','0%','100%');
        var path = svg.createPath();
        svg.path( g,
                  path.move(1,r+1).arc(r,r,90,false,true,r+1,1).
                  line(w-r-2,2).arc(r,r,90,false,true,w-2,r+1).
                  line(w-2,h-r-2).arc(r,r,90,false,true,w-r-2,h-2).
                  line(to+tw,h-2).line(to+tw/2,h+th-2).line(to,h-2).
                  line(r+1,h-2).arc(r,r,90,false,true,1,h-r-2).close(),
                  { stroke: '#555', 'stroke-width': 1, fill: 'url(#TwitBG)' } );
    }


});