is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

by

you could use a gradient with stop-opacity to do this.
you would add two “middle” stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"/>
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"/>
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
  </linearGradient>
  <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>

you could even animate it

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
      <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s"  begin="0s"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
      <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>

the advantage is that this works on any shape and size without changing the gradient

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="400" height="200">
      <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue"/>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
      <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
     <circle cx="250" cy="150" r="145" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
     <rect x="400" y="20" width="100" height="100" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
     <path d="M50 150L95 290 h-90z" fill="url(#lg)" stroke="crimson" stroke-width="5"/>

     <path d="M450 205 A45 45 0 0 1 450 295A100 100 0 0 0 450 205z" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
   </svg>

More Related Contents:

  1. Circle drawing with SVG’s arc path
  2. SVG shadow cut off
  3. Adding feDropShadow to a vertical line in SVG makes it disappear
  4. Converting an svg arc to lines
  5. Can you control how an SVG’s stroke-width is drawn?
  6. CSS transparent curved shape with two rounded sides
  7. How to convert a PNG image to a SVG? [closed]
  8. Removing transforms in SVG files
  9. How to use the viewBox attribute?
  10. Remove the host HTML element selectors created by angular component
  11. How many levels of recursion does SVG support?
  12. semantic zooming of the force directed graph in d3
  13. Catmull-Rom interpolation on SVG Paths
  14. Default background color of SVG root element
  15. How to convert/save d3.js graph to pdf/jpeg
  16. Scale and mirror SVG object
  17. How to convert a SVG to a PNG with ImageMagick?
  18. Crop to fit an svg pattern
  19. Why doesn’t hue rotation by +180deg and -180deg yield the original color?
  20. How to place multiple evenly-spaced arrowheads along an SVG line?
  21. SVG Positioning
  22. How to calculate required hue-rotate to generate specific colour?
  23. How can I cut one shape inside another?
  24. Do SVG docs support custom data- attributes?
  25. Avoiding lines between adjecent svg rectangles
  26. Can I apply a gradient along an SVG path?
  27. Add text/label onto links in D3 force directed graph
  28. Simple fill pattern in svg : diagonal hatching
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. Convert SVG polygon to path

Leave a Comment