SVG 3D视觉效果的M字母创意图标 - 踏得网

3d logo in svg

svg, icon, 3d, logo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2355
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="logo-wrapper">
    <div class="logo-container">
        <div class="logo-oval">
            <svg viewBox="0 0 122 122" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:sketch="https://www.bohemiancoding.com/sketch/ns">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                    <g id="Oval-1-+-Stroke-1-+-Fill-2" sketch:type="MSLayerGroup">
                        <ellipse id="Oval-1" fill-opacity="0.967164874" fill="#F44336" sketch:type="MSShapeGroup" cx="61" cy="61" rx="60.807571" ry="61"></ellipse>
                    </g>
                </g>
            </svg>
        </div>

<div class="logo-m">
            <svg viewBox="0 0 122 122" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:sketch="https://www.bohemiancoding.com/sketch/ns">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                    <g id="Oval-1-+-Stroke-1-+-Fill-2" sketch:type="MSLayerGroup">
                        <g id="Stroke-1-+-Fill-2" transform="translate(19.719162, 35.731841)" sketch:type="MSShapeGroup">
                            <path d="M60.3425701,0.18550555 C61.4378587,0.18550555 62.5487387,0.464089323 63.5686694,1.04924543 C66.6804326,2.83790947 67.7562321,6.815539 65.9716782,9.93398493 L48.0254449,41.2850738 C46.2402413,44.4035197 42.272256,45.4814046 39.1572447,43.6933914 C36.0454815,41.9047274 34.969682,37.9270979 36.7542359,34.8086519 L54.7004692,3.45756309 C55.9016488,1.36037403 58.0902772,0.18550555 60.3425701,0.18550555 L60.3425701,0.18550555 Z M24.4501035,0.18550555 C25.5453922,0.18550555 26.6562721,0.464089323 27.6762028,1.04924543 C30.787966,2.83790947 31.8637655,6.815539 30.0792116,9.93398493 L12.1329783,41.2850738 C10.3477747,44.4035197 6.37913982,45.4814046 3.26477811,43.6933914 C0.153664582,41.9047274 -0.922784596,37.9270979 0.861769352,34.8086519 L18.8080026,3.45756309 C20.0091822,1.36037403 22.1978106,0.18550555 24.4501035,0.18550555 L24.4501035,0.18550555 Z M24.4371107,0.18550555 C26.6894036,0.18550555 28.878032,1.36037403 30.0792116,3.45756309 L48.0254449,34.8086519 C49.8099988,37.9270979 48.7341993,41.9047274 45.6224361,43.6933914 C42.5067751,45.4820555 38.5394395,44.4028688 36.7542359,41.2850738 L18.8080026,9.93398493 C17.0234487,6.815539 18.0992482,2.83790947 21.2110114,1.04924543 C22.2309421,0.464089323 23.3418221,0.18550555 24.4371107,0.18550555 L24.4371107,0.18550555 Z M60.410782,0 C62.6630749,0 64.8517033,1.17421759 66.0528828,3.27140665 L74.4182637,17.8853386 C76.2028176,21.0037845 75.1270181,24.9814141 72.0152549,26.7700781 C68.8995939,28.5580912 64.9316087,27.4795555 63.1470547,24.3617604 L54.7816739,9.74782848 C52.9971199,6.62938255 54.0729195,2.65175302 57.1846826,0.86308898 C58.2046134,0.277932877 59.3148437,0 60.410782,0 L60.410782,0 Z"
                            id="Stroke-1" stroke="#FFFFFF" stroke-width="3"></path>
                            <path d="M72.1097518,37.7604683 C72.1097518,34.1610098 75.0220763,31.24304 78.6145712,31.24304 C82.207066,31.24304 85.1193905,34.1610098 85.1193905,37.7604683 C85.1193905,41.3599269 82.207066,44.2778966 78.6145712,44.2778966 C75.0220763,44.2778966 72.1097518,41.3599269 72.1097518,37.7604683"
                            id="Fill-2" fill="#FFFFFF"></path>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    </div>

</div>