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

Manipulating anchor links with jQuery by adding and removing classes

How can I apply multiple backgrounds to a SVG object?

Learn how to automatically set the checked state of a radio button by toggling another radio button

"Is there a way to adjust the range slider to display currency instead of

How can I incorporate a dropdown menu into my website's navigation using Bootstrap 4 alpha?

The background of the webpage section is being cropped on mobile devices

challenges arising from using the css overflow: hidden attribute

Incorporate titles for items in the jquery caroufredsel plugin

Ways to display content exclusively to logged-in users

Words placed in the middle of the picture

Eliminate HTML field based on checkbox status

Stylish dropdown menu design inspired by W3CSS website

Issue with the table not being displayed when any of the submitted fields are left empty

AJAX - Implementing a delay in displaying AJAX results

Problem with displaying images and videos in a lightbox gallery

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

Retrieve a specific element using BeautifulSoup

Image showcasing the background

Footer to display exclusively on the final printed page's bottom

Google Chrome is unable to render a .eps file