Skip to content

Instantly share code, notes, and snippets.

@gustavderdrache

gustavderdrache/index.html

Created July 19, 2013 14:55
Show Gist options
  • Save gustavderdrache/6039697 to your computer and use it in GitHub Desktop.
Save gustavderdrache/6039697 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>svg clipping is totally ballin'</title>
</head>
<body>
<svg version="1.1" width="500" height="400">
<defs>
<clipPath id="cup">
<!-- This is as close as I could get to drawing a cup object -->
<polygon points="200,350 300,350 320,100 180,100"/>
</clipPath>
</defs>
<!-- constrain all objects within this "g" element to the shape defined in #cup -->
<g clip-path="url(#cup)">
<rect x="180" y="100" width="140" height="250" fill="#999"/>
<rect x="180" y="200" width="140" height="250" fill="#00f"/>
</g>
<!-- these objects are not clipped -->
<text x="250" y="25" text-anchor="middle" fill="#000">i am genuinely sorry for my lack of artistic ability</text>
<text x="250" y="75" text-anchor="middle" fill="#f00" font-size="36px">50%</text>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment