JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="cool-circle"></div>

CSS

.cool-circle {
  height: 100px;
  width: 100px;

  background-image: url("data:image/svg+xml,\
    <svg width='100' height='100'\
      viewBox='0 0 100 100'\
      xmlns='http://www.w3.org/2000/svg'>\
    %3Cstyle%3E\
      :root { \
        --fill: hsl(133.31 100% 49%)\
      }\
      @media (color-gamut: p3) {\
        :root {\
          --fill: oklch(85.88% 0.37 144);\
        }\
      }\
    %3C/style%3E\
    <path\
      style='fill: var(--fill);'\
      d='m66.086 38.801c-20.461 17.012-38.746 33.113-43.863 60.52 19.883-13.727 46.191-16.98 60.129-33.574 14.383-17.121 11.832-40.801 12.617-64.77-16.738 7.8633-33.316 12.223-50.281 16.078-32.465 7.3789-46.199 42.324-29.734 74.801 18.242-32.629 31.477-46.832 51.133-53.055z'/>\
    </svg>");
}