Showing posts with label Half Round SVG. Show all posts
Showing posts with label Half Round 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>