Tips for setting the background color of an SVG image as a percentage

Question

Tips for setting the background color of an SVG image as a percentage

Is it possible to dynamically fill a SVG image with color based on a percentage?

I would like to be able to change the color of an SVG image based on a specified percentage.

For example, I have an SVG image of the moon and I want to fill it with white color based on the illumination percentage of the moon.

So if the illumination percentage is 90%, the moon should be filled with 90% white color, and so on.

<?xml version="1.0" encoding="iso-8859-1"?> 
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="134"> 
<g> 
  <circle stroke-width="7" stroke="#000" fill="#fff" r="58" cy="69" cx="69"/>
  <path stroke-width="0" fill="#000" d="m69,9 a62,60 0 0 0 1,121 l0,-5 a70,68 0 0 1 0,-110 l0,-5 z"/>
 </g></svg>

css svg

Answer 1

Answer №1

To create an elliptical shadow, I would use a mask.

// Adding event listener to input slider
var control = document.getElementById("control");
control.addEventListener("input", setMoonPhase);

// Initializing SVG based on initial slider value
setMoonPhase();

function setMoonPhase(evt) {
  // Converting percentage to a value between 0 and 1
  var val = control.value / 100;
  // Selecting the ellipse element representing moon phase
  var  phaseEllipse = document.getElementById("phase-ellipse");
  // Adjusting X radius of the phase ellipse (where 100% = 0.5 -> 50% = 0 -> 0% = 0.5)
  phaseEllipse.rx.baseVal.value = Math.abs(val - 0.5);
  // Setting fill color of ellipse based on phase
  phaseEllipse.style.fill = (val > 0.5) ? "white" : "black";
}

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="134">
  <defs>
    <mask id="phase-mask" maskContentUnits="objectBoundingBox">
      <rect x="0.5" y="0" width="0.5" height="1" fill="white"/>
      <ellipse id="phase-ellipse" cx="0.5" cy="0.5" rx="0.2" ry="0.5" fill="white"/>
    </mask>
  </defs>
  <circle fill="black" r="58" cy="69" cx="69"/><!-- moon shadow -->
  <circle fill="#fff" r="54.5" cy="69" cx="69" mask="url(#phase-mask)"/><!-- sunlight on moon -->
  <circle stroke-width="7" stroke="black" fill="none" r="58" cy="69" cx="69"/><!-- moon border -->
</svg>

<p>
<input id="control" type="range" min="0" max="100" value="90" /><span id="output"></span>
</p>

Answer 2

To create an elliptical shadow, I would use a mask.

// Adding event listener to input slider
var control = document.getElementById("control");
control.addEventListener("input", setMoonPhase);

// Initializing SVG based on initial slider value
setMoonPhase();

function setMoonPhase(evt) {
  // Converting percentage to a value between 0 and 1
  var val = control.value / 100;
  // Selecting the ellipse element representing moon phase
  var  phaseEllipse = document.getElementById("phase-ellipse");
  // Adjusting X radius of the phase ellipse (where 100% = 0.5 -> 50% = 0 -> 0% = 0.5)
  phaseEllipse.rx.baseVal.value = Math.abs(val - 0.5);
  // Setting fill color of ellipse based on phase
  phaseEllipse.style.fill = (val > 0.5) ? "white" : "black";
}

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="134">
  <defs>
    <mask id="phase-mask" maskContentUnits="objectBoundingBox">
      <rect x="0.5" y="0" width="0.5" height="1" fill="white"/>
      <ellipse id="phase-ellipse" cx="0.5" cy="0.5" rx="0.2" ry="0.5" fill="white"/>
    </mask>
  </defs>
  <circle fill="black" r="58" cy="69" cx="69"/><!-- moon shadow -->
  <circle fill="#fff" r="54.5" cy="69" cx="69" mask="url(#phase-mask)"/><!-- sunlight on moon -->
  <circle stroke-width="7" stroke="black" fill="none" r="58" cy="69" cx="69"/><!-- moon border -->
</svg>

<p>
<input id="control" type="range" min="0" max="100" value="90" /><span id="output"></span>
</p>

Answer 3

Answer №2

If I were to tackle this, my approach would involve using the clip-path property.

mooning()

control.addEventListener("input",()=>{
mooning()
})

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function mooning(){
output.innerHTML = control.value + "%";
let value = map(control.value, 0, 100, -25, 175)
moon.setAttributeNS(null, "cx", value)
}

svg{border:1px solid; width:75vh}
#control{width:75vh;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> 
 <clipPath id="cp">
  <circle id="fullMoon" r="50" cy="75" cx="75"/>
 </clipPath>
 <g clip-path="url(#cp)">
 <rect width="100%" height="100%" />  
 <circle id="moon" r="50" cy="75" cx="175" fill="white" />
 </g>

 <use xlink:href="#fullMoon" fill="none" stroke="black"  />

</svg>

<p><input id="control" type="range" min="0" max="100" value="60" /><span id="output"></span></p>

Answer 4

If I were to tackle this, my approach would involve using the clip-path property.

mooning()

control.addEventListener("input",()=>{
mooning()
})

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function mooning(){
output.innerHTML = control.value + "%";
let value = map(control.value, 0, 100, -25, 175)
moon.setAttributeNS(null, "cx", value)
}

svg{border:1px solid; width:75vh}
#control{width:75vh;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> 
 <clipPath id="cp">
  <circle id="fullMoon" r="50" cy="75" cx="75"/>
 </clipPath>
 <g clip-path="url(#cp)">
 <rect width="100%" height="100%" />  
 <circle id="moon" r="50" cy="75" cx="175" fill="white" />
 </g>

 <use xlink:href="#fullMoon" fill="none" stroke="black"  />

</svg>

<p><input id="control" type="range" min="0" max="100" value="60" /><span id="output"></span></p>

Answer 5

Answer №3

Example of Moonlight Animation

To create a moon lighting effect, I propose using an animation of a black circle gradually opening and closing like a light circle.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"  viewBox="0 0 73 73" >
<defs>
 <radialGradient id="RadialGrad"
           fx="50%" fy="50%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>
          <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />
        </radialGradient>

</defs>
<rect width="100%" height="100%" />
<g transform="rotate(-20 35.5 35.5)">
<circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />

 <circle cx="35.5" cy="35.5" r="35" stroke="none" fill="black" >
 
 <animate id="youngMoon" attributeName="cx" values="35.5;-35.5;" begin="1s;oldMoon.end+1s" dur="10s" fill="freeze" />
<animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" /> 

</circle> 
</g>
</svg>

Answer 6

Example of Moonlight Animation

To create a moon lighting effect, I propose using an animation of a black circle gradually opening and closing like a light circle.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"  viewBox="0 0 73 73" >
<defs>
 <radialGradient id="RadialGrad"
           fx="50%" fy="50%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>
          <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />
        </radialGradient>

</defs>
<rect width="100%" height="100%" />
<g transform="rotate(-20 35.5 35.5)">
<circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />

 <circle cx="35.5" cy="35.5" r="35" stroke="none" fill="black" >
 
 <animate id="youngMoon" attributeName="cx" values="35.5;-35.5;" begin="1s;oldMoon.end+1s" dur="10s" fill="freeze" />
<animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" /> 

</circle> 
</g>
</svg>

Answer 7

Answer №4

Is this what you are looking for?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px>
    <circle fill="#000" r="50" cy="55" cx="55"/>
    <circle fill="#fff" r="50" cy="55" cx="90"/>
    <circle fill="transparent" r="50" cy="55" stroke="#000" stroke-width="10" cx="55"/>
</svg>

Utilizing Custom CSS variables:

:root{
  --stroke-width: 10;
  --side: 50;
  --gutter: calc(var(--stroke-width) / 2);
  --cx: calc(var(--gutter) + var(--side));
  --percent: calc(15 * 0.02 * var(--side));
  --moon-light: calc(var(--cx) + var(--percent));
}
  
circle{
     cx: var(--cx);
     cy: var(--cx);
     r: var(--side);
}

.moon-percent{
    cx: var(--moon-light);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px">
    <circle fill="#000" />
    <circle class="moon-percent" fill="#fff"/>
    <circle fill="transparent" stroke="#000" stroke-width="var(--stroke-width)"/>
</svg>

Answer 8

Is this what you are looking for?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px>
    <circle fill="#000" r="50" cy="55" cx="55"/>
    <circle fill="#fff" r="50" cy="55" cx="90"/>
    <circle fill="transparent" r="50" cy="55" stroke="#000" stroke-width="10" cx="55"/>
</svg>

Utilizing Custom CSS variables:

:root{
  --stroke-width: 10;
  --side: 50;
  --gutter: calc(var(--stroke-width) / 2);
  --cx: calc(var(--gutter) + var(--side));
  --percent: calc(15 * 0.02 * var(--side));
  --moon-light: calc(var(--cx) + var(--percent));
}
  
circle{
     cx: var(--cx);
     cy: var(--cx);
     r: var(--side);
}

.moon-percent{
    cx: var(--moon-light);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px">
    <circle fill="#000" />
    <circle class="moon-percent" fill="#fff"/>
    <circle fill="transparent" stroke="#000" stroke-width="var(--stroke-width)"/>
</svg>

Answer 9

Answer №5

If you need to find where two circles intersect, you can use this code snippet to draw the corresponding path.

Here is an example of how it works:

requestAnimationFrame(draw);

function draw(t) {
  requestAnimationFrame(draw);
  let r = 51;
  let x = Math.sin(t/2010)*90;
  let y = Math.sin(t/1731)*40;
  let a = Math.atan2(y, x);
  let s = Math.acos(Math.sqrt(x*x + y*y)/2/r);
  let p0 = [Math.cos(a+s)*r, Math.sin(a+s)*r];
  let p1 = [Math.cos(a-s)*r, Math.sin(a-s)*r];
  sun.setAttribute('d', `
      m${p0}
      A${r},${r},0,1,1,${p1}
      A${r},${r},0,0,0,${p0}
      z
  `);
}

body{
  overflow: hidden;
  margin: 0;
}

<svg viewBox=-55,-55,110,110 height=100vh width=100vw>
  <path id=sun stroke=teal fill=none stroke-width=2 stroke-linejoin=round></path>
</svg>

Answer 10

If you need to find where two circles intersect, you can use this code snippet to draw the corresponding path.

Here is an example of how it works:

requestAnimationFrame(draw);

function draw(t) {
  requestAnimationFrame(draw);
  let r = 51;
  let x = Math.sin(t/2010)*90;
  let y = Math.sin(t/1731)*40;
  let a = Math.atan2(y, x);
  let s = Math.acos(Math.sqrt(x*x + y*y)/2/r);
  let p0 = [Math.cos(a+s)*r, Math.sin(a+s)*r];
  let p1 = [Math.cos(a-s)*r, Math.sin(a-s)*r];
  sun.setAttribute('d', `
      m${p0}
      A${r},${r},0,1,1,${p1}
      A${r},${r},0,0,0,${p0}
      z
  `);
}

body{
  overflow: hidden;
  margin: 0;
}

<svg viewBox=-55,-55,110,110 height=100vh width=100vw>
  <path id=sun stroke=teal fill=none stroke-width=2 stroke-linejoin=round></path>
</svg>

Tips for setting the background color of an SVG image as a percentage

Answer №1

Answer №2

Answer №3

Example of Moonlight Animation

Answer №4

Utilizing Custom CSS variables:

Answer №5

Similar questions

Creating a visually appealing label by customizing it according to the child div

Using Custom .woff Format Fonts in Sendgrid: A Guide

Can a screenshot of a YouTube video be printed exactly as it appears on a website?

Tips for adding a CSS class to an HTML element on-the-fly

How to automatically close the menu on a Wordpress theme after clicking a link

Create another div for the remaining vertical space occupied by the sibling div?

Creating a shadow effect on a mat-card component in Angular

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

Craft dynamic SVG components using TypeScript

Three-column navigation menu featuring visuals

Introducing a content height offset to create a smooth slide-up animation on hover

Tips for creating a vertical navigation submenu with hover using Bootstrap style

HTML: A peculiar table setup with an image displayed on the right side and text aligned to the left side. Strangely, the

How can I utilize JavaScript to seamlessly loop through and display these three images in succession?

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

CSS styling not appearing on HTML button

How can I eliminate the border from the last child in a row within a responsive framework?

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Loading screen for specific content section

I am running into issues getting Tailwind CSS to work in my project. Despite following the installation instructions in the documentation and trying to learn this new CSS framework, it doesn't seem to