add new download animations

This commit is contained in:
bmFtZQ 2021-05-03 22:20:13 +08:00 committed by GitHub
parent db650addf3
commit 5f17d552f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 379 additions and 22 deletions

View file

@ -26,14 +26,9 @@
list-style-image: url(refresh.svg) !important;
}
#reload-button>.toolbarbutton-animatable-box,
#stop-button>.toolbarbutton-animatable-box,
#nav-bar-overflow-button>.toolbarbutton-animatable-box {
margin-inline-start: calc((16px + 2 * 12px - 18px) / 2) !important;
}
#stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
background-image: url(reload-to-stop.svg) !important;
width: 468px !important;
}
#stop-button,
@ -43,6 +38,7 @@
#stop-reload-button[animate]>#reload-button[displaystop]+#stop-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
background-image: url(stop-to-reload.svg) !important;
width: 468px !important;
}
#nav-bar-overflow-button[animate]>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
@ -102,21 +98,25 @@
}
#appMenu-fullscreen-button,
#fullscreen-button {
#fullscreen-button,
#appMenu-fullscreen-button2 {
list-style-image: url(fullscreen-enter.svg) !important;
}
#appMenu-fullscreen-button[checked],
#fullscreen-button[checked] {
#fullscreen-button[checked],
#appMenu-fullscreen-button2[checked] {
list-style-image: url(fullscreen-exit.svg) !important;
}
#appMenu-zoomEnlarge-button,
#appMenu-zoomEnlarge-button2,
#zoom-in-button {
list-style-image: url(zoom-in.svg) !important;
}
#appMenu-zoomReduce-button,
#appMenu-zoomReduce-button2,
#zoom-out-button {
list-style-image: url(zoom-out.svg) !important;
}
@ -126,25 +126,49 @@
list-style-image: url(download.svg#arrow-with-bar) !important;
}
#downloads-indicator-icon {
background-image: url(download.svg#arrow) !important;
@media (-moz-proton: 0) {
#downloads-indicator-icon {
background-image: url(download.svg#arrow) !important;
}
#downloads-button[progress] #downloads-indicator-icon {
background-image: url(download.svg#arrow-progress) !important;
}
#downloads-indicator-progress-outer {
background-image: url(download.svg#default-bar) !important;
}
#downloads-indicator-progress-inner,
#downloads-button[progress]>.toolbarbutton-badge-stack>#downloads-indicator-anchor>#downloads-indicator-progress-outer {
background-image: url(download.svg#progress-bar-fg) !important;
}
#downloads-button[progress]>.toolbarbutton-badge-stack>#downloads-indicator-anchor>#downloads-indicator-progress-outer {
background-image: url(download.svg#progress-bar-bg) !important;
}
}
#downloads-button[progress] #downloads-indicator-icon {
background-image: url(download.svg#arrow-progress) !important;
}
@media (-moz-proton) {
#downloads-indicator-start-image {
list-style-image: url(notification-start-animation.svg) !important;
}
#downloads-indicator-progress-outer {
background-image: url(download.svg#default-bar) !important;
}
#downloads-indicator-finish-image {
list-style-image: url(notification-finish-animation.svg) !important;
}
#downloads-indicator-progress-inner,
#downloads-button[progress]>.toolbarbutton-badge-stack>#downloads-indicator-anchor>#downloads-indicator-progress-outer {
background-image: url(download.svg#progress-bar-fg) !important;
}
#downloads-indicator-anchor {
list-style-image: url(download.svg#arrow-with-bar) !important;
}
#downloads-button[progress]>.toolbarbutton-badge-stack>#downloads-indicator-anchor>#downloads-indicator-progress-outer {
background-image: url(download.svg#progress-bar-bg) !important;
#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
animation-duration: calc(var(--anim-steps) * 30ms) !important;
}
#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
animation-duration: calc(var(--anim-steps) * 25ms) !important;
}
}
#PanelUI-fxa-menu-remotetabs-button,

View file

@ -0,0 +1,277 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1320" height="20">
<style>
.arrow, .bar { fill: context-stroke; fill-opacity: context-stroke-opacity; }
#circle { stroke: context-fill; stroke-opacity: context-fill-opacity; stroke-width: 1; stroke-linecap: round; fill: none; }
.progress { fill: context-fill; fill-opacity: context-fill-opacity; }
.check { stroke: context-fill; context-fill-opacity: context-fill-opacity; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; fill: none; }
</style>
<defs>
<circle id="circle" r="8.5" cx="10" cy="10"/>
<circle id="progress" class="progress" r="6.5" cx="10" cy="10"/>
</defs>
<g id="1">
<use href="#circle"/>
<use href="#progress"/>
</g>
<g id="2">
<use href="#circle" x="20"/>
<use href="#progress" x="20"/>
</g>
<g id="3">
<use href="#circle" x="40"/>
<use href="#progress" x="40"/>
</g>
<g id="4">
<use href="#circle" x="60"/>
<use href="#progress" x="60"/>
</g>
<g id="5">
<use href="#circle" x="80"/>
<use href="#progress" x="80"/>
</g>
<g id="6">
<use href="#circle" x="100"/>
<use href="#progress" x="100"/>
</g>
<g id="7">
<use href="#circle" x="120"/>
<use href="#progress" x="120"/>
</g>
<g id="8">
<use href="#circle" x="140"/>
<use href="#progress" x="140"/>
</g>
<g id="9">
<use href="#circle" x="160"/>
<circle class="progress" r="5.75" cx="170" cy="10"/>
</g>
<g id="10">
<use href="#circle" x="180"/>
<circle class="progress" r="4.25" cx="190" cy="10"/>
</g>
<g id="11">
<use href="#circle" x="200"/>
<circle class="progress" r="2.25" cx="210" cy="10"/>
</g>
<g id="12">
<use href="#circle" x="220"/>
<circle class="progress" r=".75" cx="230" cy="10"/>
</g>
<use href="#circle" x="240" id="13"/>
<use href="#circle" x="260" id="14"/>
<g id="15">
<use href="#circle" x="280"/>
<path class="check" d="m286.5 10 1.5 1.5"/>
</g>
<g id="16">
<use href="#circle" x="300"/>
<path class="check" d="m306.5 10 2.5 2.5 2-2"/>
</g>
<g id="17">
<use href="#circle" x="320"/>
<path class="check" d="m326.5 10 2.5 2.5 4-4"/>
</g>
<g id="18">
<use href="#circle" x="340"/>
<path class="check" d="m346.5 10 2.5 2.5 4.5-4.5"/>
</g>
<g id="19">
<use href="#circle" x="360"/>
<path class="check" d="m366.5 10 2.5 2.5 5-5"/>
</g>
<g id="20">
<use href="#circle" x="380"/>
<path class="check" d="m386.5 10 2.5 2.5 5-5"/>
</g>
<g id="21">
<use href="#circle" x="400"/>
<path class="check" d="m406.5 10 2.5 2.5 5-5"/>
</g>
<g id="22">
<use href="#circle" x="420"/>
<path class="check" d="m426.5 10 2.5 2.5 5-5"/>
</g>
<g id="23">
<use href="#circle" x="440"/>
<path class="check" d="m446.5 10 2.5 2.5 5-5"/>
</g>
<g id="24">
<use href="#circle" x="460"/>
<path class="check" d="m466.5 10 2.5 2.5 5-5"/>
</g>
<g id="25">
<use href="#circle" x="480"/>
<path class="check" d="m486.5 10 2.5 2.5 5-5"/>
</g>
<g id="26">
<use href="#circle" x="500"/>
<path class="check" d="m506.5 10 2.5 2.5 5-5"/>
</g>
<g id="27">
<use href="#circle" x="520"/>
<path class="check" d="m526.5 10 2.5 2.5 5-5"/>
</g>
<g id="28">
<use href="#circle" x="540"/>
<path class="check" d="m546.5 10 2.5 2.5 5-5"/>
</g>
<g id="29">
<use href="#circle" x="560"/>
<path class="check" d="m566.5 10 2.5 2.5 5-5"/>
</g>
<g id="30">
<use href="#circle" x="580"/>
<path class="check" d="m586.5 10 2.5 2.5 5-5"/>
</g>
<g id="31">
<use href="#circle" x="600"/>
<path class="check" d="m606.5 10 2.5 2.5 5-5"/>
</g>
<g id="32">
<use href="#circle" x="620"/>
<path class="check" d="m626.5 10 2.5 2.5 5-5"/>
</g>
<g id="33">
<use href="#circle" x="640"/>
<path class="check" d="m646.5 10 2.5 2.5 5-5"/>
</g>
<g id="34">
<use href="#circle" x="660"/>
<path class="check" d="m666.5 10 2.5 2.5 5-5"/>
</g>
<g id="35">
<use href="#circle" x="680"/>
<path class="check" d="m686.5 10 2.5 2.5 5-5"/>
</g>
<g id="36">
<use href="#circle" x="700"/>
<path class="check" d="m706.5 10 2.5 2.5 5-5"/>
</g>
<g id="37">
<use href="#circle" x="720"/>
<path class="check" d="m726.5 10 2.5 2.5 5-5"/>
</g>
<g id="38">
<use href="#circle" x="740"/>
<path class="check" d="m746.5 10 2.5 2.5 5-5"/>
</g>
<g id="39">
<use href="#circle" x="760"/>
<path class="check" d="m766.5 10 2.5 2.5 5-5"/>
</g>
<g id="40">
<use href="#circle" x="780"/>
<path class="check" d="m786.5 10 2.5 2.5 5-5"/>
</g>
<g id="41">
<use href="#circle" x="800"/>
<path class="check" d="m806.5 10 2.5 2.5 5-5"/>
</g>
<g id="42">
<use href="#circle" x="820"/>
<path class="check" d="m826.5 10 2.5 2.5 5-5"/>
</g>
<g id="43">
<use href="#circle" x="840"/>
<path class="check" d="m846.5 10 2.5 2.5 5-5"/>
</g>
<g id="44">
<use href="#circle" x="860"/>
<path class="check" d="m866.5 10 2.5 2.5 5-5"/>
</g>
<g id="45">
<use href="#circle" x="880"/>
<path class="check" d="m886.5 10 2.5 2.5 5-5"/>
</g>
<g id="46">
<use href="#circle" x="900"/>
<path class="check" d="m906.5 10 2.5 2.5 5-5"/>
</g>
<g id="47">
<use href="#circle" x="920"/>
<path class="check" d="m926.5 10 2.5 2.5 5-5"/>
</g>
<g id="48">
<use href="#circle" x="940"/>
<path class="check" d="m946.5 10 2.5 2.5 5-5"/>
</g>
<g id="49">
<use href="#circle" x="960"/>
<path class="check" d="m966.5 10 2.5 2.5 5-5"/>
</g>
<g id="50">
<use href="#circle" x="980"/>
<path class="check" d="m986.5 10 2.5 2.5 5-5"/>
</g>
<g id="51">
<use href="#circle" x="1000"/>
<path class="check" d="m1006.5 10 2.5 2.5 5-5"/>
</g>
<g id="52">
<use href="#circle" x="1020"/>
<path class="check" d="m1026.5 10 2.5 2.5 5-5"/>
</g>
<g id="53">
<use href="#circle" x="1040"/>
<path class="check" d="m1046.5 10 2.5 2.5 5-5"/>
</g>
<g id="54">
<use href="#circle" x="1060"/>
<path class="check" d="m1066.5 10 2.5 2.5 5-5"/>
</g>
<g id="55">
<use href="#circle" x="1080"/>
<path class="check" d="m1086.5 10 2.5 2.5 5-5"/>
</g>
<g id="56">
<use href="#circle" x="1100"/>
<path class="check" d="m1106.5 10 2.5 2.5 5-5"/>
</g>
<g id="57">
<use href="#circle" x="1120"/>
<path class="check" d="m1126.5 10 2.5 2.5 5-5"/>
</g>
<g id="58">
<use href="#circle" x="1140"/>
<path class="check" d="m1146.5 10 2.5 2.5 5-5"/>
</g>
<g id="59">
<use href="#circle" x="1160"/>
<path class="check" d="m1166.5 10 2.5 2.5 5-5"/>
</g>
<g id="60">
<use href="#circle" x="1180" style="opacity:.75"/>
<path class="check" style="opacity:.9" d="m1187.492 11.031 1.526 1.469 3.052-2.938"/>
</g>
<g id="61">
<use href="#circle" x="1200" style="opacity:.5"/>
<path class="check" style="opacity:.75" d="m1208.23 11.594.846.75 1.695-1.5"/>
<path class="arrow" style="opacity:.5" d="M1210.006 7.575c.05 0 .092.036.1.083v2.424l.743-.744a.102.102 0 0 1 .13-.012l.014.011c.035.036.04.09.012.13l-.012.015-.916.917a.103.103 0 0 1-.052.028l-.022.002a.103.103 0 0 1-.08-.04l-.91-.907a.102.102 0 0 1 .13-.156l.015.011.743.743V7.676c0-.056.046-.101.102-.101z"/>
<path class="bar" d="M1205.044 16a.5.5 0 0 1 .09.992l-.09.008h-.544a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="62">
<use href="#circle" x="1220" style="opacity:.25"/>
<path class="arrow" style="opacity:.75" d="M1230.002 5.73c.11 0 .202.08.222.185l.01.04v5.302l1.638-1.64a.225.225 0 0 1 .287-.026l.03.026a.226.226 0 0 1 .027.286l-.026.031-2.02 2.023a.227.227 0 0 1-.114.062l-.048.004a.225.225 0 0 1-.178-.087l-2.003-2.001a.225.225 0 0 1 .286-.344l.031.026 1.639 1.636V5.955c0-.124.1-.224.224-.224z"/>
<path class="bar" d="M1226.762 16a.5.5 0 0 1 .09.992l-.09.008h-2.262a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="63">
<use href="#circle" x="1240" style="opacity:.25"/>
<path class="arrow" d="M1250.001 3.918c.154 0 .282.111.309.258l.01.056v7.408l2.29-2.292a.314.314 0 0 1 .4-.036l.043.036a.313.313 0 0 1 .036.4l-.036.044-2.821 2.826a.31.31 0 0 1-.16.086l-.068.007a.314.314 0 0 1-.248-.122l-2.799-2.797a.314.314 0 0 1 .4-.48l.043.036 2.29 2.287V4.232c0-.173.14-.314.314-.314z"/>
<path class="bar" d="M1249.145 16.272a.5.5 0 0 1 .09.992l-.09.008h-4.645a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="64">
<use href="#circle" x="1260" style="opacity:.25"/>
<path class="arrow" d="M1270 2.575a.41.41 0 0 1 .404.336l.01.074v9.671l2.99-2.992a.41.41 0 0 1 .522-.048l.056.048a.409.409 0 0 1 .047.523l-.047.057-3.683 3.69a.407.407 0 0 1-.21.112l-.087.008a.41.41 0 0 1-.324-.159l-3.655-3.65a.41.41 0 0 1 .523-.628l.056.047 2.99 2.986V2.984a.41.41 0 0 1 .41-.41z"/>
<path class="bar" d="M1272.458 16.513a.5.5 0 0 1 .09.992l-.09.008h-7.958a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="65">
<use href="#circle" x="1280" style="opacity:.25"/>
<path class="arrow" d="M1290 2c.222 0 .406.16.444.37l.01.081v10.64l3.289-3.291a.451.451 0 0 1 .575-.053l.062.052a.45.45 0 0 1 .052.575l-.052.063-4.052 4.06a.447.447 0 0 1-.23.123l-.096.009a.45.45 0 0 1-.357-.175l-4.02-4.017a.451.451 0 0 1 .574-.69l.062.052 3.289 3.285V2.45c0-.25.202-.451.451-.451z"/>
<path class="bar" d="M1294.395 16.91a.5.5 0 0 1 .09.992l-.09.008h-9.895a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="66">
<use href="#circle" x="1300" style="opacity:.25"/>
<path class="arrow" d="M1310 2a.5.5 0 0 1 .492.41l.01.09v11.794l3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .057.638l-.058.07-4.492 4.5a.496.496 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.194l-4.457-4.452a.5.5 0 0 1 .637-.766l.07.058 3.645 3.641V2.5a.5.5 0 0 1 .5-.5z"/>
<path class="bar" d="M1315.5 16.998a.5.5 0 0 1 .09.992l-.09.008h-11a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.7 KiB

View file

@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="340" height="20">
<style>
.arrow, .bar { fill: context-stroke; fill-opacity: context-stroke-opacity; }
.circle { stroke: context-fill; stroke-opacity: context-fill-opacity; stroke-width: 1; stroke-linecap: round; fill: none; }
</style>
<g id="1">
<path class="arrow" d="M10 2a.5.5 0 0 1 .492.41l.008.09-.004 11.794 3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .058.638l-.058.07-4.492 4.5a.497.497 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.194l-4.457-4.452a.5.5 0 0 1 .637-.766l.07.058 3.645 3.641L9.5 2.5A.5.5 0 0 1 10 2z"/>
<path class="bar" d="M15.5 16.998a.5.5 0 0 1 .09.992l-.09.008h-11a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="2">
<path class="arrow" d="M30 2a.5.5 0 0 1 .492.41l.008.09-.004 11.544 3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .058.638l-.058.07-4.492 4.5a.497.497 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.194l-4.457-4.452a.5.5 0 0 1 .637-.766l.07.058 3.645 3.641L29.5 2.5A.5.5 0 0 1 30 2z"/>
<path class="bar" d="M35.281 16.467a.5.5 0 0 1 .09.991l-.09.009H24.5a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="3">
<path class="arrow" d="M50 2.221c.225 0 .411.162.45.376l.008.082-.004 10.571 3.338-3.34a.458.458 0 0 1 .584-.054l.064.053c.159.158.177.405.053.584l-.053.063-4.113 4.121a.455.455 0 0 1-.234.125l-.097.01a.457.457 0 0 1-.362-.179l-4.081-4.076a.458.458 0 0 1 .583-.701l.064.053 3.338 3.334.004-10.564c0-.253.205-.458.458-.458z"/>
<path class="bar" d="M53.337 16.135a.5.5 0 0 1 .09.992l-.09.008H44.5a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="4">
<path class="arrow" d="M70 2.972c.197 0 .362.143.396.331l.007.073-.004 9.31 2.94-2.943a.403.403 0 0 1 .515-.047l.055.046c.14.14.156.358.048.515l-.047.056-3.622 3.629a.4.4 0 0 1-.206.11l-.086.008a.403.403 0 0 1-.319-.157l-3.594-3.59a.403.403 0 0 1 .514-.617l.056.046 2.94 2.937.003-9.304c0-.222.18-.403.403-.403z"/>
<path class="bar" d="M70.862 15.98a.5.5 0 0 1 .09.992l-.09.008H64.5a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="5">
<path class="circle" d="M84.49 16.473a8.5 8.5 0 0 1-.931-.925"/>
<path class="arrow" d="M89.998 4.785c.134 0 .244.096.267.222l.005.05-.002 6.265 1.978-1.98a.271.271 0 0 1 .346-.032l.038.032c.094.094.105.24.032.346l-.032.037-2.438 2.443a.27.27 0 0 1-.138.074l-.058.006a.27.27 0 0 1-.214-.106l-2.42-2.416a.271.271 0 0 1 .346-.416l.038.032 1.979 1.976.002-6.262c0-.15.122-.271.271-.271z"/>
<path class="bar" d="M88.237 15.98a.5.5 0 0 1 .09.992l-.09.008H84.5a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="6">
<path class="circle" d="M104.49 16.473a8.5 8.5 0 0 1-2.51-3.656"/>
<path class="arrow" d="M109.998 6.95c.076 0 .138.055.151.127l.002.027v3.558l1.123-1.125a.154.154 0 0 1 .197-.018l.02.018c.054.054.06.137.019.197l-.018.021-1.384 1.387a.153.153 0 0 1-.079.042l-.032.003a.154.154 0 0 1-.122-.06L108.5 9.755a.154.154 0 0 1 .197-.236l.021.018 1.124 1.122V7.104c0-.085.07-.154.154-.154z"/>
<path class="bar" d="M105.74 15.98a.5.5 0 0 1 .09.992l-.09.008h-1.24a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="7">
<path class="circle" d="M124.49 16.473a8.5 8.5 0 0 1-1.43-11.382"/>
<path class="arrow" d="M129.997 7.702a.1.1 0 0 1 .098.081l.001.018v2.296l.724-.726a.1.1 0 0 1 .127-.012l.014.012a.1.1 0 0 1 .012.127l-.012.014-.893.894a.099.099 0 0 1-.05.028l-.022.002a.1.1 0 0 1-.079-.04l-.886-.884a.1.1 0 0 1 .127-.153l.014.012.725.724V7.8a.1.1 0 0 1 .1-.1z"/>
<path class="bar" d="M125.077 15.98a.5.5 0 0 1 .09.992l-.09.008h-.577a.5.5 0 0 1-.09-.992l.09-.008z"/>
</g>
<g id="8">
<path class="circle" d="M144.49 16.473a8.5 8.5 0 0 1-2.598-9.03 8.5 8.5 0 0 1 7.309-5.905 8.5 8.5 0 0 1 8.283 4.435"/>
<path class="arrow" d="M149.997 8.364a.06.06 0 0 1 .06.05V9.83l.444-.444a.06.06 0 0 1 .077-.007l.008.007a.06.06 0 0 1 .007.078l-.007.008-.546.548a.061.061 0 0 1-.032.017h-.012a.061.061 0 0 1-.049-.023l-.542-.542a.06.06 0 0 1 .077-.093l.008.007.444.443V8.425a.06.06 0 0 1 .061-.06z"/>
</g>
<g id="9">
<path class="circle" d="M164.49 16.473a8.5 8.5 0 0 1-1.09-11.831 8.5 8.5 0 0 1 11.802-1.362 8.5 8.5 0 0 1 1.635 11.768"/>
<path class="arrow" d="M169.996 9.02c.018 0 .034.014.037.031v.861l.27-.27a.037.037 0 0 1 .047-.005l.005.005a.037.037 0 0 1 .004.047l-.004.005-.333.333a.035.035 0 0 1-.019.01h-.008a.037.037 0 0 1-.029-.014l-.33-.329a.037.037 0 0 1 .048-.057l.005.005.27.269v-.853c0-.02.016-.037.036-.037z"/>
</g>
<g id="10">
<path class="circle" d="M184.49 16.473a8.5 8.5 0 0 1-2.166-10.129 8.5 8.5 0 0 1 9.23-4.7 8.5 8.5 0 0 1 6.92 7.707 8.5 8.5 0 0 1-5.666 8.671"/>
<path class="arrow" d="M189.996 9.297c.01 0 .016.006.018.014v.412l.129-.129a.018.018 0 0 1 .022-.002l.003.002a.018.018 0 0 1 .002.023l-.002.002-.159.16a.021.021 0 0 1-.009.004h-.004a.018.018 0 0 1-.014-.006l-.157-.158a.018.018 0 0 1 .023-.027l.002.002.13.129v-.408c0-.01.007-.018.017-.018z"/>
</g>
<path class="circle" d="M204.49 16.473a8.5 8.5 0 0 1-1.81-10.797 8.5 8.5 0 0 1 10.331-3.624 8.5 8.5 0 0 1 5.333 9.562 8.5 8.5 0 0 1-8.513 6.884" id="11"/>
<path class="circle" d="M224.49 16.473a8.5 8.5 0 0 1-1.516-11.26 8.5 8.5 0 0 1 11.035-2.707 8.5 8.5 0 0 1 3.868 10.683 8.5 8.5 0 0 1-10.21 4.985" id="12"/>
<path class="circle" d="M244.489 16.473a8.5 8.5 0 0 1-1.32-11.535 8.5 8.5 0 0 1 11.42-2.09 8.5 8.5 0 0 1 2.854 11.253 8.5 8.5 0 0 1-11.038 3.603" id="13"/>
<path class="circle" d="M264.489 16.473a8.5 8.5 0 0 1-1.106-11.81 8.5 8.5 0 0 1 11.778-1.415 8.5 8.5 0 0 1 1.721 11.737 8.5 8.5 0 0 1-11.688 2.027" id="14"/>
<path class="circle" d="M298.498 10a8.5 8.5 0 0 1-8.5 8.5 8.5 8.5 0 0 1-8.5-8.5 8.5 8.5 0 0 1 8.5-8.5 8.5 8.5 0 0 1 8.5 8.5z" id="15"/>
<path class="circle" d="M318.498 10a8.5 8.5 0 0 1-8.5 8.5 8.5 8.5 0 0 1-8.5-8.5 8.5 8.5 0 0 1 8.5-8.5 8.5 8.5 0 0 1 8.5 8.5z" id="16"/>
<path class="circle" d="M338.498 10a8.5 8.5 0 0 1-8.5 8.5 8.5 8.5 0 0 1-8.5-8.5 8.5 8.5 0 0 1 8.5-8.5 8.5 8.5 0 0 1 8.5 8.5z" id="17"/>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB