今天是圣诞节，无意中看到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. python之函数第一篇

    一.为什么用函数: 解决代码重用问题 统一维护 程序的组织结构清晰,可读性强二.定义函数 先定义后使用!! def funcname(arg1,arg2,...): """ ...

  2. 团队——League of Programers简介

    团队名称  League of Programers 团队成员简介 武璧泽:编程能力较强,善于程序思路设计: 邹兰兰:擅长代码的分析.编写与调试: 倪彤炜:擅长解决代码的修正与编写,善于调节团队关系: ...

  3. 安装istio v1.0 详细过程和步骤

      创建 istio 目录 [root@centos-110 ~]# mkdir istio [root@centos-110 ~]# cd istio   方案一: # 去下面的地址下载压缩包  # ...

  4. CSS魔法堂：Transition就这么好玩

    前言  以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画.本文为近期对Tran ...

  5. 08、共享变量（Broadcast Variable和Accumulator）

    共享变量工作原理 Spark一个非常重要的特性就是共享变量.   默认情况下,如果在一个算子的函数中使用到了某个外部的变量,那么这个变量的值会被拷贝到每个task中.此时每个task只能操作自己的那份 ...

  6. Scala编程基础

    Scala与Java的关系... 4 安装Scala. 4 Scala解释器的使用... 4 声明变量... 5 数据类型与操作符... 5 函数调用与apply()函数... 5 if表达式... ...

  7. let's encrypt申请

    let's encrypt申请 https://keelii.com/2016/06/12/free-https-cert-lets-encrypt-apply-install/ https://ww ...

  8. XCode各种问题

    2018.07.10 1.clang: warning: libstdc++ is deprecated; move to libc++ [-Wdeprecated] 2.2018.07.29  海康 ...

  9. html5利用websocket完成的推送功能（tomcat）

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  10. Android研发中对String的思考（源代码分析）

    1.经常使用创建方式思考: String text = "this is a test text "; 上面这一句话实际上是运行了三件事  1.声明变量 String text; ...