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.1.0/raphael-min.js"></script><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        </head>
    <body>
      <div id="cont"></div>
<svg id="p" style="overflow: hidden; position: absolute;" xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 1200 1500" 
  
      version="1.1" width="1200" height="1500">
<!--
viewBox="100 -100 800 800" 
-->
<filter id="innerbewel" x0="-50%" y0="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur">
</feGaussianBlur>
<feOffset dy="3" dx="3">
</feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="hlDiff">
</feComposite>
<feFlood flood-color="white" flood-opacity="0.8">
</feFlood>
<feComposite in2="hlDiff" operator="in">
</feComposite>
<feComposite in2="SourceGraphic" operator="over" result="withGlow">
</feComposite>
<feOffset in="blur" dy="-3" dx="-3">
</feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff">
</feComposite>
<feFlood flood-color="black" flood-opacity="0.5">
</feFlood>
<feComposite in2="shadowDiff" operator="in">
</feComposite>
<feComposite in2="withGlow" operator="over">
</feComposite>
</filter>
<marker id="StartMarker" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="31.666666666666668" markerHeight="31.666666666666668" stroke="red" stroke-width="1" fill="none" orient="auto">
<path d="M0,5L10,5M5,0L10,5M5,10L10,5">
</path>
</marker>
<marker id="MidMarker" stroke-opacity="1.0" viewBox="-1 -1 12 12" refX="5" refY="5" markerWidth="12.666666666666668" markerHeight="12.666666666666668" stroke="red" stroke-width="1" fill="yellow" fill-opacity="0.5" orient="0" markerUnits="strokeWidth">
<circle cx="5" cy="5" r="5">
</circle>
</marker>
<marker id="EndMarker" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="12.666666666666668" markerHeight="12.666666666666668" stroke="blue" stroke-width="1" fill="none" orient="auto">
<rect x="0" y="0" width="10" height="10">
</rect>
</marker>
<marker id="StartMarker2" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" stroke="none" fill="none" orient="auto">
<path d="M0,5L10,5M5,0L10,5M5,10L10,5">
</path>
</marker>
<marker id="MidMarker2" stroke-opacity="1.0" viewBox="-1 -1 12 12" refX="5" refY="5" markerWidth="4" markerHeight="4" stroke="none" fill="none" orient="0" markerUnits="strokeWidth">
<circle cx="5" cy="5" r="5">
</circle>
</marker>
<marker id="EndMarker2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" stroke="none" fill="none" orient="auto">
<rect x="0" y="0" width="10" height="10">
</rect>
</marker>
</defs>
<path id="p3" marker-start="url('#StartMarker')" d="M270,520L130,490L210,250L60,170L130,490L20,410L60,300L60,20L780,40L680,180L460,130L210,250L320,100L220,80L210,250L520,250L680,180L770,480L540,470L520,250L380,280L430,390L540,470L270,520L330,350L210,250Z" style="">
​
  <!--
  
// The same path in JSON format
[{"X":270,"Y":520},{"X":130,"Y":490},{"X":210,"Y":250},{"X":60,"Y":170},{"X":130,"Y":490},{"X":20,"Y":410},{"X":60,"Y":300},{"X":60,"Y":20},{"X":780,"Y":40},{"X":680,"Y":180},{"X":460,"Y":130},{"X":210,"Y":250},{"X":320,"Y":100},{"X":220,"Y":80},{"X":210,"Y":250},{"X":520,"Y":250},{"X":680,"Y":180},{"X":770,"Y":480},{"X":540,"Y":470},{"X":520,"Y":250},{"X":380,"Y":280},{"X":430,"Y":390},{"X":540,"Y":470},{"X":270,"Y":520},{"X":330,"Y":350},{"X":210,"Y":250}]
​
-->
​
</path>
</svg>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers