Заливка слоя-маски

#javascript #html #jquery #css #svg

Предыстория

Хочу написать некую "систему уровней".
Есть три переменные:

Score - Текущее количество очков;
ScoreNext - Количество очков до нового уровня;
Level - Текущий уровень;


Механику подсчёта опустим, приведу пример:
У пользователя 10 очков, он на 1 уровне, для следующего нужно набрать 20 очков.

1 LVL (0) | #####10%----- | 2 LVL (20) // Не не хватает 10 очков == 10%


Надеюсь понятно, переходим дальше.

Идея

Пользовались программой Steam? Если да, то понять меня будет проще.
Но всё же расскажу:

В Steam используются уровни и их много (на данный момент 4999).


Каждый уровень разбит на "группы"(вертикальные столбцы): Первые 100 - круг, вторые
100 - шестиугольник и т.д. (на скрине видно).
Так же каждая группа разбита ещё на группы (горизонтальные столбцы) - 0-10 - серый
цвет изображения, 10-20 - красный и т.д..

Что хочу

Реализовать подобное на SVG.
При этом цвет будет заполнятся как прогресс-бар, снизу-вверх, в процентном соотношение.
Сама "иконка" уровня (вертикальные столбцы на скрине) - маска-слой изображение (SVG
или растровое изображение).
При этом всё это будет изменяться через JS\JQ.

Что нужно
Как сверстать разметку самого SVG, что "крутить" чтобы JS\JQ кодом можно было управлять
"уровнями" (картинкой, цветами, процентным соотношением).



P.s. Вопрос в основном для @Alexandr_TT, он попросил задать его в виде вопроса тут,
но если кому-то интересна данная идея - прошу писать ответы или комментарии.

P.s. Слой-маска или Alpha texture.



Ближе к чёрному - прозрачное.



"значок" уровня, пример:



body {background: gray;}






UPD

Вот что-то такое, косяков много



$('select').bind('change', function(){
	let c = $(this).val();
  $('.lvl-icon').attr('class','lvl-icon '+c).find('animate').attr('dur', '5s');
});

$('input').bind('change mousemove', function(){
	let c = $(this).val();
  $('#change').attr('height', c+'%');
});
.lvl-icon {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  mask: url(#mask);
}

.lvl-icon .none {display: none;}
.lvl-icon.gray {stroke: gray;}
.lvl-icon.red {stroke: red;}
.lvl-icon.cur #curcle,
.lvl-icon.quad #quad {display: block;}


  lvl 00-10 - gray
  lvl 10-20 - red
  Ниже будет другая картинка
  lvl 20-30 - gray
  lvl 30-40 - red













    

Ответы

Ответ 1

Сначала была лишь анимация заливки в стакан:  



#пуск {cursor: pointer;}
#жижа {stroke:#a50; 
       stroke-linecap: butt; 
       stroke-width:200%; 
       stroke-opacity:.6}







Однако это была лишь разминка.
А не пора ли нам показать настоящий "тринкен-процесс", (?)  

На троих:



#лить, #пить {cursor: pointer;}
#жижа {stroke:#f4a; stroke-width:200%; 
       stroke-linecap: butt; stroke-opacity:.8;
}
#тринк {box-shadow: #fff 0 0 8px 4px inset; background: 
  repeating-linear-gradient(45deg, transparent, #999, transparent .8%) fixed;
}









Остальное - по мере поступления дополнительных комментариев...


Ответ 2

Не совсем уверен, не ушел ли я не в ту степь) Не svg, но довольно похоже. Работает
с -webkit- в Chrome (в других не проверял). Изображение выступает в роли маски, применяется
через -webkit-mask-image. Цвет меняется на каждом уровне в зависимости от общего прогресса.



document.getElementById("range").addEventListener("input", e => {
  let val = e.target.value;
  let max = 1000;
  let lvlMax = 200;

  let currentlvlProgress = val % lvlMax / lvlMax * 100;
  let currentLvl = Math.ceil(val / lvlMax);
  let globalProgress = val / max * 100;
  let hue = currentLvl / (max / lvlMax) * 360;

  document.getElementById("info").innerHTML = `
    1 уровень: ${lvlMax} очков

    Всего уровней: ${max / lvlMax}

    Текущий уровень: ${currentLvl}

    Прогресс в уровне: ${currentlvlProgress}

    Глобальный прогресс: ${globalProgress}

    Изменение цвета: ${hue} градусов

  `;

  document.getElementById("progress").style.height = `${currentlvlProgress}%`;
  document.getElementById("progress").style.filter = `hue-rotate(${hue}deg)`;
});
body {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

body>* {
  margin-bottom: 5px;
}

#icon {
  position: relative;
  width: 40px;
  height: 40px;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
  -moz-mask-size: 100% 100%;
  -moz-mask-position: 0 0;
  -moz-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
}

#icon>#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0%;
  width: 100%;
  background-color: red;
  z-index: 2;
}