Revision control
Copy as Markdown
<defs>
<filter id="offset">
<feOffset in="SourceGraphic" dx="5" dy="5" />
</filter>
<circle id="myCircle" cx="45" cy="45" r="25" opacity="0.5"/>
</defs>
<rect x="0" y="0" width="100" height="100" stroke="black" fill="green" opacity="0.5" />
<rect x="0" y="0" width="100" height="100" stroke="black" fill="green" opacity="0.5" filter="url(#offset)" />
<circle transform="translate(100 0)" cx="50" cy="50" r="50" stroke="black" fill="green" opacity="0.5" />
<circle transform="translate(100 0)" cx="50" cy="50" r="50" stroke="black" fill="green" opacity="0.5" filter="url(#offset)" />
<g transform="translate(200 0)" >
<circle cx="50" cy="30" r="25" stroke="black" fill="green" opacity="0.5" />
<circle cx="50" cy="70" r="25" stroke="black" fill="red" opacity="0.5" />
</g>
<g transform="translate(200 0)" filter="url(#offset)" >
<circle cx="50" cy="30" r="25" stroke="black" fill="green" opacity="0.5" />
<circle cx="50" cy="70" r="25" stroke="black" fill="red" opacity="0.5" />
</g>
<line transform="translate(300 0)" x1="0" y1="50" x2="100" y2="70" style="stroke:rgb(255,0,0);stroke-width:2" />
<line transform="translate(300 0)" x1="0" y1="50" x2="100" y2="70" style="stroke:rgb(255,0,0);stroke-width:2" filter="url(#offset)" />
<polygon transform="translate(400, 0)" points="30,30 30,60 50,60" fill="green" stroke="black"/>
<polygon transform="translate(400, 0)" points="30,30 30,60 50,60" fill="green" stroke="black" filter="url(#offset)" />
<polyline transform="translate(0, 100)" points="30,30 30,60 50,60" style="fill:none;stroke:black;stroke-width:3" />
<polyline transform="translate(0, 100)" points="30,30 30,60 50,60" style="fill:none;stroke:black;stroke-width:3" filter="url(#offset)" />
<path transform="translate(100, 100)" d="M10,50 L10,10 L90,50, Z" fill="green" opacity="0.5" />
<path transform="translate(100, 100)" d="M10,50 L10,10 L90,50, Z" fill="green" opacity="0.5" filter="url(#offset)" />
<text transform="translate(200, 100)" fill="blue" x="0" y="20" font-family="Arial" font-size="16" opacity="0.5" > Example Text! </text>
<text transform="translate(200, 100)" fill="red" x="0" y="20" font-family="Arial" font-size="16" filter="url(#offset)" opacity="0.5"> Example Text! </text>
<ellipse transform="translate(300, 100)" cx="50" cy="50" rx="20" ry="40" fill="green" opacity="0.5" stroke="black" />
<ellipse transform="translate(300, 100)" cx="50" cy="50" rx="20" ry="40" fill="green" opacity="0.5" stroke="black" filter="url(#offset)" />
<use transform="translate(400, 100)" href="#myCircle" x="20" fill="blue" stroke="black" />
<use transform="translate(400, 100)" href="#myCircle" x="20" fill="blue" stroke="black" filter="url(#offset)" />
</svg>