Adding images in circle charts - html

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>