Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
​
<script type="text/javascript">
$(document).ready(function() {
    var p = Raphael("cont", 300, 200);
    $(p.canvas).attr("id", "p");
    var rect = p.rect(10, 10, 100, 100);
    $(rect.node).attr("id", "rect");
    $("#rect").attr("filter", "url(#innerbewel)");
    $("#rect").attr("fill", "red");
​
    var f = "<filter id='innerbewel' x0='-50%' y0='-50%' width='200%' height='200%'>\
  <feGaussianBlur in='SourceAlpha' stdDeviation='2' result='blur'/>\
  <feOffset dy='3' dx='3'/>\
  <feComposite in2='SourceAlpha' operator='arithmetic'\
             k2='-1' k3='1' result='hlDiff'/>\
  <feFlood flood-color='white' flood-opacity='0.8'/>\
  <feComposite in2='hlDiff' operator='in'/>\
  <feComposite in2='SourceGraphic' operator='over' result='withGlow'/>\
\
  <feOffset in='blur' dy='-3' dx='-3'/>\
  <feComposite in2='SourceAlpha' operator='arithmetic'\
            k2='-1' k3='1' result='shadowDiff'/>\
  <feFlood flood-color='black' flood-opacity='0.8'/>\
  <feComposite in2='shadowDiff' operator='in'/>\
  <feComposite in2='withGlow' operator='over'/>\
</filter>";
​
    // Create dummy svg with filter definition 
    $("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
    // Append filter definition to Raphael created svg
    $("#p defs").append($("#dummy filter"));
    // Remove dummy
    $("#dummy").remove();
    $("#rect").attr("fill", "orange");
});
 
</script>
</head>
<body>
  <div id="cont"></div>
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers