What is the best way to add color to the bottle's outline using clipPath?

Question

What is the best way to add color to the bottle's outline using clipPath?

How do I fill the background inside a bottle image with color?

I have the coordinates for filling the bottle, but the background inside remains unfilled.

.item {
  width: 150px;
  height: 150px;
}

#tubeLiquid {
  background-color: #74ccf4;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

#bottleMask{
  background-color: #FFFFFF;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

<div class="item">
  <svg viewBox="0 0 300 300">
    <image
      width="300"
      clip-path="url(#bottleMask)"
      xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png"
    ></image>
    <defs>
      <mask id="bottleMask"></mask>
    </defs>
    <g id="maskedLiquid" mask="url(#bottleMask)">
      <path id="tubeLiquid" fill="#74ccf4"></path>
    </g>
  </svg>
</div>

html css

Answer 1

Answer №1

Additional <mask> is not necessary.
Consider utilizing a rounded <rect> as the clip-path due to the bottle's shape:

waterLevel.addEventListener('input', e => {
  let value = +e.currentTarget.value
  tubeLiquid.setAttribute('stroke-dasharray', `${value} 100`)
})

svg {
  width: 20%;
}

<h3>Establish clip-path</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <!-- test clip path -->
    <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
  </svg>

<h3>Outline liquid fill level</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line x1="149.5" y1="290" x2="149.5" y2="50" stroke="green" stroke-width="70" />
  </svg>

<h3>Apply clip path</h3>
<p><input type="range" min="0" max="100" value="100" id="waterLevel" name="water-level" /></p>
<svg viewBox="0 0 300 300">
    <clipPath id="clip">
          <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
    </clipPath>
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line id="tubeLiquid" clip-path="url(#clip)" pathLength="100" stroke-dasharray="100 100" x1="149.5" y1="290" x2="149.5" y2="50" stroke="#74ccf4" stroke-width="80" />
  </svg>

Begin by designing your clip-path and fill-scale/progress bar shapes first – without applying any clipping – to determine the correct coordinates and dimensions.

Then, proceed with applying the clip-path.
For the "tubeLiquid" element, I chose to use a <line> element which allows setting the pathLength attribute to 100.

To modify the current fill value, simply update the stroke-dasharray attribute:

// display 100 %
stroke-dasharray="100 100"

// display 50 %
stroke-dasharray="50 100"

This method is commonly used for various types of dynamic gauges/progress bars or animated pie charts, as demonstrated in examples on SO like "Set svg progress bar percentage in javascript"

Answer 2

Additional <mask> is not necessary.
Consider utilizing a rounded <rect> as the clip-path due to the bottle's shape:

waterLevel.addEventListener('input', e => {
  let value = +e.currentTarget.value
  tubeLiquid.setAttribute('stroke-dasharray', `${value} 100`)
})

svg {
  width: 20%;
}

<h3>Establish clip-path</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <!-- test clip path -->
    <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
  </svg>

<h3>Outline liquid fill level</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line x1="149.5" y1="290" x2="149.5" y2="50" stroke="green" stroke-width="70" />
  </svg>

<h3>Apply clip path</h3>
<p><input type="range" min="0" max="100" value="100" id="waterLevel" name="water-level" /></p>
<svg viewBox="0 0 300 300">
    <clipPath id="clip">
          <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
    </clipPath>
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line id="tubeLiquid" clip-path="url(#clip)" pathLength="100" stroke-dasharray="100 100" x1="149.5" y1="290" x2="149.5" y2="50" stroke="#74ccf4" stroke-width="80" />
  </svg>

Begin by designing your clip-path and fill-scale/progress bar shapes first – without applying any clipping – to determine the correct coordinates and dimensions.

Then, proceed with applying the clip-path.
For the "tubeLiquid" element, I chose to use a <line> element which allows setting the pathLength attribute to 100.

To modify the current fill value, simply update the stroke-dasharray attribute:

// display 100 %
stroke-dasharray="100 100"

// display 50 %
stroke-dasharray="50 100"

This method is commonly used for various types of dynamic gauges/progress bars or animated pie charts, as demonstrated in examples on SO like "Set svg progress bar percentage in javascript"

Answer 3

Answer №2

The solution that caught my attention is this one where the bottle was not filled entirely, instead, some coordinates in polygons were adjusted. Unfortunately, I lack knowledge about shapes and polygons to make further changes.

<style>
.item {
  width: 150px;
  height: 150px;
}

#tubeLiquid {
  background-color: #74ccf4;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

#bottleMask{
  background-color: #FFFFFF;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19&);
}</style>

<div class="item">
  <svg viewBox="0 0 300 300">
    <defs>
      <mask id="bottleMask" fill="white">
        <path d="M0,0h300v300H0V0z M89,68h122v147H89V68z">
      </mask>
      <clipPath id="liquidClip">
        <path d="M89,68h122v147H89V68z">
      </clipPath>
    </defs>
    <image width="300" xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png">
    <path id="tubeLiquid" fill="#74ccf4" d="M0,0h300v300H0V0z" clip-path="url(#liquidClip)&qupt mask="url(#bottleMask)"/>
  </svg>
</div>

Answer 4

The solution that caught my attention is this one where the bottle was not filled entirely, instead, some coordinates in polygons were adjusted. Unfortunately, I lack knowledge about shapes and polygons to make further changes.

<style>
.item {
  width: 150px;
  height: 150px;
}

#tubeLiquid {
  background-color: #74ccf4;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

#bottleMask{
  background-color: #FFFFFF;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19&);
}</style>

<div class="item">
  <svg viewBox="0 0 300 300">
    <defs>
      <mask id="bottleMask" fill="white">
        <path d="M0,0h300v300H0V0z M89,68h122v147H89V68z">
      </mask>
      <clipPath id="liquidClip">
        <path d="M89,68h122v147H89V68z">
      </clipPath>
    </defs>
    <image width="300" xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png">
    <path id="tubeLiquid" fill="#74ccf4" d="M0,0h300v300H0V0z" clip-path="url(#liquidClip)&qupt mask="url(#bottleMask)"/>
  </svg>
</div>

What is the best way to add color to the bottle's outline using clipPath?

Answer №1

Answer №2

Similar questions

Eliminate any HTML content using Jsoup while retaining the text lines

Incorrect positioning on canvas

Modifying Ajax-injected HTML with JQuery's editInPlace functionality

Is retrieving data from the database causing unexpected additional space to appear in the textarea?

Ways to implement a setTimeout function to return to the initial div element?

Labels are overlapping each other and being aligned to the right side

Tooltip remains visible even after formatting in highcharts

Pressing the different buttons on a form does not result in the form being submitted

`javascript pop up notification will only display one time`

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

The positioning of drawings on canvas is not centered

Tips on aligning data received as a response from a Perl script

The elements from base.html and the extended page are now placed on separate rows rather than on the same row

How can I target an element with inline styling using CSS?

Customizing the background color in TurnJSIncorporating

Issue with inner span not inheriting max-width set on outer <td> element

conceal a targeted section from the bottom of the iframe

Having difficulties redirecting with the button's onclick function

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations