Fill only Half a star with SVG

by

create a linearGradient to fill the star. The 2 stops ensure an instant transition.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 32 32">
    <defs>
      <linearGradient id="grad">
        <stop offset="50%" stop-color="yellow"/>
        <stop offset="50%" stop-color="grey"/>
      </linearGradient>
    </defs>
    <path fill="url(#grad)" d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
  l11.547-1.2L16.026,0.6L20.388,10.918z"/>
  </svg>

then set the fill of the star to this.

More Related Contents:

  1. Transparent arrow/triangle indented over an image
  2. How to change the color of an svg element?
  3. Transparent text cut out of background
  4. SVG data image not working as a background-image in a pseudo element
  5. Invert rounded corner in CSS?
  6. Background color of text in SVG
  7. Transparent hollow or cut out circle
  8. How to resize the ClipPath area of SVG?
  9. How can I make an svg scale with its parent container?
  10. CSS :before on inline SVG
  11. Is there a way to use SVG as content in a pseudo element ::before or ::after
  12. Wave (or shape?) with border on CSS3
  13. Triangle shape with background image
  14. How to create a curve on the top of a background?
  15. How do I center an SVG in a div?
  16. How to make a element expand or contract to its parent container?
  17. SVG gradient using CSS
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. Background-size with SVG squished in IE9-10
  20. Add ellipses to overflowing text in SVG?
  21. How to Include CSS style when converting svg to png
  22. How do I include a font awesome icon in my svg?
  23. Filling water animation
  24. 3d transforms on SVG element
  25. How do you style a external svg with css
  26. Tint image using CSS without overlay
  27. Why don’t CSS filters work on SVG elements in Chrome?
  28. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  29. Background color of tspan element
  30. Double curved shape

Leave a Comment