今天是圣诞节，无意中看到csdn博客上面给我的头像带了个圣诞帽，比较好奇，想看看csdn是怎么实现的，果然用的是svg实现，不过代码有点冗长。

<html>

<body>

    <svg id="csdnc-memberhead" width="24" height="24" style="display: inline;">

        <path fill="#E40012" d="M.645 18.267l2.008-6.723 2.08-4.238L7.44 2.978l1.177-.993L14.032.406l2.9.293 1.515 1.455 2.24 4.331-1.6.572-1.589-2.271-.864-.412-1.274 1.742 5.634 8.82z"></path>

        <path fill="#EA6362" d="M8.617 1.985L13.356.186 16.961 0l.733.406 1.869 1.666 2.541 4.413-1.509-.106-2.289-4.091L16.592.812l-2.577.146z"></path><path fill="#6E0002" d="M10.354 3.243l3.953 2.076 1.061 2.166 1.7 2.459 1.658 3.031-1.501 1.565 3.987 3.147 2.163.58-1.664-2.633.64-1.489-1.567-2.179-.718-.645-.975-1.52-1.129-.948-1.358-2.87.03-1.609-.734-.336-3.714-1.036z"></path>

        <path fill="#FFF" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

        <defs>

            <path id="a" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

        </defs>

        <clipPath id="b">

            <use xlink:href="#a" overflow="visible"></use>

        </clipPath>

        <path clip-path="url(#b)" fill="#E7E7E8" d="M19.714 1.667l1.721.667L23.066 4.9s3.345 2.231 3.363 2.097c.019-.136-.98-5.429-.98-5.429l-2.914-2.642-2.76 1.33-.061 1.411z"></path>

        <g>

            <defs>

                <path id="c" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

            </defs>

            <clipPath id="d">

                <use xlink:href="#c" overflow="visible"></use>

            </clipPath>

            <path clip-path="url(#d)" fill="#BEBFBF" d="M17.289 3.09l1.686 1.68.286 1.586.831.537 1.575-.387.798-1.219 1.693-2.597 1.454.965s.651 2.423.474 2.64c-.179.218-1.437 2.837-2.119 3.354-.687.518-5.6 1.827-5.6 1.827l-4.93-1.766 3.852-6.62z"></path>

        </g>

        <path fill="#EA6362" d="M8.435 2.301L5.294 7.45l-2.629 4.519-.53 3.708.458 1.563 1.068.935-1.889-.388h-.375l-.752.203s1.685-6.563 1.728-6.664c.042-.102 1.319-3.173 1.395-3.315.075-.14 2.964-4.653 2.964-4.653l1.703-1.057z"></path>

        <g>

            <path fill="#FFF" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            <defs>

                <path id="e" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            </defs>

            <clipPath id="f">

                <use xlink:href="#e" overflow="visible"></use>

            </clipPath>

            <path clip-path="url(#f)" fill="#BEBFBF" d="M1.018 17.24l2.461 4.173 3.975.304 5.279-1.54 4.397.103 3.415-1.289 3.866.774.263 1.948-23.72 3.485-1.182-2.866.203-4.642z"></path>

            <g>

            　　<defs>

                　　<path id="g" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            　　</defs>

            　　<clipPath id="h">

                　　<use xlink:href="#g" overflow="visible"></use>

            　　</clipPath>

            　　<path clip-path="url(#h)" fill="#E7E7E8" d="M20.078 13.428l1.783 1.201.211 1.559.36 1.426-1.887 1.377 3.111.623 2.027-.111-.732-5.403-1.504-.921z"></path>

            </g>

        </g>

    </svg>

</body>

</html>

效果如下：

用svg绘制圣诞帽的更多相关文章

  1. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  2. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  3. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  4. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  5. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  6. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  8. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  9. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

随机推荐

  1. H5C303

    H5C303 1.CSS3 一些js功能可以通过css3实现. 坚持渐进增强原则. 另一侧:优雅降级hack 3.选择器 1)属性选择器:根据指定名称的属性来查找元素 E是元素 li[style]{ ...

  2. poi 升级至4.x 的问题总结(POI Excel 单元格内容类型判断并取值)

    POI Excel 单元格内容类型判断并取值 以前用 cell.getCachedFormulaResultType() 得到 type 升级到4后获取不到了 换为:cell.getCellType( ...

  3. centos7 快速安装 mariadb（mysql）

    从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...

  4. 如何将excel 数据库表结构生成powerdesign物理模型

    Option Explicit Dim mdl ' the current model Set mdl = ActiveModel If (mdl Is Nothing) Then MsgBox &q ...

  5. spring boot使用TestRestTemplate集成测试 RESTful 接口

    这篇文章没什么技术含量,只是单纯的记录一下如何用TestRestTemplate访问受security保护的api,供以后查阅. @Slf4j @RunWith(SpringRunner.class) ...

  6. Eclipse预编译的include路径与宏定义

  7. iOS https请求 NSURLSessionDataTask

    // //  YKSHttpsRequest.m //  YKShareSdkDemo // //  Created by qingyun on 22/05/2017. //  Copyright © ...

  8. angularjs自定义filter

    angular.Module API Overview Methods info([info]); provider(name, providerType); factory(name, provid ...

  9. TRAC-IK机器人运动学求解器

    TRAC-IK和Orocos KDL类似,也是一种基于数值解的机器人运动学求解器,但是在算法层面上进行了很多改进(Specifically, KDL’s convergence algorithms ...

  10. Win10一直弹出 用户账户控制 解决

    目录 问题 解决方法一 将appwiz.cpl加入UAC白名单 解决方法二 问题 自从更新了Windows后,就出现了一个问题,隔一段时间就弹出一次下面的对话框,而且如果时间稍长,会弹出多个. 解决方 ...