Showing posts with label SVG. Show all posts
Showing posts with label SVG. Show all posts

Tuesday, May 23, 2017

Half Round Shape SVG Example

Below is a code snippet for half round shape SVG example:

<svg version="1.1" height="200px" width="200px"  xmlns="http://www.w3.org/2000/svg" >
      <clipPath id="cut-off-bottom">
          <rect x="0" y="0" width="200" height="100" fill="red"/>
      </clipPath>

      <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)"  fill="red"/>
 
  <clipPath id="cut-off-bottom2">
          <rect x="0" y="0" width="200" height="100" fill="red"/>
      </clipPath>

      <circle cx="100" cy="100" r="80" clip-path="url(#cut-off-bottom2)"  fill="blue"/>
</svg>