html - Adding images in circle charts

Question

I've made circle charts for my skills, but I want to add images inside the charts.
But without using any Javascript code.
I got it from here :https://codepen.io/maoberlehner/pen/jwVWQz?editors=1100

.circle-chart__circle {
    animation: circle-chart-fill 3s reverse; /* 1 */ 
    transform: rotate(-90deg); /* 2, 3 */
    transform-origin: center; /* 4 */
    background: red;
  }
  .circle-chart__info {
    animation: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em);
  }
  @keyframes circle-chart-fill {
    to { stroke-dasharray: 0 100; }
  }
  @keyframes circle-chart-appear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (min-width: 31em) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

<div class="col-sm-6">
    <h2>Python 3</h2>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
            <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
            <circle class="circle-chart__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
    </svg>
</div>

Answer 1

To display a picture in svg, use tag <image> in conjunction with the tag <pattern>, which defines as id. Next, install rule fill="url(#img)" with the id, inside which there is a tag with an image.

<defs>
   <pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
   </pattern>
</defs>

Also remove fill="none" from the first <circle> shadow. This will prevent the image from being displayed.

.circle-chart__circle {
    animation: circle-chart-fill 3s reverse; /* 1 */ 
    transform: rotate(-90deg); /* 2, 3 */
    transform-origin: center; /* 4 */
    background: red;
  }
  .circle-chart__info {
    animation: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em);
  }
  @keyframes circle-chart-fill {
    to { stroke-dasharray: 0 100; }
  }
  @keyframes circle-chart-appear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (min-width: 31em) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

<div class="col-sm-6">
   <h2>Python 3</h2>
   <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
      <defs>
         <pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
            <image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
         </pattern>
      </defs>
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#img)"/>
      <circle class="circle-chart__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
   </svg>
</div>