前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果
Posted 放羊的牧码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果相关的知识，希望对你有一定的参考价值。
一、前言
- 2022年圣诞节到来啦，很高兴这次我们又能一起度过~ 这个想法也是之前一直想制作一个有交互性的圣诞快乐祝福网页，一直没有时间去实现，正好趁着这次活动来满足下自己的小小的愿望哈~
- 利用前端三剑客绘制一幅《圣诞节快乐》交互祝福效果噢~
二、创意名
- 圣诞节快乐（MerryChristmas）
三、效果展示
四、实现步骤
- 设计图实现（参考很多设计灵感，设计出一个比较可爱风的图）
- 搭建前端框架（试用 html/CSS/JS 最原始的方式来实现）
- 实现小礼物按钮效果（因为想要设计一个交互效果，想到圣诞老人礼物的表达方式）
- 点击交互效果跳转实现（点击后就一个开奖的设计思路效果，不会显得很死板噢）
附加（技术分析）
- jQuery的出现，让各种动画效果变得更加容易。比如，你可以通过jQuery、jQuery.snow.js插件以及少量的代码，就可以让页面中飘舞这雪花。
- 在绘图板中绘制下面这个图形并不算什么难事，但是使用代码来生成这个圣诞树却需要一定的HTML5基础。
- 随着编程技能的进一步掌握，你可以使用稍复杂的技术来实现一些更绚丽的效果。
- 后面预期升级功能小彩蛋：主要使用CSS3实现各种转场效果，并使用了HTML5中的<audio>标签来播放音频文件。同时还使用了StyleFix和PrefixFree脚本，这样在编写代码时可以不用为特定的CSS3属性添加浏览器前缀，也可以在其他浏览器中播放。
五、编码实现
提示：详细展示实现相关创意的代码
- CSS
@import url(http://fonts.googleapis.com/css?family=Lato:400,700|Peralta);
@font-face
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
*, *:after, *:before -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
body
background: #e74c3c;
color: #fff;
font-weight: 400;
font-family: 'Lato', Calibri, Arial, sans-serif;
a
text-decoration: none;
color: #fff;
opacity: 0.7;
outline: none;
a:hover, a:focus
opacity: 1;
outline: none;
/* To Navigation Style */
.codrops-top
position: absolute;
z-index: 200;
top: 0;
left: 0;
width: 100%;
text-transform: uppercase;
font-size: 0.69em;
line-height: 2.2;
font-weight: 700;
.codrops-top a
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 0.1em;
.codrops-top span.right
float: right;
.codrops-top span.right a
display: block;
float: left;
.codrops-icon:before
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
.codrops-icon-drop:before
content: "\\e001";
.codrops-icon-prev:before
content: "\\e004";
@media screen and (max-width: 25em)
.codrops-top
font-size: 120%;
.codrops-icon span
display: none;
- JS
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window )
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className )
return new RegExp("(^|\\\\s+)" + className + "(\\\\s+|$)");
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement )
hasClass = function( elem, c )
return elem.classList.contains( c );
;
addClass = function( elem, c )
elem.classList.add( c );
;
removeClass = function( elem, c )
elem.classList.remove( c );
;
else
hasClass = function( elem, c )
return classReg( c ).test( elem.className );
;
addClass = function( elem, c )
if ( !hasClass( elem, c ) )
elem.className = elem.className + ' ' + c;
;
removeClass = function( elem, c )
elem.className = elem.className.replace( classReg( c ), ' ' );
;
function toggleClass( elem, c )
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
var classie =
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
;
// transport
if ( typeof define === 'function' && define.amd )
// AMD
define( classie );
else
// browser global
window.classie = classie;
)( window );/**
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
(function()
'use strict';
var merrywrap = document.getElementById( 'merrywrap' ),
box = merrywrap.querySelector( '.giftbox' ),
step = 1, stepTimes = [1000,1000,2000,2000];
function init()
box.addEventListener( 'click', runAnimation );
function runAnimation()
if( step === 1 )
box.removeEventListener( 'click', runAnimation );
incStep( step );
if( step === 4 )
letitsnow();
return;
if( step === 3 )
// set different delays for each item
setGridDelays();
setTimeout(function() runAnimation(); , stepTimes[ step - 1 ] );
++step;
function incStep( step )
classie.remove( merrywrap, 'step-' + Number( step - 1 ) );
classie.add( merrywrap, 'step-' + step );
function setGridDelays()
[].slice.call( merrywrap.querySelectorAll( '.row' ) ).forEach( function( row, i )
var itemsrow = [].slice.call( row.querySelectorAll( 'span' ) ),
itemsrowCount = itemsrow.length,
factor = (itemsrowCount - 1) * 0.01,
delays = [ itemsrowCount - 1 ];
for( var k = 0; k < itemsrowCount; ++k )
delays[k] = k * 0.01 + ( ( itemsrowCount - 1 - i ) * factor );
shuffle( itemsrow );
itemsrow.forEach( function( item, j )
var delay = delays[ j ];
item.style.webkitTransition = '-webkit-transform 0.4s ease-out ' + delay + 's, opacity 0.4s ' + delay + 's';
item.style.transition = 'transform 0.4s ease-out ' + delay + 's, opacity 0.4s ' + delay + 's';
);
)
function letitsnow()
// https://github.com/daveWid/canvas-snow
var canvas = document.getElementById("snowfall");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Now the emitter
var emitter = Object.create(rectangleEmitter);
emitter.setCanvas(canvas);
emitter.setBlastZone(0, -10, canvas.width, 1);
emitter.particle = snow;
emitter.runAhead(0);
emitter.start(60);
// http://stackoverflow.com/a/2450976
function shuffle( array )
var currentIndex = array.length
, temporaryValue
, randomIndex
;
// While there remain elements to shuffle...
while (0 !== currentIndex)
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
return array;
init();
)();var snow =
/**
* float The current x position
*/
x: 0,
/**
* float The current y position
*/
y: 0,
/**
* float Alpha
*/
alpha: 0.5,
/**
* float The radius of the circle.
*/
radius: 3,
/**
* Velocity for the particle.
*/
velocity:
x: 0,
y: 5
,
/**
* Draws the particle onto the canvas in context.
*
* @param c The canvas context to draw onto
*/
draw:function(c)
c.fillStyle = 'rgba(255,255,255,'+this.alpha+')';
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
c.fill();
,
/**
* Updates the particle.
*/
update:function()
this.x += this.velocity.x
this.y += this.velocity.y;
,
/**
* Randomizes the settings for the particle
*
* @param zone The blastZone
*/
randomize:function(zone)
// Get a random point inside the blastzone and set the x/y
var s = this.getLocation(zone);
this.x = s.x;
this.y = s.y;
this.alpha = this.randomRange(0.3, 1);
this.radius = this.randomRange(1, 5);
this.velocity =
x: this.randomRange(-0.35, 0.35),
y: this.randomRange(0.75, 1.5)
,
/**
* Adds a random drift type motion to the particle.
* Taken from the Flint particle system....
*/
action:function()
this.velocity.x += (Math.random() - 0.5) * 0.1;
,
/**
* Take a low and high number and gets a random number between them.
*
* @param low The low number
* @param high The high number
* @return Number
*/
randomRange:function(low, high)
return (Math.random() * (high - low)) + low;
,
/**
* Gets a random starting point for the particle.
* Taken from the Flint particle system in AS3
*
* @param zone The zone to get a location from
* @return Object
*/
getLocation:function(z)
var p = ;
p.x = z.x + Math.random() * z.width;
p.y = z.y + Math.random() * z.height;
return p;
;- HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣诞节快乐</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/shake.js"></script>
</head>
<body>
<div class="container">
<h1><span>唐松</span></h1>
<canvas id="snowfall"></canvas>
<div id="merrywrap" class="merrywrap">
<div class="giftbox">
<div class="cover">
<div></div>
</div>
<div class="box"></div>
</div>
<div class="icons">
<div class="row">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M25,12.655c-6.196,0-11.236,5.04-11.236,11.235c0,3.393,1.517,6.431,3.9,8.492c0.376-0.318,0.859-0.522,1.395-0.533
l1.771-3.541c-1.175-1.11-1.913-2.678-1.913-4.418c0-3.354,2.729-6.083,6.084-6.083s6.084,2.729,6.084,6.083
c0,0.653-0.106,1.281-0.297,1.871l0.289,0.254c0.296-0.131,0.619-0.201,0.948-0.201c1.305,0,2.366,1.062,2.366,2.365
c0,1.305-1.062,2.366-2.366,2.366c-1.087,0-2.006-0.737-2.281-1.738l-0.207-0.035l1.538,3.078c0.503,0.01,0.959,0.19,1.324,0.476
c2.347-2.061,3.838-5.074,3.838-8.436C36.236,17.695,31.195,12.655,25,12.655z M16.344,25.201c-0.713,0-1.289-0.576-1.289-1.288
c-0.008-0.713,0.576-1.289,1.28-1.289c0.713-0.008,1.288,0.567,1.296,1.28C17.631,24.617,17.057,25.192,16.344,25.201z
M19.778,18.691c-0.259,0.249-0.583,0.378-0.919,0.378c-0.326,0-0.652-0.12-0.91-0.369c-0.498-0.507-0.508-1.322,0-1.829
c0.498-0.498,1.314-0.498,1.82,0c0.508,0.498,0.508,1.313,0,1.82H19.778z M24.975,16.519c-0.713,0-1.289-0.575-1.289-1.288
c0-0.704,0.576-1.288,1.28-1.288c0.713,0,1.296,0.575,1.296,1.288S25.688,16.519,24.975,16.519z M32.016,18.648
c-0.248,0.258-0.583,0.387-0.918,0.387c-0.326,0-0.653-0.129-0.902-0.378c-0.506-0.498-0.506-1.313-0.008-1.82
c0.497-0.508,1.314-0.508,1.82-0.01C32.515,17.335,32.515,18.15,32.016,18.648z M34.945,23.87c0,0.008,0,0.018,0,0.018
c0,0.713-0.576,1.288-1.289,1.288s-1.287-0.575-1.287-1.288c0,0,0-0.01,0-0.018v-0.009c0-0.713,0.574-1.297,1.287-1.297
c0.705,0,1.289,0.576,1.289,1.279c0,0,0,0,0,0.01C34.945,23.861,34.945,23.861,34.945,23.87z"/>
<path d="M32.024,29.546c0.755,0,1.366-0.612,1.366-1.366s-0.611-1.365-1.366-1.365c-0.408,0-0.771,0.184-1.021,0.468l-5.937-5.212
l-5.163,10.326h10.326l-2.469-4.938l2.921,0.493c-0.013,0.074-0.023,0.149-0.023,0.228C30.658,28.934,31.271,29.546,32.024,29.546z
"/>
<path d="M31.029,32.846H19.104c-0.655,0-1.192,0.505-1.192,1.122v2.245c0,0.617,0.537,1.122,1.192,1.122h11.926
c0.655,0,1.192-0.505,1.192-1.122v-2.245C32.222,33.351,31.685,32.846,31.029,32.846z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M25.016,12.655c-6.196,0-11.236,5.04-11.236,11.235c0,3.799,1.899,7.157,4.794,9.192c1.029-1.544,1.412-4.046,1.617-5.502
c-0.786-1.024-1.259-2.302-1.259-3.69c0-3.354,2.729-6.083,6.084-6.083s6.084,2.729,6.084,6.083c0,1.381-0.468,2.652-1.247,3.675
c0.204,1.457,0.585,3.965,1.609,5.514c2.892-2.035,4.79-5.392,4.79-9.188C36.252,17.695,31.211,12.655,25.016,12.655z
M16.359,25.201c-0.713,0-1.289-0.576-1.289-1.288c-0.008-0.713,0.576-1.289,1.28-1.289c0.713-0.008,1.288,0.567,1.296,1.28
C17.646,24.617,17.072,25.192,16.359,25.201z M19.794,18.691c-0.259,0.249-0.583,0.378-0.919,0.378c-0.326,0-0.652-0.12-0.91-0.369
c-0.498-0.507-0.508-1.322,0-1.829c0.498-0.498,1.314-0.498,1.82,0c0.508,0.498,0.508,1.313,0,1.82H19.794z M24.99,16.519
c-0.713,0-1.289-0.575-1.289-1.288c0-0.704,0.576-1.288,1.28-1.288c0.713,0,1.296,0.575,1.296,1.288S25.703,16.519,24.99,16.519z
M31.113,19.035c-0.326,0-0.653-0.129-0.902-0.378c-0.506-0.498-0.506-1.313-0.008-1.82c0.497-0.508,1.314-0.508,1.82-0.01
c0.507,0.508,0.507,1.323,0.008,1.821C31.783,18.906,31.448,19.035,31.113,19.035z M34.961,23.87c0,0.008,0,0.018,0,0.018
c0,0.713-0.576,1.288-1.289,1.288s-1.287-0.575-1.287-1.288c0,0,0-0.01,0-0.018v-0.009c0-0.713,0.574-1.297,1.287-1.297
c0.705,0,1.289,0.576,1.289,1.279c0,0,0,0,0,0.01C34.961,23.861,34.961,23.861,34.961,23.87z"/>
<path d="M28.801,27.263c-0.227-1.604-0.964-2.557-1.796-3.103v-0.266c0-1.205-0.899-2.186-2.005-2.186s-2.005,0.98-2.005,2.186
v0.295c-0.812,0.551-1.526,1.498-1.75,3.071c-0.269,1.891-0.756,6.104-3.04,7.617c0,0,2.755,0.757,6.816,0.757
c0.274,0,0.541-0.005,0.8-0.011c-0.008,0.063-0.02,0.13-0.02,0.199c0,0.834,0.677,1.511,1.512,1.512
c0.834-0.001,1.511-0.677,1.513-1.512c0-0.144-0.027-0.277-0.064-0.407c1.91-0.223,3.062-0.539,3.062-0.539
C29.558,33.366,29.067,29.151,28.801,27.263z M22.916,29.167c0.002,2.139-1.514,3.882-2.555,4.387
c0.741-0.812,1.654-2.248,1.655-4.387c0-2.137,0.787-3.867,1.467-3.867C24.162,25.3,22.918,27.03,22.916,29.167z M25.021,23.542
c-0.395,0-0.856,0.089-1.32,0.272c0.038-0.781,0.604-1.406,1.299-1.406c0.689,0,1.25,0.614,1.297,1.386
C25.849,23.624,25.403,23.542,25.021,23.542z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M25,12.655c-6.196,0-11.236,5.04-11.236,11.235c0,3.98,2.085,7.475,5.215,9.471c0.254-0.564,0.57-1.133,0.981-1.645
l0.864-2.948c0.037-0.127,0.074-0.24,0.112-0.363c-1.237-1.114-2.021-2.723-2.021-4.515c0-3.354,2.729-6.083,6.084-6.083
c0.004,0,0.008,0.001,0.012,0.001l0.095-0.192l0.1,0.202c3.259,0.109,5.878,2.788,5.878,6.072c0,1.504-0.552,2.88-1.459,3.943
l2.093,2.324l-1.971-0.962c0.708,1.167,0.897,2.043,1.031,2.659l0.19,0.868c0.128,0.152,0.234,0.305,0.343,0.456
c2.97-2.023,4.925-5.432,4.925-9.289C36.236,17.695,31.195,12.655,25,12.655z M16.344,25.201c-0.713,0-1.289-0.576-1.289-1.288
c-0.008-0.713,0.576-1.289,1.28-1.289c0.713-0.008,1.288,0.567,1.296,1.28C17.631,24.617,17.057,25.192,16.344,25.201z
M19.778,18.691c-0.259,0.249-0.583,0.378-0.919,0.378c-0.326,0-0.652-0.12-0.91-0.369c-0.498-0.507-0.508-1.322,0-1.829
c0.498-0.498,1.314-0.498,1.82,0c0.508,0.498,0.508,1.313,0,1.82H19.778z M24.975,16.519c-0.713,0-1.289-0.575-1.289-1.288
c0-0.704,0.576-1.288,1.28-1.288c0.713,0,1.296,0.575,1.296,1.288S25.688,16.519,24.975,16.519z M31.098,19.035
c-0.326,0-0.653-0.129-0.902-0.378c-0.506-0.498-0.506-1.313-0.008-1.82c0.497-0.508,1.314-0.508,1.82-0.01
c0.507,0.508,0.507,1.323,0.008,1.821C31.768,18.906,31.433,19.035,31.098,19.035z M34.945,23.87c0,0.008,0,0.018,0,0.018
c0,0.713-0.576,1.288-1.289,1.288s-1.287-0.575-1.287-1.288c0,0,0-0.01,0-0.018v-0.009c0-0.713,0.574-1.297,1.287-1.297
c0.705,0,1.289,0.576,1.289,1.279c0,0,0,0,0,0.01C34.945,23.861,34.945,23.861,34.945,23.87z"/>
<path d="M27.53,27.002c-1.777-1.974-2.444-5.294-2.444-5.294s-1.678,1.802-3.302,7.342C23.968,26.866,26.924,26.706,27.53,27.002z"
/>
<path d="M29.827,32.188c-0.207-0.941-0.439-2.383-2.743-4.728c-0.985-0.2-3.09,0.426-4.475,1.731
c-0.615,0.58-1.105,1.376-1.385,2.157C23.262,30.457,27.53,30.75,29.827,32.188z"/>
<path d="M29.444,32.657c-1.809-1.202-5.656-1.549-8.396-0.678c-1.358,1.385-1.791,3.613-1.999,4.554
c3.063-2.689,10.512-2.831,11.902-2.075C30.645,33.915,30.149,33.126,29.444,32.657z"/>
<polygon points="25.384,20.432 25.108,19.875 24.834,20.432 24.219,20.521 24.664,20.954 24.56,21.566 25.108,21.277
25.658,21.566 25.554,20.954 25.998,20.521 "/>
<path d="M24.721,35.038c0,0,0.17,1.628-0.367,2.162c0.746,0.294,1.525,0.052,2.152,0.002c-0.486-0.464-0.595-2.164-0.595-2.164
S25.12,34.645,24.721,35.038z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M25,12.655c-6.196,0-11.236,5.04-11.236,11.235c0,3.923,2.023,7.378,5.079,9.389v-4.384l-0.273-0.023v-2.105
c0-0.483,0.234-0.909,0.592-1.182c-0.157-0.538-0.245-1.105-0.245-1.694c0-3.354,2.729-6.083,6.084-6.083s6.084,2.729,6.084,6.083
c0,0.589-0.088,1.156-0.245,1.694c0.357,0.272,0.592,0.698,0.592,1.182v2.105l-0.272,0.021v4.386
c3.055-2.011,5.078-5.465,5.078-9.388C36.236,17.695,31.195,12.655,25,12.655z M16.344,25.201c-0.713,0-1.289-0.576-1.289-1.288
c-0.008-0.713,0.576-1.289,1.28-1.289c0.713-0.008,1.288,0.567,1.296,1.28C17.631,24.617,17.057,25.192,16.344,25.201z
M19.778,18.691c-0.259,0.249-0.583,0.378-0.919,0.378c-0.326,0-0.652-0.12-0.91-0.369c-0.498-0.507-0.508-1.322,0-1.829
c0.498-0.498,1.314-0.498,1.82,0c0.508,0.498,0.508,1.313,0,1.82H19.778z M24.975,16.519c-0.713,0-1.289-0.575-1.289-1.288
c0-0.704,0.576-1.288,1.28-1.288c0.713,0,1.296,0.575,1.296,1.288S25.688,16.519,24.975,16.519z M31.098,19.035
c-0.326,0-0.653-0.129-0.902-0.378c-0.506-0.498-0.506-1.313-0.008-1.82c0.497-0.508,1.314-0.508,1.82-0.01
c0.507,0.508,0.507,1.323,0.008,1.821C31.768,18.906,31.433,19.035,31.098,19.035z M34.945,23.87c0,0.008,0,0.018,0,0.018
c0,0.713-0.576,1.288-1.289,1.288s-1.287-0.575-1.287-1.288c0,0,0-0.01,0-0.018v-0.009c0-0.713,0.574-1.297,1.287-1.297
c0.705,0,1.289,0.576,1.289,1.279c0,0,0,0,0,0.01C34.945,23.861,34.945,23.861,34.945,23.87z"/>
<polygon points="22.167,31.255 20.195,31.98 22.173,28.553 19.843,28.363 19.843,36.618 24.791,37.394 24.791,29.397
22.525,33.325 "/>
<polygon points="29.805,31.98 27.833,31.255 27.475,33.325 25.209,29.397 25.209,37.394 30.158,36.618 30.158,28.363
27.827,28.553 "/>
<path d="M20.749,26.275h-0.404h-0.284c-0.27,0-0.491,0.221-0.491,0.491v0.344v0.344v0.492l1.997,0.153
c-0.164-0.191-0.236-0.409-0.236-0.609v-1.215H20.749z"/>
<polygon points="22.85,31.496 24.755,28.194 23.109,28.194 21.615,30.783 22.66,30.399 "/>
<polygon points="27.15,31.496 27.34,30.399 28.385,30.783 26.891,28.194 25.245,28.194 "/>
<path d="M28.037,27.49v-1.696c0-0.208-0.253-0.599-1.1-0.51C26.103,25.371,25,26.304,25,26.304s-1.108-0.896-1.938-1.02
c-0.867-0.129-1.1,0.302-1.1,0.51v1.696c0,0.208,0.261,0.51,1.1,0.51C23.9,28,25,28,25,28s1.098,0,1.938,0
C27.776,28,28.037,27.698,28.037,27.49z M23.062,26.304c-0.605,0-0.821-0.18-0.821-0.334c0-0.153,0.217-0.41,0.821-0.333
c0.383,0.049,0.956,0.343,1.377,0.667H23.062z M25,27.541c-0.216,0-0.39-0.175-0.39-0.391c0-0.215,0.174-0.39,0.39-0.39
s0.39,0.175,0.39,0.39C25.39,27.366,25.216,27.541,25,27.541z M26.938,25.637c0.614-0.087,0.821,0.18,0.821,0.333
c0,0.154-0.216,0.334-0.821,0.334H25.56C25.98,25.979,26.554,25.691,26.938,25.637z"/>
<path d="M29.939,26.275h-0.392h-0.297H28.67v1.215c0,0.2-0.072,0.418-0.236,0.609l1.997-0.153v-0.492V27.11v-0.344
C30.431,26.496,30.209,26.275,29.939,26.275z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<polygon points="24.148,14.308 25.084,14.086 25.798,14.731 25.875,13.774 26.709,13.293 25.821,12.923 25.623,11.982
24.998,12.712 24.041,12.609 24.541,13.432 "/>
<polygon points="25.851,29.822 24.915,30.044 24.201,29.398 24.124,30.355 23.29,30.837 24.178,31.207 24.376,32.147
25.001,31.418 25.958,31.521 25.458,30.698 "/>
<polygon points="20.384,15.772 21.083,15.112 22.025,15.314 21.613,14.447 22.095,13.613 21.141,13.736 20.5,13.021 20.322,13.966
19.443,14.355 20.287,14.818 "/>
<polygon points="29.617,28.357 28.917,29.017 27.975,28.815 28.387,29.683 27.906,30.517 28.859,30.393 29.501,31.108
29.678,30.164 30.558,29.774 29.714,29.312 "/>
<polygon points="17.294,18.146 17.856,18.924 18.131,18.002 19.047,17.707 18.257,17.162 18.258,16.198 17.494,16.781
16.581,16.483 16.899,17.391 16.333,18.167 "/>
<polygon points="32.706,25.984 32.144,25.206 31.868,26.127 30.952,26.424 31.742,26.969 31.743,27.932 32.505,27.348
33.42,27.646 33.1,26.74 33.668,25.963 "/>
<path d="M25.897,20.631l5.922,1.664l0.313-0.971l-7.072-0.949l5.959-1.52l-0.214-0.998l-6.6,2.715l4.403-4.298l-0.685-0.757
l-4.361,5.654l1.665-5.928l-0.97-0.312l-0.951,7.073l-1.52-5.962l-0.996,0.215l2.714,6.604l-4.299-4.406l-0.756,0.685l5.651,4.361
l-5.925-1.666l-0.312,0.971l7.076,0.952l-5.965,1.52l0.215,0.997l6.603-2.714l-4.405,4.298l0.686,0.756l4.358-5.647l-1.663,5.919
l0.97,0.312l0.951-7.076l1.521,5.964l0.996-0.213l-2.714-6.602l4.297,4.402l0.757-0.684L25.897,20.631z M26.681,22.084
l-0.237,0.843l-0.621,0.606l-0.843,0.215l-0.839-0.236l-0.607-0.622l-0.215-0.846l0.234-0.835l0.624-0.608l0.845-0.216l0.837,0.235
l0.607,0.622L26.681,22.084z"/>
<polygon points="16.368,22.524 17.243,22.917 17.02,21.98 17.666,21.268 16.709,21.19 16.228,20.355 15.857,21.242 14.917,21.441
15.647,22.067 15.544,23.023 "/>
<polygon points="34.352,22.064 34.456,21.106 33.633,21.606 32.757,21.213 32.979,22.148 32.333,22.864 33.29,22.941
33.772,23.774 34.141,22.887 35.083,22.688 "/>
<polygon points="18.248,25.043 17.383,25.453 16.548,24.971 16.67,25.924 15.955,26.566 16.9,26.744 17.289,27.623 17.753,26.779
18.707,26.682 18.046,25.982 "/>
<polygon points="31.75,19.091 32.616,18.68 33.451,19.16 33.326,18.207 34.043,17.564 33.098,17.389 32.709,16.508 32.246,17.352
31.291,17.449 31.951,18.148 "/>
<polygon points="20.937,28.935 20.642,28.02 20.098,28.808 19.134,28.807 19.716,29.571 19.418,30.485 20.325,30.167
21.102,30.733 21.081,29.771 21.858,29.209 "/>
<polygon points="29.062,15.197 29.358,16.114 29.903,15.325 30.866,15.323 30.282,14.561 30.581,13.646 29.675,13.966
28.897,13.397 28.919,14.359 28.141,14.922 "/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M23.629,15.317c0.148,0.145,0.241,0.43,0.206,0.634l-0.133,0.773c-0.035,0.204,0.086,0.292,0.269,0.195l0.695-0.364
c0.184-0.097,0.482-0.097,0.666,0l0.695,0.364c0.183,0.097,0.304,0.009,0.27-0.195l-0.133-0.773
c-0.035-0.204,0.058-0.489,0.206-0.634l0.562-0.549c0.148-0.144,0.102-0.286-0.103-0.316l-0.777-0.112
c-0.205-0.03-0.447-0.207-0.539-0.392l-0.347-0.704c-0.092-0.186-0.241-0.186-0.333,0l-0.347,0.704
c-0.092,0.185-0.334,0.361-0.539,0.392l-0.777,0.112c-0.205,0.03-0.251,0.173-0.103,0.316L23.629,15.317z"/>
<path d="M20.333,19.556l0.695,0.364c0.183,0.097,0.304,0.009,0.27-0.195l-0.133-0.773c-0.035-0.204,0.058-0.489,0.206-0.634
l0.562-0.549c0.148-0.144,0.102-0.286-0.103-0.316l-0.777-0.112c-0.205-0.03-0.447-0.207-0.539-0.392l-0.348-0.704
c-0.091-0.186-0.241-0.186-0.333,0l-0.348,0.704c-0.091,0.185-0.334,0.361-0.539,0.392l-0.777,0.112
c-0.205,0.03-0.251,0.173-0.103,0.316l0.562,0.549c0.148,0.145,0.241,0.43,0.206,0.634l-0.133,0.773
c-0.035,0.204,0.086,0.292,0.27,0.195l0.695-0.364C19.851,19.459,20.15,19.459,20.333,19.556z"/>
<path d="M31.83,17.452l-0.777-0.112c-0.205-0.03-0.448-0.207-0.539-0.392l-0.348-0.704c-0.091-0.186-0.241-0.186-0.333,0
l-0.348,0.704c-0.091,0.185-0.334,0.361-0.539,0.392l-0.777,0.112c-0.205,0.03-0.251,0.173-0.103,0.316l0.562,0.549
c0.148,0.145,0.241,0.43,0.206,0.634l-0.132,0.773c-0.035,0.204,0.086,0.292,0.269,0.195l0.695-0.364
c0.183-0.097,0.482-0.097,0.666,0l0.695,0.364c0.184,0.097,0.305,0.009,0.27-0.195l-0.133-0.773
c-0.035-0.204,0.058-0.489,0.206-0.634l0.562-0.549C32.081,17.625,32.035,17.482,31.83,17.452z"/>
<path d="M30.183,20.938c-0.4-0.102-0.81,0.143-0.91,0.545l-1.857,7.392H25.75V18.666c0-0.414-0.336-0.75-0.75-0.75
s-0.75,0.336-0.75,0.75v10.209h-1.665l-1.857-7.392c-0.101-0.402-0.511-0.646-0.91-0.545c-0.402,0.102-0.646,0.509-0.545,0.91
l2,7.959c0.084,0.334,0.384,0.567,0.728,0.567h6c0.344,0,0.644-0.233,0.728-0.567l2-7.959
C30.828,21.447,30.584,21.04,30.183,20.938z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M35.167,24.999c0,5.615-20.333,5.615-20.333,0c0-5.614,4.552-10.166,10.166-10.166
C30.615,14.833,35.167,19.385,35.167,24.999z"/>
<path d="M32.967,32.224l-0.277-3.278c-2.1,0.859-4.899,1.266-7.688,1.266s-5.59-0.406-7.689-1.266l-0.277,3.278
c-0.134,1.092,0.658,1.985,1.758,1.985h4.014v-0.974c0-1.211,0.982-2.193,2.193-2.193c1.212,0,2.194,0.982,2.194,2.193v0.974h4.016
C32.309,34.209,33.101,33.315,32.967,32.224z"/>
<circle cx="25.959" cy="33" r="0.5"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<circle cx="14.31" cy="19.969" r="0.88"/>
<circle cx="16.07" cy="18.209" r="0.88"/>
<circle cx="17.831" cy="16.448" r="0.88"/>
<circle cx="19.592" cy="14.687" r="0.88"/>
<circle cx="16.574" cy="21.73" r="0.88"/>
<circle cx="18.334" cy="19.969" r="0.88"/>
<circle cx="20.095" cy="18.209" r="0.88"/>
<circle cx="21.856" cy="16.448" r="0.88"/>
<circle cx="23.617" cy="14.687" r="0.88"/>
<circle cx="35.69" cy="19.969" r="0.88"/>
<circle cx="33.93" cy="18.208" r="0.88"/>
<circle cx="32.169" cy="16.448" r="0.88"/>
<circle cx="30.408" cy="14.687" r="0.88"/>
<circle cx="33.426" cy="21.73" r="0.88"/>
<circle cx="31.666" cy="19.97" r="0.88"/>
<circle cx="29.905" cy="18.208" r="0.88"/>
<circle cx="28.144" cy="16.448" r="0.88"/>
<circle cx="26.383" cy="14.687" r="0.88"/>
<path d="M26.61,18.217c-0.885-1.181-2.334-1.181-3.22,0l-6.841,7.781c-0.886,1.181-0.403,2.146,1.073,2.146h0.671v5.366
c0,1.475,1.207,2.683,2.683,2.683h8.049c1.476,0,2.683-1.208,2.683-2.683v-5.366h0.671c1.476,0,1.958-0.966,1.073-2.146
L26.61,18.217z M24.37,33.458h-3.497c-0.558,0-0.783-0.54-0.396-0.946c0.81-0.864,1.576-1.424,2.45-2.217
c0.831-0.648,0.82-1.945-0.396-1.945c-0.388,0-0.794,0.233-1.027,0.604c-0.362,0.567-1.308,0.188-0.946-0.622
c0.405-0.793,1.19-1.108,1.973-1.108c2.135,0,2.982,2.198,1.271,3.864c-0.658,0.56-1.108,0.883-1.749,1.262
c0.397,0,0.874-0.054,1.271-0.054h1.045C25.063,32.296,25.153,33.458,24.37,33.458z M27.256,33.494
c-0.765,0-1.423-0.297-1.811-0.946c-0.343-0.621,0.549-1.226,0.946-0.621c0.251,0.315,0.577,0.46,0.865,0.46
c0.648,0,1.271-0.235,1.271-1.019c0-0.641-0.623-0.866-1.189-0.866c-0.307,0-0.695,0.082-1.1,0.163
c-0.478,0.135-0.856-0.163-0.792-0.64l0.071-2.136c0-0.469,0.317-0.63,0.722-0.63h2.614c0.756,0,0.739,1.135,0,1.135h-2.209
l-0.054,1.09c1.414-0.377,3.127,0.226,3.127,1.884C29.716,32.792,28.608,33.494,27.256,33.494z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M32.164,22.323c-0.107-0.722-0.884-1.646-2.123-2.414c-0.009-1.107-1.463-2.841-3.467-3.495
c-0.876-1.124-2.272-1.124-3.148,0c-2.004,0.654-3.458,2.388-3.467,3.495c-1.24,0.768-2.016,1.692-2.123,2.414
c-1.373,0.907-2.201,1.937-2.201,2.712c0,0.46,0.295,0.782,0.818,1.011c0.257,0.208,0.646,0.334,1.168,0.334h0.107
c0.179,0.027,0.367,0.05,0.564,0.07v5.296c0,1.475,1.207,2.683,2.683,2.683h8.049c1.476,0,2.683-1.208,2.683-2.683V26.45
c0.197-0.021,0.386-0.043,0.564-0.07h0.107c0.521,0,0.911-0.126,1.168-0.334c0.523-0.229,0.818-0.551,0.818-1.011
C34.365,24.26,33.537,23.23,32.164,22.323z M24.369,31.693h-3.496c-0.559,0-0.783-0.54-0.396-0.946
c0.81-0.864,1.576-1.424,2.45-2.217c0.83-0.648,0.82-1.945-0.396-1.945c-0.387,0-0.793,0.233-1.026,0.604
c-0.362,0.567-1.308,0.188-0.946-0.623c0.405-0.792,1.189-1.107,1.973-1.107c2.136,0,2.982,2.198,1.271,3.864
c-0.658,0.56-1.108,0.883-1.749,1.262c0.397,0,0.874-0.054,1.271-0.054h1.045C25.062,30.531,25.153,31.693,24.369,31.693z
M27.256,31.729c-0.766,0-1.423-0.297-1.811-0.946c-0.344-0.621,0.549-1.226,0.945-0.621c0.252,0.315,0.577,0.459,0.865,0.459
c0.648,0,1.271-0.234,1.271-1.018c0-0.641-0.623-0.866-1.189-0.866c-0.307,0-0.695,0.082-1.1,0.163
c-0.479,0.135-0.857-0.163-0.793-0.64l0.07-2.136c0-0.469,0.317-0.63,0.723-0.63h2.613c0.756,0,0.738,1.135,0,1.135h-2.209
l-0.054,1.09c1.414-0.377,3.128,0.226,3.128,1.884C29.717,31.027,28.607,31.729,27.256,31.729z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M29.76,21.379h-3.925c-0.059,0.478-0.335,0.93-0.793,1.193l-7.87,4.543c-0.247,0.143-0.528,0.219-0.812,0.219
c-0.075,0-0.146-0.018-0.221-0.028v4.289c0,1.873,1.532,3.405,3.405,3.405H29.76c1.873,0,3.406-1.532,3.406-3.405v-6.811
C33.166,22.911,31.633,21.379,29.76,21.379z M24.019,32.92h-3.515c-0.561,0-0.787-0.543-0.397-0.951
c0.813-0.869,1.584-1.431,2.463-2.228c0.834-0.652,0.823-1.956-0.398-1.956c-0.39,0-0.798,0.234-1.032,0.607
c-0.363,0.57-1.314,0.189-0.951-0.626c0.407-0.797,1.196-1.114,1.983-1.114c2.146,0,2.997,2.21,1.277,3.886
c-0.661,0.562-1.114,0.887-1.758,1.269c0.399,0,0.879-0.055,1.277-0.055h1.051C24.715,31.752,24.807,32.92,24.019,32.92z
M26.92,32.957c-0.77,0-1.431-0.3-1.82-0.953c-0.345-0.623,0.552-1.23,0.951-0.623c0.253,0.316,0.579,0.462,0.869,0.462
c0.652,0,1.277-0.236,1.277-1.023c0-0.644-0.625-0.87-1.196-0.87c-0.308,0-0.697,0.081-1.104,0.163
c-0.48,0.136-0.861-0.163-0.797-0.643l0.071-2.146c0-0.472,0.318-0.634,0.726-0.634h2.627c0.761,0,0.743,1.141,0,1.141h-2.22
l-0.054,1.096c1.42-0.379,3.143,0.227,3.143,1.894C29.393,32.251,28.279,32.957,26.92,32.957z"/>
<path d="M22.292,19.027l-3.511-2.318h0.001l2.132-0.793c0.021,0.055,0.025,0.111,0.056,0.164c0.286,0.498,0.924,0.669,1.421,0.382
c0.498-0.288,0.669-0.926,0.381-1.422c-0.286-0.499-0.923-0.668-1.421-0.381c-0.271,0.155-0.433,0.415-0.49,0.699l-5.909-1.18
l0.525,8.783L22.292,19.027z"/>
<path d="M16.832,26.525l7.869-4.544c0.434-0.25,0.596-0.788,0.36-1.195l-0.854-1.48c-0.236-0.408-0.783-0.537-1.216-0.287
l-7.87,4.544c-0.434,0.25-0.596,0.788-0.359,1.195l0.854,1.481C15.852,26.646,16.398,26.775,16.832,26.525z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M32,23.876c0-2.02-1.343-3.655-3-3.655c-0.02,0-0.037,0.007-0.057,0.007C28.97,20.441,29,20.654,29,20.876
c0,0.548-0.088,1.107-0.238,1.651l0.062-0.009l0.296-0.6l0.296,0.6l0.662,0.096l-0.479,0.467l0.113,0.659l-0.592-0.311
l-0.592,0.311l0.113-0.659l-0.039-0.038c-0.189,0.52-0.443,1.008-0.748,1.443l0.16,0.324l0.662,0.096l-0.479,0.467l0.113,0.659
l-0.592-0.311l-0.592,0.311l0.113-0.659l-0.09-0.088c-0.234,0.217-0.48,0.413-0.748,0.559c0.478,1.214,1.343,2.207,2.355,2.349
l-3.637,6.565V25.2c1.601-0.111,2.88-2.354,2.88-4.324c0-2.02-1.343-3.655-3-3.655c-1.656,0-3,1.636-3,3.655
c0,1.97,1.28,4.213,2.88,4.324v9.558l-3.637-6.565c1.014-0.142,1.878-1.135,2.355-2.349c-0.268-0.146-0.514-0.342-0.748-0.559
l-0.09,0.088l0.113,0.659l-0.592-0.311l-0.592,0.311l0.113-0.659l-0.479-0.467l0.662-0.096l0.16-0.324
c-0.305-0.436-0.559-0.924-0.748-1.443l-0.039,0.038l0.113,0.659l-0.592-0.311l-0.592,0.311l0.113-0.659l-0.479-0.467l0.662-0.096
l0.296-0.6l0.296,0.6l0.062,0.009C21.088,21.983,21,21.424,21,20.876c0-0.222,0.03-0.435,0.057-0.648
c-0.02,0-0.037-0.007-0.057-0.007c-1.656,0-3,1.636-3,3.655c0,2.013,1.336,4.327,2.984,4.342l3.911,7.061
c0.002,0.004,0.008,0.003,0.011,0.007c0.008,0.011,0.016,0.02,0.026,0.027c0.005,0.004,0.005,0.01,0.01,0.013
c0.017,0.009,0.034,0.013,0.052,0.013c0.002,0.001,0.004,0.003,0.006,0.003s0.004-0.002,0.006-0.003
c0.018,0,0.035-0.004,0.052-0.013c0.005-0.003,0.005-0.009,0.01-0.013c0.011-0.008,0.019-0.017,0.026-0.027
c0.003-0.004,0.009-0.003,0.011-0.007l3.911-7.061C30.665,28.203,32,25.889,32,23.876z M20.071,26.032l-0.592-0.311l-0.592,0.311
l0.113-0.659l-0.479-0.467l0.662-0.096l0.296-0.6l0.296,0.6l0.662,0.096l-0.479,0.467L20.071,26.032z M26.401,21.008l0.296,0.6
l0.662,0.096L26.88,22.17l0.113,0.659l-0.592-0.311l-0.592,0.311l0.113-0.659l-0.479-0.467l0.662-0.096L26.401,21.008z
M24.704,19.315l0.296-0.6l0.296,0.6l0.662,0.096l-0.479,0.467l0.113,0.659L25,20.227l-0.592,0.311l0.113-0.659l-0.479-0.467
L24.704,19.315z M24.19,22.829l-0.592-0.311l-0.592,0.311l0.113-0.659l-0.479-0.467l0.662-0.096l0.296-0.6l0.296,0.6l0.662,0.096
l-0.479,0.467L24.19,22.829z M29.929,26.032l0.113-0.659l-0.479-0.467l0.662-0.096l0.296-0.6l0.296,0.6l0.662,0.096l-0.479,0.467
l0.113,0.659l-0.592-0.311L29.929,26.032z"/>
</svg>
</span>
</div>
<div class="row">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M34.43,17.173c1.191-1.191,1.395-2.925,0.455-3.865c-0.94-0.94-2.674-0.736-3.865,0.455
c-0.121,0.121-0.223,0.25-0.324,0.381c-1.802-0.732-4.277-0.77-6.985,1.263c-2.597,1.95-8.254,6.437-12.821,5.508
c0,0,2.406,4.225,7.294,9.113c0.329,0.328,0.653,0.644,0.974,0.949c-0.09,0.068-0.181,0.133-0.264,0.215
c-1.005,1.005-1.005,2.633,0,3.638c1.005,1.004,2.633,1.004,3.638,0c0.17-0.17,0.301-0.363,0.414-0.563
c2.567,2.03,4.333,3.036,4.333,3.036c-0.91-4.547,3.574-10.207,5.526-12.802c2.047-2.72,1.998-5.207,1.255-7.012
C34.187,17.391,34.313,17.291,34.43,17.173z M31.702,14.444c0.801-0.801,1.946-1.009,2.501-0.455c0.554,0.554,0.347,1.7-0.455,2.5
c-0.043,0.043-0.096,0.066-0.141,0.106c-0.266-0.436-0.566-0.814-0.872-1.12c-0.311-0.311-0.697-0.615-1.143-0.885
C31.633,14.544,31.657,14.49,31.702,14.444z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M11.329,26.418c-0.826,0.825,0.917,3.903,3.889,6.875c2.973,2.973,6.051,4.715,6.876,3.89
c0.825-0.825-0.916-3.904-3.889-6.876C15.232,27.334,12.153,25.593,11.329,26.418z M21.453,36.02
c-0.495,0.495-2.902-1.111-5.376-3.584c-2.475-2.475-4.08-4.881-3.584-5.377c0.495-0.494,2.902,1.11,5.376,3.584
c0.326,0.327,0.637,0.651,0.93,0.971c-0.079,0.031-0.162,0.077-0.253,0.154c-0.626,0.525-0.708,1.457-0.183,2.083
c0.525,0.627,1.457,0.708,2.083,0.183c0.075-0.063,0.131-0.124,0.174-0.184C21.375,34.933,21.718,35.753,21.453,36.02z"/>
<path d="M36.766,25.211c-1.669-0.508-3.322-1.804-4.216-2.475c-1.294-0.971-2.475-0.953-3.336-0.604
c-0.048-0.062-0.097-0.124-0.155-0.182c-0.033-0.033-0.068-0.058-0.103-0.087c0.007-0.017,0.013-0.032,0.019-0.049
c3.34-0.285,4.913-0.583,5.555-3.323c0.179-0.764,0.507-1.253,0.878-1.309c0.203-0.029,0.416,0.088,0.545,0.312
c0.186,0.317,0.212,0.876-0.269,1.493l0.666,0.519c0.741-0.949,0.657-1.882,0.333-2.438c-0.305-0.521-0.856-0.805-1.401-0.721
c-0.348,0.053-1.199,0.348-1.574,1.952c-0.467,1.995-1.291,2.342-4.292,2.627c0.376-0.688,0.876-1.501,1.368-2.298
c1.961-3.186,3.024-5.021,2.058-5.685c-1.05-0.721-3.452,0.469-5.075,1.986c-0.802,0.75-1.391,1.541-1.784,2.337
c-0.675-0.481-1.346-0.73-1.872-0.777c-0.726-0.062-1.299,0.213-1.537,0.746c-0.316,0.704,0.005,1.688,0.883,2.846
c-5.893-2.717-7.828-1.621-8.302-1.174c-0.448,0.423-0.559,1.016-0.297,1.588c0.334,0.73,1.287,1.403,2.713,1.403
c0.157,0,0.32-0.008,0.489-0.025l-0.086-0.841c-1.218,0.127-2.103-0.353-2.347-0.888c-0.11-0.241-0.074-0.45,0.108-0.622
c0.653-0.616,3.268-0.834,8.93,2.09c-0.012,0.012-0.027,0.021-0.039,0.033c-0.08,0.08-0.147,0.164-0.213,0.25
c-1.184-0.48-2.81-0.506-4.588,0.83c-1.229,0.923-3.502,2.705-5.799,3.404c1.446,0.708,3.149,1.953,4.776,3.58
c1.632,1.632,2.879,3.339,3.587,4.789c0.702-2.293,2.484-4.569,3.41-5.798c1.344-1.788,1.312-3.421,0.825-4.606
c0.083-0.064,0.166-0.13,0.243-0.208c0.159-0.158,0.283-0.333,0.387-0.514c0.053,0.072,0.112,0.143,0.178,0.208
c0.056,0.056,0.117,0.104,0.177,0.15c-0.354,0.862-0.377,2.05,0.6,3.349c0.673,0.894,1.969,2.548,2.479,4.216
c0.515-1.054,1.421-2.295,2.607-3.481C34.477,26.631,35.715,25.726,36.766,25.211z M27.165,21.346
c-0.128-0.128-0.283-0.217-0.449-0.281c-0.462-0.799-0.526-1.591-0.375-2.325c0.576,0.653,1.095,1.548,1.423,2.73
c-0.143,0.022-0.278,0.068-0.396,0.145C27.312,21.518,27.246,21.427,27.165,21.346z M28.344,15.547
c1.669-1.561,3.557-2.224,3.999-1.93c0.226,0.501-1.404,3.146-2.279,4.568c-0.613,0.995-1.198,1.948-1.595,2.726
c-0.436-1.365-1.099-2.388-1.827-3.093C27.098,16.815,27.863,15.997,28.344,15.547z M23.345,17.581
c0.117-0.262,0.484-0.267,0.691-0.251c0.438,0.04,1.027,0.287,1.621,0.754c-0.313,1.01-0.281,2.007,0.108,2.928
c-0.085,0.019-0.17,0.042-0.255,0.073C23.447,19.129,23.174,17.962,23.345,17.581z M26.418,23.437
c-0.028,0.028-0.062,0.043-0.093,0.069c-0.175-0.287-0.372-0.535-0.572-0.735c-0.205-0.205-0.458-0.404-0.75-0.581
c0.027-0.032,0.042-0.067,0.072-0.097c0.525-0.526,1.278-0.663,1.642-0.299C27.082,22.158,26.945,22.911,26.418,23.437z
M27.756,23.254c-0.129-0.129-0.212-0.277-0.274-0.425c0.067-0.254,0.08-0.505,0.042-0.742c0.007-0.008,0.008-0.02,0.015-0.028
c0.264-0.264,0.812-0.165,1.194,0.218c0.022,0.021,0.033,0.048,0.053,0.071c-0.213,0.128-0.397,0.273-0.546,0.422
c-0.146,0.146-0.289,0.326-0.417,0.534C27.802,23.286,27.777,23.275,27.756,23.254z"/>
<path d="M38.728,25.421c-0.6-0.599-2.838,0.666-5,2.828c-2.162,2.161-3.427,4.4-2.828,4.999c0.6,0.601,2.838-0.666,4.999-2.828
C38.061,28.259,39.327,26.021,38.728,25.421z M35.275,29.796c-1.799,1.798-3.549,2.966-3.909,2.606
c-0.192-0.193,0.063-0.791,0.609-1.575c0.031,0.042,0.07,0.086,0.124,0.131c0.455,0.382,1.132,0.322,1.514-0.133
c0.381-0.456,0.323-1.133-0.133-1.515c-0.066-0.055-0.126-0.089-0.184-0.112c0.213-0.232,0.438-0.468,0.675-0.706
c1.799-1.799,3.549-2.965,3.909-2.606C38.241,26.247,37.074,27.997,35.275,29.796z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M35.481,14.528c-1.655-1.654-5.282-3.191-9.434-0.074c-2.715,2.038-8.629,6.729-13.404,5.758c0,0,2.515,4.418,7.625,9.528
c0.344,0.343,0.683,0.673,1.02,0.993c-0.094,0.072-0.19,0.139-0.277,0.225c-1.05,1.05-1.05,2.752,0,3.803
c1.052,1.051,2.753,1.051,3.804,0c0.178-0.178,0.315-0.38,0.432-0.589c2.684,2.122,4.53,3.174,4.53,3.174
c-0.952-4.754,3.736-10.671,5.777-13.384C38.676,19.813,37.136,16.182,35.481,14.528z M25.754,18.957
c-2.688,2.688-6.789,2.977-8.733,2.304c1.953-0.09,4.912-0.748,7.601-3.437c2.688-2.688,5.856-3.877,6.711-3.022
C32.188,15.657,28.442,16.269,25.754,18.957z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M17.112,20.996c0.525-0.374,1.001-0.731,1.399-1.031l0.303-0.229c1.35-1.013,2.756-1.527,4.182-1.527
c2.165,0,3.567,1.167,4.071,1.672c0,0,0,0,0,0c0.401-0.401,1.521-1.333,3.246-1.333c1.129,0,2.24,0.404,3.301,1.201l0.229,0.173
c0.468,0.353,1.083,0.812,1.763,1.262c0.284-0.28,0.407-0.581,0.407-0.84l0.992-5.9c0-0.725-0.88-2.082-3.827-1.773
c-2.903,0.305-6.74,3.545-6.74,3.545s-3.857-3.115-6.74-3.545c-3.018-0.45-3.828,1.048-3.828,1.773l0.992,5.9
C16.863,20.546,16.945,20.773,17.112,20.996z M33.179,13.898c2.136-0.304,2.855,0.624,2.855,1.159c0,0.535-0.749,1.159-2.855,1.159
h-4.792C29.847,15.089,31.846,14.087,33.179,13.898z M19.699,13.898c1.332,0.169,3.326,1.191,4.792,2.318h-4.792
c-2.107,0-2.855-0.624-2.855-1.159C16.844,14.522,17.598,13.629,19.699,13.898z"/>
<path d="M35.667,29.602c0.187-0.178,0.375-0.362,0.567-0.553c2.845-2.844,4.245-5.303,4.245-5.303
c-2.657,0.541-5.949-2.071-7.461-3.205c-2.311-1.735-4.329-0.879-5.251,0.042c-0.02,0.02-0.04,0.043-0.06,0.065
c1.042,1.497,1.438,3.603,0.489,5.808c1.252,1.676,3.212,4.501,2.746,6.827c0,0,1.028-0.586,2.521-1.767
c0.066,0.117,0.142,0.229,0.242,0.328c0.584,0.585,1.531,0.585,2.117,0c0.584-0.585,0.584-1.532,0-2.117
C35.773,29.679,35.719,29.642,35.667,29.602z M33.181,23.047c-1.496-1.496-3.581-1.837-3.105-2.313
c0.476-0.476,2.239,0.187,3.735,1.683c1.497,1.496,3.143,1.862,4.229,1.912C36.96,24.704,34.677,24.543,33.181,23.047z"/>
<path d="M19.409,20.53c-2.003,1.503-6.365,4.963-9.887,4.247c0,0,1.856,3.258,5.625,7.028c0.253,0.253,0.503,0.496,0.751,0.732
c-0.07,0.053-0.14,0.103-0.204,0.166c-0.775,0.774-0.775,2.03,0,2.806c0.776,0.774,2.031,0.774,2.805,0
c0.132-0.131,0.233-0.28,0.319-0.435c1.979,1.565,3.341,2.341,3.341,2.341c-0.702-3.507,2.755-7.872,4.261-9.872
c2.302-3.061,1.166-5.739-0.054-6.959C25.147,19.364,22.471,18.23,19.409,20.53z M19.193,23.851
c-1.984,1.983-5.007,2.195-6.441,1.699c1.441-0.067,3.623-0.552,5.605-2.535c1.982-1.982,4.32-2.86,4.951-2.229
C23.938,21.417,21.176,21.868,19.193,23.851z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<polygon points="11.548,34.603 15.7,33.076 16.454,37.435 24.028,24.312 17.488,24.312 "/>
<polygon points="32.512,24.312 25.972,24.312 33.546,37.435 34.301,33.076 38.452,34.603 "/>
<path d="M37.071,21.512v-6.741c0-0.828-1.004-2.379-4.371-2.026c-3.317,0.348-7.7,4.051-7.7,4.051s-4.407-3.559-7.7-4.051
c-3.447-0.513-4.371,1.198-4.371,2.026v6.741c0,0.827,1.035,2.024,4.371,2.024c3.33,0,7.7,0,7.7,0s4.366,0,7.7,0
C36.036,23.536,37.071,22.339,37.071,21.512z M17.3,16.796c-2.407,0-3.263-0.713-3.263-1.324c0-0.612,0.861-1.631,3.263-1.325
c1.522,0.194,3.8,1.361,5.473,2.649H17.3z M25,21.715c-0.855,0-1.549-0.695-1.549-1.551s0.694-1.549,1.549-1.549
s1.55,0.693,1.55,1.549S25.855,21.715,25,21.715z M32.7,14.147c2.44-0.347,3.262,0.713,3.262,1.325
c0,0.611-0.855,1.324-3.262,1.324h-5.475C28.896,15.508,31.178,14.363,32.7,14.147z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M29.904,19.676c-0.97,0.138-2.423,0.867-3.487,1.687h3.487c1.532,0,2.077-0.454,2.077-0.843
C31.981,20.13,31.458,19.455,29.904,19.676z"/>
<path d="M18.019,20.52c0,0.389,0.545,0.843,2.077,0.843h3.486c-1.066-0.82-2.517-1.563-3.486-1.687
C18.567,19.48,18.019,20.13,18.019,20.52z"/>
<circle cx="25" cy="23.508" r="0.987"/>
<path d="M36.34,12.656h-9.842v7.02c-0.645,0.407-1.186,0.808-1.505,1.058c-0.318-0.24-0.854-0.624-1.49-1.019v-7.059H13.66
c-0.55,0-1,0.45-1,1v9.842h4.158v0.869c0,0.769,0.768,1.647,2.841,1.76l-0.211,0.367l-6.788,0v9.842c0,0.55,0.45,1,1,1h9.842V28.66
l1.449-2.51h0.098l1.448,2.509v8.677h9.843c0.55,0,1-0.45,1-1v-9.841l-6.788,0l-0.211-0.367c2.073-0.113,2.841-0.992,2.841-1.76
v-0.868h4.158v-9.843C37.34,13.106,36.89,12.656,36.34,12.656z M19.557,34.507l-0.479-2.776l-2.645,0.972l3.783-6.554h4.165
L19.557,34.507z M33.567,32.703l-2.644-0.972l-0.48,2.776l-4.824-8.358h4.165L33.567,32.703z M32.688,24.366
c0,0.527-0.66,1.29-2.784,1.29s-4.904,0-4.904,0s-2.783,0-4.904,0c-2.124,0-2.784-0.762-2.784-1.29v-4.293
c0-0.527,0.589-1.617,2.784-1.291c2.098,0.314,4.904,2.58,4.904,2.58s2.792-2.358,4.904-2.58c2.144-0.224,2.784,0.763,2.784,1.291
V24.366z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<polygon points="19.237,24.907 15.229,26.382 19.25,19.412 14.51,19.028 14.51,35.816 24.574,37.394 24.574,21.13 19.966,29.118
"/>
<polygon points="34.771,26.382 30.763,24.907 30.034,29.118 25.425,21.13 25.425,37.394 35.491,35.816 35.491,19.028 30.75,19.412
"/>
<path d="M17.536,17.251v-2.472h-1.183h-0.822h-0.577c-0.55,0-1,0.45-1,1v0.699v0.7v1l4.062,0.312
C17.684,18.101,17.536,17.658,17.536,17.251z"/>
<polygon points="20.627,25.399 24.502,18.683 21.155,18.683 18.116,23.95 20.24,23.168 "/>
<polygon points="29.373,25.399 29.76,23.168 31.884,23.95 28.845,18.683 25.498,18.683 "/>
<path d="M31.178,17.251v-3.45c0-0.424-0.515-1.217-2.236-1.037C27.243,12.942,25,14.837,25,14.837s-2.255-1.821-3.941-2.073
c-1.764-0.263-2.236,0.613-2.236,1.037v3.45c0,0.422,0.53,1.036,2.236,1.036c1.704,0,3.941,0,3.941,0s2.233,0,3.941,0
C30.647,18.287,31.178,17.673,31.178,17.251z M21.059,14.837c-1.231,0-1.67-0.365-1.67-0.678c0-0.312,0.441-0.834,1.67-0.677
c0.779,0.099,1.945,0.697,2.802,1.355H21.059z M25,17.354c-0.438,0-0.792-0.356-0.792-0.793c0-0.438,0.354-0.793,0.792-0.793
s0.793,0.355,0.793,0.793C25.793,16.999,25.438,17.354,25,17.354z M28.941,13.481c1.249-0.177,1.67,0.365,1.67,0.677
c0,0.313-0.438,0.678-1.67,0.678h-2.803C26.994,14.178,28.16,13.592,28.941,13.481z"/>
<path d="M35.046,14.779H34.25h-0.604h-1.183v2.472c0,0.407-0.147,0.85-0.479,1.24l4.062-0.312v-1v-0.7v-0.699
C36.046,15.229,35.596,14.779,35.046,14.779z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M38.835,26.774c-0.106-0.398-0.509-0.637-0.919-0.53l-6.32,1.693l-2.189-1.264l2.677-2.609
c0.204-0.199,0.278-0.498,0.189-0.769c-0.088-0.271-0.322-0.469-0.605-0.51L30.6,22.629l0.994-0.574l6.321,1.693
c0.065,0.017,0.131,0.025,0.194,0.025c0.332,0,0.635-0.221,0.725-0.556c0.107-0.4-0.131-0.811-0.53-0.918l-4.873-1.305l2.631-1.519
c0.358-0.207,0.481-0.666,0.274-1.024c-0.207-0.358-0.664-0.483-1.024-0.274l-2.627,1.517l1.305-4.87
c0.107-0.4-0.131-0.812-0.53-0.919c-0.405-0.106-0.812,0.132-0.919,0.53l-1.693,6.32l-2.644,1.526l-0.679-0.099l-1.774-3.597v-0.774
l4.626-4.625c0.293-0.293,0.293-0.768,0-1.061s-0.768-0.293-1.061,0L25.75,15.69v-3.035c0-0.414-0.336-0.75-0.75-0.75
s-0.75,0.336-0.75,0.75v3.039l-3.566-3.568c-0.292-0.292-0.767-0.293-1.061,0c-0.293,0.292-0.293,0.768,0,1.061l4.627,4.628v0.767
l-1.776,3.601l-0.675,0.098l-2.645-1.527l-1.692-6.319c-0.106-0.399-0.509-0.637-0.919-0.531c-0.399,0.107-0.638,0.519-0.53,0.918
l1.304,4.871l-2.628-1.518c-0.359-0.208-0.818-0.084-1.024,0.274c-0.207,0.359-0.084,0.817,0.274,1.024l2.632,1.52l-4.873,1.305
c-0.399,0.107-0.638,0.519-0.53,0.918c0.09,0.335,0.393,0.556,0.725,0.556c0.063,0,0.129-0.008,0.194-0.025l6.322-1.693l0.994,0.574
l-1.071,0.156c-0.283,0.041-0.518,0.239-0.605,0.51c-0.089,0.271-0.015,0.57,0.189,0.769l2.678,2.611l-2.188,1.264l-6.318-1.694
c-0.404-0.106-0.812,0.131-0.919,0.53c-0.107,0.4,0.13,0.812,0.53,0.919l4.869,1.306l-2.628,1.518
c-0.358,0.207-0.481,0.666-0.274,1.024c0.139,0.241,0.391,0.375,0.65,0.375c0.127,0,0.256-0.032,0.374-0.101l2.632-1.519
l-1.307,4.872c-0.107,0.4,0.13,0.812,0.53,0.919c0.065,0.017,0.131,0.025,0.194,0.025c0.332,0,0.635-0.221,0.725-0.556l1.695-6.322
l1.519-0.877l-0.472,2.755c-0.048,0.281,0.067,0.565,0.299,0.733c0.229,0.167,0.537,0.189,0.789,0.057l2.957-1.555v1.826
l-4.627,4.628c-0.293,0.293-0.293,0.768,0,1.061c0.293,0.293,0.768,0.293,1.061,0l3.566-3.567v3.038c0,0.414,0.336,0.75,0.75,0.75
s0.75-0.336,0.75-0.75V34.3l3.565,3.565c0.146,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061
l-4.626-4.625V30.35l2.955,1.554c0.109,0.058,0.229,0.086,0.349,0.086c0.155,0,0.311-0.048,0.44-0.143
c0.231-0.168,0.347-0.452,0.299-0.733l-0.473-2.758l1.523,0.879l1.694,6.321c0.09,0.335,0.393,0.556,0.725,0.556
c0.063,0,0.129-0.008,0.194-0.025c0.4-0.107,0.638-0.519,0.53-0.919l-1.306-4.872l2.63,1.519c0.118,0.068,0.247,0.101,0.374,0.101
c0.26,0,0.512-0.134,0.65-0.375c0.207-0.359,0.084-0.817-0.274-1.024l-2.628-1.517l4.871-1.305
C38.704,27.586,38.942,27.175,38.835,26.774z M25.348,28.444c-0.108-0.057-0.229-0.086-0.349-0.086s-0.24,0.029-0.349,0.086
l-2.71,1.425l0.517-3.018c0.042-0.243-0.039-0.491-0.216-0.664l-2.191-2.136l3.029-0.44c0.245-0.036,0.456-0.189,0.565-0.41
l1.354-2.746l1.354,2.746c0.109,0.221,0.32,0.375,0.565,0.41l3.029,0.44l-2.191,2.136c-0.177,0.172-0.258,0.42-0.216,0.664
l0.517,3.018L25.348,28.444z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M38.835,26.774c-0.107-0.398-0.51-0.637-0.919-0.53l-6.32,1.693l-1.26-0.728c0.284-0.683,0.442-1.431,0.442-2.215
s-0.158-1.531-0.442-2.213l1.258-0.727l6.321,1.693c0.065,0.017,0.131,0.025,0.194,0.025c0.332,0,0.635-0.221,0.725-0.556
c0.107-0.4-0.131-0.811-0.53-0.918l-4.873-1.305l2.631-1.519c0.358-0.207,0.481-0.666,0.274-1.024
c-0.206-0.358-0.664-0.483-1.024-0.274l-2.627,1.517l1.305-4.87c0.107-0.4-0.131-0.812-0.53-0.919
c-0.406-0.106-0.812,0.132-0.919,0.53l-1.693,6.32l-1.267,0.731c-0.912-1.189-2.273-2.012-3.83-2.215v-1.459l4.626-4.625
c0.293-0.293,0.293-0.768,0-1.061s-0.768-0.293-1.061,0L25.75,15.69v-3.035c0-0.414-0.336-0.75-0.75-0.75s-0.75,0.336-0.75,0.75
v3.039l-3.566-3.568c-0.292-0.292-0.767-0.293-1.061,0c-0.293,0.292-0.293,0.768,0,1.061l4.627,4.628v1.455
c-1.557,0.203-2.917,1.026-3.83,2.214l-1.266-0.731l-1.692-6.319c-0.106-0.399-0.51-0.637-0.919-0.531
c-0.399,0.107-0.638,0.519-0.53,0.918l1.304,4.871l-2.628-1.518c-0.36-0.208-0.818-0.084-1.024,0.274
c-0.207,0.359-0.084,0.817,0.274,1.024l2.632,1.52l-4.873,1.305c-0.399,0.107-0.638,0.519-0.53,0.918
c0.09,0.335,0.393,0.556,0.725,0.556c0.063,0,0.129-0.008,0.194-0.025l6.322-1.693l1.256,0.725c-0.285,0.683-0.443,1.43-0.443,2.215
s0.158,1.533,0.443,2.216l-1.26,0.728l-6.318-1.694c-0.405-0.106-0.812,0.131-0.919,0.53c-0.107,0.4,0.13,0.812,0.53,0.919
l4.869,1.306l-2.628,1.518c-0.358,0.207-0.481,0.666-0.274,1.024c0.139,0.241,0.391,0.375,0.65,0.375
c0.127,0,0.256-0.032,0.374-0.101l2.632-1.519l-1.307,4.872c-0.107,0.4,0.13,0.812,0.53,0.919c0.065,0.017,0.131,0.025,0.194,0.025
c0.332,0,0.635-0.221,0.725-0.556l1.695-6.322l1.262-0.729c0.913,1.188,2.274,2.011,3.83,2.214v1.456l-4.627,4.628
c-0.293,0.293-0.293,0.768,0,1.061c0.293,0.293,0.768,0.293,1.061,0l3.566-3.567v3.038c0,0.414,0.336,0.75,0.75,0.75
s0.75-0.336,0.75-0.75V34.3l3.565,3.565c0.146,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061
l-4.626-4.625V30.72c1.557-0.203,2.917-1.026,3.83-2.215l1.264,0.73l1.694,6.321c0.09,0.335,0.393,0.556,0.725,0.556
c0.063,0,0.129-0.008,0.194-0.025c0.4-0.107,0.638-0.519,0.53-0.919l-1.306-4.872l2.63,1.519c0.118,0.068,0.247,0.101,0.374,0.101
c0.26,0,0.512-0.134,0.65-0.375c0.207-0.359,0.084-0.817-0.274-1.024l-2.628-1.517l4.871-1.305
C38.704,27.586,38.942,27.175,38.835,26.774z M25,29.274c-2.359,0-4.279-1.919-4.279-4.279s1.92-4.279,4.279-4.279
s4.278,1.919,4.278,4.279S27.359,29.274,25,29.274z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M26.381,24.003c-0.177-0.026-0.329-0.136-0.407-0.295l-0.976-1.977l-0.974,1.977c-0.079,0.159-0.231,0.269-0.408,0.295
l-2.18,0.317l1.577,1.537c0.127,0.124,0.186,0.302,0.156,0.478l-0.373,2.172l1.95-1.025c0.079-0.041,0.165-0.062,0.251-0.062
c0.087,0,0.174,0.021,0.252,0.062l1.95,1.025l-0.372-2.172c-0.03-0.176,0.029-0.354,0.155-0.478l1.577-1.537L26.381,24.003z"/>
<path d="M25,12.661c-6.815,0-12.34,5.524-12.34,12.339c0,6.815,5.524,12.34,12.34,12.34c6.814,0,12.339-5.524,12.339-12.34
C37.339,18.185,31.814,12.661,25,12.661z M34.576,26.941l-3.506,0.94l1.892,1.092c0.257,0.149,0.346,0.479,0.197,0.737
c-0.101,0.174-0.281,0.27-0.468,0.27c-0.092,0-0.185-0.023-0.271-0.073l-1.892-1.092l0.939,3.506
c0.077,0.289-0.094,0.584-0.383,0.662c-0.046,0.012-0.094,0.019-0.139,0.019c-0.239,0-0.457-0.159-0.522-0.4l-1.22-4.55
l-1.097-0.633l0.341,1.985c0.035,0.203-0.048,0.407-0.215,0.527c-0.094,0.068-0.205,0.104-0.317,0.104
c-0.086,0-0.172-0.021-0.251-0.062l-2.126-1.119v1.317l3.33,3.329c0.21,0.211,0.21,0.553,0,0.764
c-0.106,0.106-0.244,0.158-0.383,0.158s-0.276-0.052-0.382-0.158l-2.565-2.566v2.185c0,0.299-0.242,0.54-0.541,0.54
c-0.298,0-0.539-0.241-0.539-0.54v-2.187l-2.567,2.568c-0.211,0.21-0.552,0.21-0.764,0c-0.21-0.21-0.21-0.553,0-0.763l3.331-3.332
v-1.314l-2.128,1.12c-0.184,0.095-0.405,0.078-0.569-0.042c-0.167-0.121-0.249-0.325-0.215-0.527l0.34-1.984l-1.093,0.631
l-1.221,4.55c-0.065,0.242-0.282,0.4-0.521,0.4c-0.046,0-0.093-0.006-0.14-0.019c-0.288-0.077-0.46-0.373-0.382-0.662l0.939-3.506
l-1.894,1.094c-0.085,0.049-0.177,0.072-0.271,0.072c-0.185,0-0.367-0.096-0.467-0.27c-0.15-0.258-0.062-0.588,0.198-0.737
l1.891-1.092l-3.505-0.94c-0.288-0.077-0.459-0.373-0.381-0.66c0.076-0.288,0.368-0.459,0.661-0.382l4.548,1.219l1.574-0.91
L19.9,24.329c-0.147-0.144-0.201-0.358-0.137-0.553c0.062-0.196,0.231-0.338,0.436-0.368l0.771-0.112l-0.716-0.413l-4.551,1.218
c-0.047,0.012-0.094,0.018-0.14,0.018c-0.24,0-0.457-0.158-0.521-0.399c-0.078-0.288,0.093-0.584,0.381-0.662l3.508-0.939
l-1.894-1.094c-0.26-0.149-0.349-0.479-0.198-0.737c0.148-0.258,0.479-0.347,0.737-0.198l1.892,1.093l-0.938-3.506
c-0.078-0.289,0.095-0.584,0.381-0.662c0.295-0.077,0.586,0.095,0.663,0.382l1.217,4.549l1.903,1.099l0.486-0.071l1.279-2.591
v-0.552L21.129,16.5c-0.21-0.21-0.21-0.553,0-0.763c0.212-0.21,0.553-0.21,0.764,0l2.567,2.568v-2.187
c0-0.299,0.241-0.54,0.539-0.54c0.299,0,0.541,0.241,0.541,0.54v2.185l2.565-2.566c0.211-0.21,0.553-0.21,0.765,0
c0.21,0.21,0.21,0.553,0,0.764l-3.33,3.329v0.558l1.276,2.588l0.489,0.072l1.903-1.099l1.217-4.549
c0.078-0.287,0.369-0.458,0.663-0.382c0.286,0.078,0.459,0.373,0.381,0.662l-0.939,3.506l1.891-1.092
c0.26-0.15,0.59-0.061,0.738,0.197c0.148,0.258,0.06,0.588-0.197,0.737l-1.894,1.093l3.508,0.939
c0.287,0.077,0.458,0.374,0.381,0.662c-0.065,0.241-0.281,0.399-0.521,0.399c-0.047,0-0.093-0.006-0.14-0.018l-4.551-1.218
l-0.716,0.414l0.77,0.111c0.202,0.029,0.371,0.171,0.436,0.368c0.063,0.195,0.01,0.409-0.137,0.553l-1.927,1.879l1.575,0.91
l4.55-1.219c0.294-0.077,0.585,0.095,0.661,0.382C35.035,26.569,34.864,26.864,34.576,26.941z"/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
<path d="M25,13.661c6.252,0,11.339,5.087,11.339,11.339c0,6.253-5.086,11.34-11.339,11.34c-6.253,0-11.34-5.087-11.34-11.34
C13.66,18.748,18.747,13.661,25,13.661 M25,12.661c-6.815,0-12.34,5.524-12.34,12.339c0,6.815,5.524,12.34,12.34,12.34
c6.814,0,12.339-5.524,12.339-12.34C37.339,18.185,31.814,12.661,25,12.661L25,12.661z"/>
<path d="M34.721,26.251c-0.075-0.281-0.364-0.446-0.646-0.373l-4.44,1.19l-0.886-0.511c0.2-0.48,0.311-1.005,0.311-1.556
c0-0.551-0.111-1.076-0.311-1.556l0.884-0.51l4.442,1.189c0.046,0.012,0.091,0.018,0.136,0.018c0.233,0,0.446-0.155,0.509-0.391
c0.076-0.281-0.091-0.57-0.373-0.645l-3.424-0.917l1.849-1.067c0.252-0.146,0.338-0.468,0.193-0.72
c-0.145-0.252-0.469-0.337-0.72-0.192l-1.846,1.066l0.917-3.423c0.075-0.281-0.092-0.57-0.373-0.645
c-0.28-0.072-0.569,0.091-0.646,0.373l-1.189,4.441l-0.89,0.514c-0.642-0.835-1.598-1.414-2.691-1.557v-1.025l3.25-3.25
c0.206-0.206,0.206-0.539,0-0.745c-0.206-0.206-0.54-0.206-0.745,0l-2.505,2.505V16.33c0-0.291-0.236-0.527-0.527-0.527以上是关于前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果的主要内容，如果未能解决你的问题，请参考以下文章
圣诞临近，小包送给大家一个雪人，一群麋鹿，一堆糖果，一句祝福，圣诞快乐！#yyds干货盘点#