Replace favicon and logo SVGs with brush-stroke style redesign

This commit is contained in:
2026-05-14 01:43:27 +08:00
parent 7cd8414506
commit 338af9964c
5 changed files with 307 additions and 75 deletions
+27 -17
View File
@@ -1,26 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<filter id="brush" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="5" seed="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G"/>
<filter id="xuan" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="6" seed="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3.5" xChannelSelector="R" yChannelSelector="G" result="rough"/>
<feGaussianBlur in="rough" stdDeviation="0.3" result="blur"/>
<feComponentTransfer in="blur">
<feFuncA type="linear" slope="1.2"/>
</feComponentTransfer>
</filter>
</defs>
<!-- F -->
<g filter="url(#brush)" fill="none" stroke="#111111" stroke-linecap="round" stroke-linejoin="round">
<path d="M 54 30 C 52 65, 56 110, 53 168" stroke-width="9"/>
<path d="M 53 34 C 63 32, 80 29, 102 34" stroke-width="8"/>
<path d="M 56 41 C 72 39, 88 38, 98 41" stroke-width="3" opacity="0.5"/>
<path d="M 53 96 C 62 94, 78 92, 89 97" stroke-width="7"/>
<path d="M 53 168 C 50 172, 48 176, 50 180" stroke-width="3" opacity="0.5"/>
<rect x="4" y="4" width="192" height="192" rx="44" ry="44" fill="#000"/>
<g filter="url(#xuan)">
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#f8f8f8" stroke-width="12" stroke-linecap="round"/>
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" opacity="0.6"/>
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#f8f8f8" stroke-width="10" stroke-linecap="round"/>
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<path d="M 60 22 C 58 30, 61 38, 59 44" fill="none" stroke="#fff" stroke-width="2" opacity="0.3"/>
<path d="M 64 26 C 62 34, 65 40, 63 46" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.2"/>
</g>
<!-- K -->
<g filter="url(#brush)" fill="none" stroke="#111111" stroke-linecap="round" stroke-linejoin="round">
<path d="M 112 30 C 110 64, 111 120, 113 168" stroke-width="9"/>
<path d="M 162 30 C 150 38, 132 60, 114 98" stroke-width="7.5"/>
<path d="M 162 37 C 152 43, 138 62, 120 92" stroke-width="3" opacity="0.5"/>
<path d="M 113 100 C 127 118, 142 144, 158 170" stroke-width="7.5"/>
<path d="M 118 104 C 130 120, 144 142, 153 162" stroke-width="3" opacity="0.5"/>
<g filter="url(#xuan)">
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<path d="M 168 28 C 158 38, 142 58, 122 90" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
<path d="M 120 104 C 132 120, 146 140, 162 168" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

+26 -18
View File
@@ -1,28 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<filter id="brush" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="5" seed="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G"/>
<filter id="xuan" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="6" seed="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3.5" xChannelSelector="R" yChannelSelector="G" result="rough"/>
<feGaussianBlur in="rough" stdDeviation="0.3" result="blur"/>
<feComponentTransfer in="blur">
<feFuncA type="linear" slope="1.2"/>
</feComponentTransfer>
</filter>
</defs>
<rect x="8" y="8" width="184" height="184" rx="42" ry="42" fill="#111111"/>
<rect x="4" y="4" width="192" height="192" rx="44" ry="44" fill="#000" stroke="#1a1a1a" stroke-width="1"/>
<!-- F -->
<g filter="url(#brush)" fill="none" stroke="#f0f0f0" stroke-linecap="round" stroke-linejoin="round">
<path d="M 54 30 C 52 65, 56 110, 53 168" stroke-width="9"/>
<path d="M 53 34 C 63 32, 80 29, 102 34" stroke-width="8"/>
<path d="M 56 41 C 72 39, 88 38, 98 41" stroke-width="3" opacity="0.4"/>
<path d="M 53 96 C 62 94, 78 92, 89 97" stroke-width="7"/>
<path d="M 53 168 C 50 172, 48 176, 50 180" stroke-width="3" opacity="0.4"/>
<g filter="url(#xuan)">
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#f8f8f8" stroke-width="12" stroke-linecap="round"/>
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" opacity="0.6"/>
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#f8f8f8" stroke-width="10" stroke-linecap="round"/>
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<path d="M 60 22 C 58 30, 61 38, 59 44" fill="none" stroke="#fff" stroke-width="2" opacity="0.3"/>
<path d="M 64 26 C 62 34, 65 40, 63 46" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.2"/>
</g>
<!-- K -->
<g filter="url(#brush)" fill="none" stroke="#f0f0f0" stroke-linecap="round" stroke-linejoin="round">
<path d="M 112 30 C 110 64, 111 120, 113 168" stroke-width="9"/>
<path d="M 162 30 C 150 38, 132 60, 114 98" stroke-width="7.5"/>
<path d="M 162 37 C 152 43, 138 62, 120 92" stroke-width="3" opacity="0.35"/>
<path d="M 113 100 C 127 118, 142 144, 158 170" stroke-width="7.5"/>
<path d="M 118 104 C 130 120, 144 142, 153 162" stroke-width="3" opacity="0.35"/>
<g filter="url(#xuan)">
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<path d="M 168 28 C 158 38, 142 58, 122 90" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
<path d="M 120 104 C 132 120, 146 140, 162 168" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

+47 -23
View File
@@ -1,35 +1,59 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<filter id="paper" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" result="noise"/>
<feColorMatrix type="saturate" values="0" in="noise" result="gray"/>
<feBlend in="SourceGraphic" in2="gray" mode="multiply" result="inked"/>
<!-- Ink bleed and brush texture -->
<filter id="xuan" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="6" seed="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3.5" xChannelSelector="R" yChannelSelector="G" result="rough"/>
<feGaussianBlur in="rough" stdDeviation="0.3" result="blur"/>
<feComponentTransfer in="blur">
<feFuncA type="linear" slope="1.2"/>
</feComponentTransfer>
</filter>
<filter id="brush" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="5" seed="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G"/>
<!-- Paper texture -->
<filter id="paper" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" result="n"/>
<feColorMatrix type="saturate" values="0" in="n" result="g"/>
<feBlend in="SourceGraphic" in2="g" mode="multiply"/>
</filter>
</defs>
<rect x="8" y="8" width="184" height="184" rx="42" ry="42" fill="#111111"/>
<!-- Rice paper background -->
<rect x="4" y="4" width="192" height="192" rx="44" ry="44" fill="#000"/>
<!-- F -->
<g filter="url(#brush)" fill="none" stroke="#f0f0f0" stroke-linecap="round" stroke-linejoin="round">
<path d="M 54 30 C 52 65, 56 110, 53 168" stroke-width="9"/>
<path d="M 53 34 C 63 32, 80 29, 102 34" stroke-width="8"/>
<path d="M 56 41 C 72 39, 88 38, 98 41" stroke-width="3" opacity="0.4"/>
<path d="M 53 96 C 62 94, 78 92, 89 97" stroke-width="7"/>
<path d="M 53 168 C 50 172, 48 176, 50 180" stroke-width="3" opacity="0.4"/>
<!-- F — 行书风格,一笔写成 -->
<g filter="url(#xuan)">
<!-- Main stroke group: heavy vertical downstroke -->
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<!-- Lighter overlay for brush texture -->
<path d="M 60 22 C 56 60, 57 100, 56 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<!-- Top bar — 横画,起笔重收笔轻 -->
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#f8f8f8" stroke-width="12" stroke-linecap="round"/>
<path d="M 56 28 C 72 24, 100 24, 118 30" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round" opacity="0.6"/>
<!-- Mid bar — 短横 -->
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#f8f8f8" stroke-width="10" stroke-linecap="round"/>
<path d="M 57 94 C 70 90, 90 90, 100 96" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<!-- 飞白 干笔效果 — dry brush streaks at top -->
<path d="M 60 22 C 58 30, 61 38, 59 44" fill="none" stroke="#fff" stroke-width="2" opacity="0.3"/>
<path d="M 64 26 C 62 34, 65 40, 63 46" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.2"/>
</g>
<!-- K -->
<g filter="url(#brush)" fill="none" stroke="#f0f0f0" stroke-linecap="round" stroke-linejoin="round">
<path d="M 112 30 C 110 64, 111 120, 113 168" stroke-width="9"/>
<path d="M 162 30 C 150 38, 132 60, 114 98" stroke-width="7.5"/>
<path d="M 162 37 C 152 43, 138 62, 120 92" stroke-width="3" opacity="0.35"/>
<path d="M 113 100 C 127 118, 142 144, 158 170" stroke-width="7.5"/>
<path d="M 118 104 C 130 120, 144 142, 153 162" stroke-width="3" opacity="0.35"/>
<!-- K — 行书风格 -->
<g filter="url(#xuan)">
<!-- Vertical downstroke -->
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#f8f8f8" stroke-width="13" stroke-linecap="round"/>
<path d="M 120 22 C 117 60, 118 100, 117 178" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<!-- Upper diagonal — 从右上撇向左下,起笔重收笔轻 -->
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 170 24 C 160 32, 140 56, 118 96" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<!-- Lower diagonal — 从左上捺向右下 -->
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#f8f8f8" stroke-width="11" stroke-linecap="round"/>
<path d="M 117 100 C 130 120, 148 144, 168 176" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
<!-- 飞白 -->
<path d="M 168 28 C 158 38, 142 58, 122 90" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
<path d="M 120 104 C 132 120, 146 140, 162 168" fill="none" stroke="#fff" stroke-width="2" opacity="0.25"/>
</g>
<rect x="8" y="8" width="184" height="184" rx="42" ry="42" fill="none" filter="url(#paper)" opacity="0.06"/>
<!-- Paper grain overlay -->
<rect x="4" y="4" width="192" height="192" rx="44" ry="44" fill="none" filter="url(#paper)" opacity="0.05"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB