直接上代码(可以看到其中蕴含的三分黑暗七分光明):
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<clipPath id="a"><circle cx="60" cy="60" r="47"/></clipPath>
<circle fill="#f0f0f0" cx="60" cy="60" r="50"/>
<rect fill="#1c1c1e" clip-path="url(#a)" x="10" y="10" width="100" height="30"/>
<rect fill="#f0f0f0" clip-path="url(#a)" x="10" y="40" width="100" height="40"/>
<rect fill="#ffb003" clip-path="url(#a)" x="10" y="80" width="100" height="30"/>
</svg>
也许有佬友用得上。
其中 width
和 height
随便调整,不过宽高最好保持一致。
在 React 等框架中注意将 clip-path
属性写为 clipPath
。
添加了一个 logo 地址:https://linux.do/logo-{size}.svg
其中 size
取值范围为 16
至 1024
。
例如:https://linux.do/logo-128.svg