n3r4zzurr0/svg-spinners
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gooey spinners

Browse Source
This commit is contained in:
Utkarsh Verma
2022-06-12 17:16:32 +05:30
parent ce274d1680
commit 1f96f4c6a4
5 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

File diff suppressed because one or more lines are too long

1
preview/gooey-balls-1-white-round-bg.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24" rx="2" fill="#fff"/><defs><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="g"/><feBlend in="SourceGraphic" in2="g"/></filter></defs><g filter="url(#g)"><circle cx="4" cy="12" r="3"><animate attributeName="cx" calcMode="spline" dur=".75s" values="4;9;4" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/><animate attributeName="r" calcMode="spline" dur=".75s" values="3;8;3" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/></circle><circle cx="15" cy="12" r="8"><animate attributeName="cx" calcMode="spline" dur=".75s" values="15;20;15" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/><animate attributeName="r" calcMode="spline" dur=".75s" values="8;3;8" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/></circle></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
preview/gooey-balls-2-white-round-bg.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24" rx="2" fill="#fff"/><defs><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="g"/><feBlend in="SourceGraphic" in2="g"/></filter></defs><g filter="url(#g)"><circle cx="5" cy="12" r="4"><animate attributeName="cx" calcMode="spline" dur="2s" values="5;8;5" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite"/></circle><circle cx="19" cy="12" r="4"><animate attributeName="cx" calcMode="spline" dur="2s" values="19;16;19" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" calcMode="linear" dur=".75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 909 B

1
svg/gooey-balls-1.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="g"/><feBlend in="SourceGraphic" in2="g"/></filter></defs><g filter="url(#g)"><circle cx="4" cy="12" r="3"><animate attributeName="cx" calcMode="spline" dur=".75s" values="4;9;4" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/><animate attributeName="r" calcMode="spline" dur=".75s" values="3;8;3" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/></circle><circle cx="15" cy="12" r="8"><animate attributeName="cx" calcMode="spline" dur=".75s" values="15;20;15" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/><animate attributeName="r" calcMode="spline" dur=".75s" values="8;3;8" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite"/></circle></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

1
svg/gooey-balls-2.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="g"/><feBlend in="SourceGraphic" in2="g"/></filter></defs><g filter="url(#g)"><circle cx="5" cy="12" r="4"><animate attributeName="cx" calcMode="spline" dur="2s" values="5;8;5" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite"/></circle><circle cx="19" cy="12" r="4"><animate attributeName="cx" calcMode="spline" dur="2s" values="19;16;19" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" calcMode="linear" dur=".75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 848 B