Fork me on GitHub

Waterbox Component

A simple web component displaying an isometric water box.


You can use NPM to install this component.

npm i --save waterbox-component


To use this web component in your project you can utilize one of the following styles of syntax.

/* In an existing module / web component */
import 'waterbox-component';
/* At top of an application */
<script type="module" src="node_modules/waterbox-component/dist/bundle.js"></script>
/* Alternatives for top of application */
<script type="module">
  import 'waterbox-component';

You can now use the component in your HTML:

<water-box value="50"></water-box>

This component is responsive. Simply set its width and height via CSS.

water-box {
  width: 100px;
  height: 180px;


Property Attribute Type Description Example
value value Number Percentual level of water. 50
strokeColor stroke-color String Stroke color. rgba(64,64,64,0.8)
fillColor fill-color String Water fill color. rgba(192,192,225,0.8)
boxColor box-color String Box fill color. rgba(127,127,127,0.8)
strokeWidth stroke-width Number Stroke width. 2
separators separators Number Number of scale separators. 5
drawTop draw-top Boolean Whether to draw the box ceiling. true
contrast contrast Number Color contrast. 15