Алгоритм мягкой обводки текста

[savostin]

Немного SVG магии:

<svg width="0" height="0" style="position:absolute">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b"/>
    <feColorMatrix in="b" mode="matrix"
      values="
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 22 -10" result="g"/>
    <feComposite in="SourceGraphic" in2="g" operator="atop"/>
  </filter>
</svg>
<style>
.container {
  width: 14em;
  font-size: 1.2em;
  line-height: 1.5em;
}

.hl{
  --c: #f59e0b;
  --py: .14em;     /* vertical padding */
  --px: .50em;     /* horizontal padding */
  --join: .2em;   /* how much to “bleed” into the line gap */

  background: var(--c);
  padding: var(--py) var(--px);
  border-radius: 9999px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  box-shadow:
    0  var(--join) 0 var(--c),
    0 calc(-1 * var(--join)) 0 var(--c);
  filter: url(#goo);
}
</style>
<div class="container">
  Lorem ipsum dolor sit <b class="hl">amet, consectetur adipiscing elit, 
  sed do eiusmod</b> tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi 
  ut aliquip ex ea commodo consequat.
</div>

[koptehe]

Да, согласен, что такие фильтры есть. И я даже думал сделать это через эффект gooey, или через шейдеры (где тоже gooey). Но для flutter нельзя напрямую использовать SVG-фильтры, а с шейдерами чуть запарно.

А еще есть с gooey есть проблема, что при малом радиусе скругления уголки могу "неправильно" отрисовываться. "Неправильно" - это как раз не перетекать, а создавать острые углы в месте стыка (каждый gooey "обнимает" свой текст) . Но тут я могу ошибаться

[aamonster]

Сделайте ширину чуть больше (начинайте выделение чуть левее, а заканчивайте чуть правее – примерно на радиус закругления), а то плохо смотрится.

[RodionGork]

С одной стороны - круто, плюсую :)

с другой стороны такое ощущение немножко, знаете, машина голдберга для стрельбы из пушки по воробьям. (ну или для собственного развлечения программиста, что неплохо)

читатель пробегая текст "по диагонали" не будет особо разбираться как именно закругляли уголки. а уж если текст будет разбирать LLM как сейчас модно, чтобы представить "выжимку" то тем более :)

[vityo]

Что-то с матрицей как-то сложно, вроде любая точка либо без сгиба, либо выпукла, либо вогнута, будто проще должно быть как-то кажется