Why is HTML5 text measuring with offsetWidth giving two different results for Arabic text at two different points in time - javascript

I just logged these values for measuring Arabic text with el.offsetWidth:
t1 t2
-----
35 87 "بِسْمِ بِسْمِ"
77 114 "بِسْمِ ٱللَّهِ ٱللَّهِ"
150 224 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحْمَنِ"
215 279 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ٱلرَّحِيمِ"
221 227 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ‎"
281 341 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ ٱلْحَمْدُ"
312 344 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ لِلَّهِ"
351 390 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ رَبِّ رَبِّ"
429 508 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَلَمِينَ ٱلْعَلَمِينَ"
436 442 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَلَمِينَ ‎ ‎"
509 582 "بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَلَمِينَ ‎ ٱلرَّحْمَنِ ٱلرَّحْمَنِ"
573 122 "ٱلرَّحِيمِ ٱلرَّحِيمِ"
64 70 "ٱلرَّحِيمِ ‎ ‎"
112 161 "ٱلرَّحِيمِ ‎ مَلِكِ مَلِكِ"
149 185 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ يَوْمِ"
204 260 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ٱلدِّينِ"
211 217 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ ‎"
258 305 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ إِيَّاكَ"
304 350 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ نَعْبُدُ"
362 420 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ وَإِيَّاكَ"
443 524 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ نَسْتَعِينُ"
449 456 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ ‎ ‎"
501 553 "ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ ‎ ٱهْدِنَا ٱهْدِنَا"
571 132 "ٱلصِّرَطَ ٱلصِّرَطَ"
159 254 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ٱلْمُسْتَقِيمَ"
165 171 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ ‎"
221 278 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ صِرَطَ"
277 332 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ ٱلَّذِينَ"
348 419 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ أَنْعَمْتَ أَنْعَمْتَ"
408 468 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ أَنْعَمْتَ عَلَيْهِمْ عَلَيْهِمْ"
445 481 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ غَيْرِ"
547 650 "ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ ٱلْمَغْضُوبِ ٱلْمَغْضُوبِ"
607 114 "عَلَيْهِمْ عَلَيْهِمْ"
85 116 "عَلَيْهِمْ وَلَا وَلَا"
165 246 "عَلَيْهِمْ وَلَا ٱلضَّآلِّينَ ٱلضَّآلِّينَ"
172 178 "عَلَيْهِمْ وَلَا ٱلضَّآلِّينَ ‎ ‎"
203 235 "عَلَيْهِمْ وَلَا ٱلضَّآلِّينَ ‎ الٓمٓ الٓمٓ"
210 216 "عَلَيْهِمْ وَلَا ٱلضَّآلِّينَ ‎ الٓمٓ ‎ ‎"
256 302 "عَلَيْهِمْ وَلَا ٱلضَّآلِّينَ ‎ الٓمٓ ‎
The code is essentially this:
var measurer = document.createElement('span')
document.body.appendChild(measurer)
var strings = [
'arabic string 1...',
'arabic string 2...',
...
]
next()
function next() {
var string = strings.shift()
var s1 = measure(string)
setTimeout(function(){
var s2 = measure(string)
console.log(s1, s2, string)
next()
}, 300)
}
function measure(string) {
measurer.innerHTML = string
return measurer.offsetWidth
}
Why is it doing this? Why is the final value "after I've waited for a little while" usually greater than the initially calculated offsetWidth value? How do I accurately calculate these?

I wasn't able to reproduce your findings (using a simplified version of your code with a sample of the strings you provided).
const measurer = document.createElement('span');
document.body.appendChild(measurer);
const strings = [
"بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحْمَنِ",
"بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ ‎ ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَلَمِينَ ‎ ٱلرَّحْمَنِ ٱلرَّحْمَنِ",
"ٱلرَّحِيمِ ‎ مَلِكِ يَوْمِ ٱلدِّينِ ‎ إِيَّاكَ نَعْبُدُ نَعْبُدُ",
"ٱلصِّرَطَ ٱلْمُسْتَقِيمَ ‎ صِرَطَ ٱلَّذِينَ ٱلَّذِينَ"
];
console.log("t1 t2 string\n--------------------------");
strings.forEach(next);
function next(str) {
const s1 = measure(str);
setTimeout( () => console.log(s1, measure(str), str), 300);
}
function measure(string) {
measurer.innerHTML = string;
return measurer.offsetWidth;
}

Related

Weird Spacing Issue in HTML/CSS [duplicate]

This question already has answers here:
Fixing the alignment of element in HTML/CSS
(2 answers)
Closed last year.
I have the following code:
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
/* signature animation */
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
.quotes svg {
width: auto;
height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>
<h1> Some Random Text Goes Here </h1>
The only problem is that when the signature animation plays, the bottom text which says, Some Random Text Goes Here suddenly moves down a little. I do not want that. Why is that happening? What property would stop that from happening?
When you run the code, you can see that as soon as the signature animation plays, the bottom text gets shifted down. How do I stop that? Any suggestions?
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
/* signature animation */
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
.quotes svg {
width: auto;
height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px; height:50px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>
<h1> Some Random Text Goes Here </h1>
The problem is that two items printed on the same line have different heights. To avoid this problem, you can make the following changes:
<style>
.quotes {
/* You should add the following declaration to the quotes class style. */
height: 50px !important;
}
</style>
<div class="quotes">
<h1> Text</h1>
</div>
<div class="quotes">
<!-- <path> elements -->
</div>
The row takes 56px height and 16px margin bottom when it is showing "Sample Text", while it takes 71px height and 16px margin bottom when the signature appeared.
So the easiest way to avoid bottom text gets shifted down is to define certain height for #hero div. For example:
#hero {
height: 5em;
}
In addition to your code, the CSS line-height: 56px; will cut the bottom of letter "p" in "Sample", see if you want to remove that CSS.
You have need to adjust h1 line-height and SVG height!
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
/* signature animation */
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 1em;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
.quotes svg {
width: auto;
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>
<h1> Some Random Text Goes Here </h1>

Fixing the alignment of element in HTML/CSS

I have the following code:
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
/* signature animation */
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>
When you run the code, you can clearly see that the signature alignment and size is way off than the text Sample or the text Text.
How can I make the signature animation the same size as the word Sample or Text and make the signature animation align properly right after Sample?
It should display right after the Sample and should be the same size as Sample
ur problem is svg too large so u just need to set height for the svg like that
.quotes svg {
width: auto;
height: 1em;
}
example
You can reduce the size of the signature by reducing the svg width and height or use
.quotes svg{
width: 150px;
height: 1em;
}
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
.quotes svg{
width: 150px;
height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>

How to get the DOM content as seen in inspect element window after rendering?

I am trying to get the SVG generated using MathJax using JS and animate it like here
In my code, I have
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
SVG: {
useGlobalCache: true,
useFontCache: false
}
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_SVG"></script>
<div id="sup">$$a$$</div>
When I check the rendered DOM using inspect element, i get the contents of div with id sup as
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<div class="MathJax_SVG_Display" style="text-align: center;">
<span style="font-size: 100%; display: inline-block; position: relative;" class="MathJax_SVG" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>a</mi></math>" role="presentation">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1.23ex" height="1.454ex" style="vertical-align: -0.227ex;" viewBox="0 -528.2 529.5 625.9" role="img" focusable="false" aria-hidden="true">
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<path stroke-width="1" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
</g>
</svg>
<span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>a</mi></math>
</span>
</span>
</div>
<script type="math/tex; mode=display" id="MathJax-Element-1">a</script>
But when I try to get the innerHTML of the div with id sup using
window.addEventListener('load', function(){
console.log(document.getElementById("sup").innerHTML);
})
I get $$a$$ as output.
How can I get the output same as that shown in inspect element?
Your problem is that MathJax is never loaded when you console.log on window.load.
First, you need to wait until MathJax is loaded and rendered in order to get the desired output result.
I've found This question which might help you
The way to synchronize with MathJax's startup actions it to register a StartupHook that will fire when the startup is complete. For example, you can use
MathJax.Hub.Register.StartupHook("End",function () {
console.log(document.getElementById("sup").innerHTML);
});

HTML, SVG, and Javascript with XML - DOMParser not reading every other element

I'm working on a program that saves and loads SVG data to and from an xml file and it does work, but for some reason whenever the DOMParser runs, every other element is not being read.
The XML file I am trying to read is formatted like this:
<?xml version="1.0" encoding="utf-8"?>
<marks>
<path xmlns="http://www.w3.org/2000/svg" class="mark" d="M736 264 L736 264 L736 264 L736 265 L736 268 L736 269 L736 272 L736 277 L736 280 L736 288 L736 304 L736 312 L737 318 L740 356 L740 364 L740 376 L741 398 L742 430 L742 474 L744 488" fill="none" stroke="#000000" stroke-width="2" id="A"></path>
<path xmlns="http://www.w3.org/2000/svg" class="mark" d="M1230 426 L1230 428 L1230 428 L1229 428 L1228 429 L1228 430 L1228 430 L1226 432 L1224 432 L1218 434 L1216 436 L1209 436 L1194 440 L1186 440 L1180 440 L1158 444 L1092 445 L1018 446 L928 446 L902 446" fill="none" stroke="#000000" stroke-width="2" id="AA"></path>
</marks>
In this example, the first element is not read but the second one is. Here's the javascript code:
var e = '<?xml version="1.0" encoding="utf-8"?><marks><path xmlns="http://www.w3.org/2000/svg" class="mark" d="M736 264 L736 264 L736 264 L736 265 L736 268 L736 269 L736 272 L736 277 L736 280 L736 288 L736 304 L736 312 L737 318 L740 356 L740 364 L740 376 L741 398 L742 430 L742 474 L744 488" fill="none" stroke="#000000" stroke-width="2" id="A"></path><path xmlns="http://www.w3.org/2000/svg" class="mark" d="M1230 426 L1230 428 L1230 428 L1229 428 L1228 429 L1228 430 L1228 430 L1226 432 L1224 432 L1218 434 L1216 436 L1209 436 L1194 440 L1186 440 L1180 440 L1158 444 L1092 445 L1018 446 L928 446 L902 446" fill="none" stroke="#000000" stroke-width="2" id="AA"></path></marks>';
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(e, "text/xml");
console.log(xmlDoc);
Even at this point the XML is not being parsed correctly. Please let me know if you have a solution.
Try to use "application/xml" instead of "text/xml".

How can this path stroke set the opacity of the group behind it?

I have this code which shows my current output when the snippet is run.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<g fill-opacity=".2">
<path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" />
<circle fill="#f5f4b7" cx="150" cy="150" r="141.9" />
<path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" />
<path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" />
<path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" />
<path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" />
<path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" />
<path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" />
<path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" />
<path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" />
<path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" />
<path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" />
</g>
<svg style="display: block; width: 100%;" viewBox="0 0 100 100">
<path stroke="#f79820" stroke-opacity=".4" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" />
</svg>
</svg>
My goal is to get everything covered by the stroke to be shown "darker" than the remaining portion of the circle. However the effect that is happening is the opacity of the stroke is compounding with the groups opacity so it doesn't have the contrast it needs to have.
Ideally it would look something like this...
Would inverting the pieces be an option? Instead of darkening the section, lighten the inverse? I removed the fill-opacity on the outer svg, changed the stroke of the inner path to white and increased the opacity to .6. I did not change the path, though, this was just to demonstrate the concept.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<g>
<path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" />
<circle fill="#f5f4b7" cx="150" cy="150" r="141.9" />
<path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" />
<path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" />
<path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" />
<path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" />
<path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" />
<path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" />
<path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" />
<path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" />
<path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" />
<path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" />
</g>
<svg style="display: block; width: 100%;" viewBox="0 0 100 100">
<path stroke="#ffffff" stroke-opacity=".6" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" />
</svg>
</svg>

Categories

Resources