Outlining and partially filling an SVG Shape

by

You can alternatively do this with a filter. Here is one that animates the fill:

<svg height="210" width="500">
  <defs>
    <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
      <feOffset dy="0.5">
        <animate attributeName="dy" from="1" to=".5" dur="3s" />
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  </defs>
  <polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="fill:white;stroke:red;" />
</svg>

More Related Contents:

  1. Transparent arrow/triangle indented over an image
  2. Transparent text cut out of background
  3. Invert rounded corner in CSS?
  4. Transparent hollow or cut out circle
  5. CSS transparent curved shape with two rounded sides
  6. Wave (or shape?) with border on CSS3
  7. Triangle shape with background image
  8. How to create a curve on the top of a background?
  9. Filling water animation
  10. Transparent hollow or cut out shape in HTML
  11. Double curved shape
  12. How can I show only corner borders?
  13. Background color of text in SVG
  14. How to resize the ClipPath area of SVG?
  15. How to skew element but keep text normal (unskewed)
  16. How to make 3-corner-rounded triangle in CSS
  17. html/css hexagon with image inside
  18. How to create multi-color border with CSS?
  19. How can I create a “tooltip tail” using pure CSS?
  20. How do I center an SVG in a div?
  21. Slanted Corner on CSS box
  22. SVG gradient using CSS
  23. Segments in a circle using CSS3
  24. Creating a ‘New’ spiky label with 24 or above point burst
  25. How to create an irregular square shape in css?
  26. How do I create a teardrop in HTML?
  27. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  28. Make table cells square
  29. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  30. Div with cut out edges, border and transparent background

Leave a Comment