CSS Gradientでマンガ風集中線をつくる

CSSのconic-gradientプロパティを使うことで、簡単にマンガ風の集中線エフェクトをつけることができる。

repeating-conic-gradientプロパティを用い、0deg→10degは隙間（transparent）、次の1degに線を指定し、それが一回転するまで繰り返すことで、集中線をつくることができる。角度を調整すればもっと密度の高い集中線も作れる。

<div class="manga-effect">
  <div class="avater">
    <img src="..." />
  </div>
</div>

.manga-effect {
  background-image:
    radial-gradient(
      circle at center center,
      white 0 50px,
      transparent 100px
    ),
    repeating-conic-gradient(
       transparent 0deg 10deg,
       #666 10deg 11deg
    )
}

.avater img {
  aspect-ratio: 1/1;
  width: 100px;
}

デモ