Attribution
source article: Smashing Magazine: Freebie Christmas Icon Set
artist: Manuela Langella
Last active
August 29, 2015 14:10
-
-
Save timelyportfolio/39394d6e37a7fd878cab to your computer and use it in GitHub Desktop.
Animated Christmas SVG in R with htmltools + rvest + XML & vivus.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #http://www.smashingmagazine.com/2014/11/25/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/ | |
| # please note all praise and attribution for the artwork | |
| # should go to | |
| library(htmltools) | |
| library(pipeR) | |
| library(rvest) | |
| library(XML) | |
| tempdir() %>>% | |
| ( | |
| tDir ~ | |
| "http://provide.smashingmagazine.com/smashing-freebie-christmas-icon-set-2014.zip" %>>% | |
| download.file( file.path(tDir,"christmas_svg.zip") ) %>>% | |
| (unzip( zipfile = file.path(tDir,"christmas_svg.zip"), exdir = tDir )) | |
| ) -> svgfiles # save lsit of files so we don't have to download each time | |
| svgfiles %>>% | |
| (.[grep( | |
| x=. | |
| #uncomment to give a list showing all svg files | |
| #,pattern="SVG/#([:a-z:]|[:A-Z:]|[:0-9:].svg)") | |
| # I like the fireplace | |
| # ,pattern="SVG/#fireplace.svg") | |
| # another favorite of mine is santa | |
| ,pattern="SVG/#santa.svg") | |
| ]) %>>% | |
| # use rvest html which is XML::htmlParse | |
| html %>>% | |
| # grab the svg node and save as svg_original | |
| html_node("svg") %>>% ( ~ svg_original = saveXML(.) ) %>>% | |
| # and add id so we can refer to it in the script | |
| (~ addAttributes(.,id="christmas_svg") ) %>>% | |
| (~ | |
| xmlApply( | |
| getNodeSet(.,"//path") | |
| ,function(p){ | |
| # replace fill style with stroke so the outline is the fill color | |
| sty = gsub(x=xmlAttrs(p)["style"],pattern="fill",replacement="stroke") | |
| # remove the original style attribute | |
| removeAttributes(p,"style") | |
| # add the new style attribute where we replaced fill with stroke | |
| addAttributes(p,style=paste0(sty,";stroke-width:3;fill-opacity:0.2")) | |
| # to just see the original, comment above and uncomment below | |
| # return(p) | |
| } | |
| ) | |
| ) %>>% | |
| # make a side by side div with the original svg | |
| # and the new vivus.js animated path svg | |
| (tagList( | |
| tags$h1("R (htmltools+rvest+XML) & Javascript (vivus.js)") | |
| ,tags$button( | |
| onclick="vChristmas.reset().play();" | |
| ,"replay" | |
| ) | |
| ,tags$div( style = "position:relative;left:5%" | |
| ,tags$div( style = "height:100%;width:45%;display:inline-block;" | |
| ,svg_original %>>% HTML | |
| ) | |
| ,tags$div( style = "height:100%;width:45%;display:inline-block" | |
| ,saveXML(.) %>>% HTML | |
| ) | |
| ) | |
| ,tags$footer( | |
| tags$blockquote( | |
| # basic blockquote styling from http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ | |
| style = "background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px;" | |
| ,tags$h3(style= "margin:0 0 0 0;", "Source:") | |
| ,"article: ",tags$a( | |
| href = "http://www.smashingmagazine.com/2014/11/25/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/" | |
| , "Smashing Magazine: Freebie Christmas Icon Set" | |
| ) | |
| ,tags$br() | |
| ,"artist:", tags$a( | |
| href = "http://mokreo.com/" | |
| ,"Manuela Langella" | |
| )) | |
| ) | |
| ,tags$script( | |
| #"var vChristmas = new Vivus('christmas_svg',{type: 'oneByOne',start:'autostart',delay:0,duration:500})" | |
| "var vChristmas = new Vivus('christmas_svg',{type: 'delayed',start:'autostart',delay:0,duration:500})" | |
| ) | |
| )) %>>% | |
| attachDependencies( | |
| list( | |
| # add d3 potentially for additional customization / animation | |
| #htmlDependency( | |
| # name="d3" | |
| # ,version="3.4" | |
| # ,src=c("href"="http://d3js.org") | |
| # ,script = "d3.v3.min.js" | |
| #) | |
| htmlDependency( | |
| name="vivus" | |
| ,version="0.1" | |
| ,src=c("href"="http://maxwellito.github.io/vivus/dist") | |
| ,script = "vivus.min.js" | |
| ) | |
| ) | |
| ) %>>% html_print |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="http://maxwellito.github.io/vivus/dist/vivus.min.js"></script> </head> <body> <h1>R (htmltools+rvest+XML) & Javascript (vivus.js)</h1> <button onclick="vChristmas.reset().play();">replay</button> <div style="position:relative;left:5%"> <div style="height:100%;width:45%;display:inline-block;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 512 558.151" style="enable-background:new 0 0 512 558.151;" xml:space="preserve"> <g id="_x23_santa"> <circle style="fill:#DAC242;" cx="256" cy="256" r="256"/> <circle style="fill:#FFFFFF;" cx="73.505" cy="345.028" r="10.077"/> <circle style="fill:#FFFFFF;" cx="385.32" cy="73.329" r="9.671"/> <circle style="fill:#FFFFFF;" cx="440.296" cy="312.078" r="5.374"/> <circle style="fill:#FFFFFF;" cx="450.955" cy="190.775" r="5.285"/> <ellipse style="fill:#FFFFFF;" cx="385.32" cy="73.329" rx="5.583" ry="0"/> <ellipse style="fill:#FFFFFF;" cx="61.625" cy="372.338" rx="0" ry="5.039"/> <circle style="fill:#FFFFFF;" cx="63.429" cy="168.309" r="4.902"/> <circle style="fill:#FFFFFF;" cx="429.762" cy="115.692" r="5.16"/> <circle style="fill:#FFFFFF;" cx="486.166" cy="266.328" r="11.891"/> <circle style="fill:#FFFFFF;" cx="120.092" cy="74.483" r="8.664"/> <circle style="fill:#FFFFFF;" cx="90.836" cy="419.024" r="7.254"/> <circle style="fill:#FFFFFF;" cx="150.369" cy="304.233" r="4.071"/> <circle style="fill:#FFFFFF;" cx="27.906" cy="227.565" r="7.86"/> <circle style="fill:#FFFFFF;" cx="221.003" cy="21.85" r="4.152"/> <circle style="fill:#FFFFFF;" cx="307.179" cy="41.973" r="15.972"/> <g> <path style="fill:#EF4B4C;" d="M236.628,322.35c-16.5-13-114.875,61.279-100.438,149.639c0,0,14.418,24.321,35.975,36.76 			c56.498,32.601,190.522,38.601,233.463,7.61c20.147-14.541,16-19.009,16-19.009s11.436-123.077-54.424-165.033L236.628,322.35z"/> <path style="fill:#FFDDAA;" d="M216.257,304.552c32.746,25.296,112.598,10.822,136.333-21.186 			c3.43-4.626,7.188-20.716,11.54-24.139c6.042-4.752,14.278,0.412,20.359-5.133c16.72-15.247-2.519-52.722-20.318-34.111 			c10.349-58.699-104.153-86.738-141.267-60.875c-24.237,16.889-25.634,44.529-30.055,70.665 			C188.588,254.961,194.017,287.372,216.257,304.552z"/> <path style="fill:#E8B69C;" d="M257.763,237.9c0,0-0.063-0.268-0.214-0.745c-0.138-0.466-0.45-1.131-0.927-1.869 			c-0.49-0.735-1.229-1.513-2.18-2.211c-0.969-0.706-2.135-1.236-3.542-1.556c-1.337-0.299-2.909-0.371-4.54-0.194 			c-1.618,0.173-3.428,0.584-5.074,1.168c-1.67,0.611-3.312,1.439-4.643,2.528c-1.321,1.093-2.349,2.392-2.75,3.862l-0.046,0.135 			l-0.012,0.034c-0.01,0.037,0.064-0.272,0.03-0.129l-0.005,0.024l-0.021,0.098l-0.083,0.39c-0.055,0.257-0.127,0.558-0.108,0.659 			l-0.034,0.453l0.017,0.572c0.072,0.763,0.222,1.546,0.519,2.311c0.318,0.756,0.708,1.502,1.19,2.202 			c0.503,0.683,1.046,1.347,1.67,1.924c0.612,0.587,1.28,1.101,1.971,1.542c0.707,0.474,1.346,0.765,2.222,1.144 			c1.432,0.594,3.065,1.034,4.539,1.307c3.002,0.552,5.676,0.661,7.542,0.789c1.872,0.106,2.957,0.202,2.957,0.202 			s-0.259,0.078-0.746,0.224c-0.488,0.131-1.201,0.354-2.122,0.565c-1.839,0.438-4.494,1.04-7.87,1.108 			c-1.705,0.005-3.507-0.126-5.562-0.648c-0.851-0.217-1.983-0.587-2.944-1.07c-1.005-0.462-1.951-1.084-2.861-1.786 			c-1.806-1.415-3.418-3.291-4.46-5.628c-0.509-1.172-0.87-2.459-0.988-3.807l-0.043-1.019c0.006-0.363,0.046-0.759,0.08-1.136 			c0.034-0.432,0.092-0.649,0.143-0.914l0.078-0.392l0.019-0.098l0.047-0.202l0.019-0.061l0.078-0.244 			c0.782-2.654,2.603-4.808,4.582-6.253c0.989-0.748,2.043-1.33,3.107-1.8c1.063-0.473,2.133-0.86,3.209-1.121 			c2.18-0.55,4.214-0.744,6.252-0.684c2.025,0.079,3.934,0.481,5.616,1.228c1.618,0.71,2.977,1.794,3.874,2.887 			c0.938,1.084,1.475,2.226,1.768,3.176c0.297,0.958,0.329,1.734,0.315,2.256C257.813,237.633,257.763,237.9,257.763,237.9z"/> <circle style="fill:#2D2D2D;" cx="294.668" cy="219.31" r="3.46"/> <path style="fill:#FFFFFF;" d="M317.285,260.774c0.487,5.587-3.028,11.031-7.726,13.376c-4.698,2.345-10.276,1.938-15.104-0.076 			c-4.137-1.726-7.953-4.589-12.351-5.19c-4.798-0.656-9.648,1.557-13.328,4.962c-3.68,3.405-6.344,7.909-8.704,12.489 			c1.319-6.067-2.686-12.303-7.804-15.132s-11.078-3.057-16.82-3.228c-9.037-0.268-19.491,0.148-25.042,7.892 			c-2.123-4.002-7.372-5.061-11.277-3.226c-3.905,1.835-6.591,5.855-8.341,10.065c-3.241,7.8-3.064,18.64,3.643,23.138 			c1.316,0.882,3,1.749,3.15,3.419c0.076,0.846-0.292,1.653-0.595,2.437c-3.354,8.674,0.872,18.756,6.785,25.634 			c11.335,13.184,29.301,19.194,45.508,15.222c1.23-0.301,2.476-0.658,3.732-0.55c2.287,0.197,4.197,1.871,6.04,3.355 			c11.94,9.614,27.506,13.747,42.187,11.202c14.681-2.545,28.286-11.735,36.873-24.907c12.344,0.483,25.117-4.054,33.675-13.72 			c8.558-9.666,12.192-24.687,7.63-37.144c-1.935-5.283-5.736-10.303-10.909-11.191c3.622-5.331,5.28-12.19,4.537-18.764 			c-4.674-0.846-10.437-2.875-10.919-7.991c-0.21-2.222,0.735-4.351,1.447-6.448c4.876-14.354,3.389-33.387-0.528-45.571 			c-4.11,3.847-5.406,8.694-7.604,14.08c-2.962,7.258-4.148,15.827-9.55,21.179c-3.467,3.435-8.825,6.02-8.94,11.113 			c-0.039,1.704,0.583,3.349,0.669,5.051c0.234,4.604-3.614,8.498-7.747,9.566S321.421,261.827,317.285,260.774z"/> <circle style="fill:#2D2D2D;" cx="216.628" cy="213.012" r="3.5"/> <path style="opacity:0.02;fill:#2D2D2D;" d="M231.18,233.824c-2.27,4.968-0.763,10.921,0.78,16.216 			c-9.076-2.693-18.519-3.879-27.913-3.503c-2.096,0.084-4.231,0.24-6.26-0.342c-2.03-0.582-3.982-2.064-4.618-4.263 			c-0.551-1.904-0.042-3.972,0.589-5.847c1.357-4.035,3.285-7.87,4.075-12.084c1.025-5.463,0.064-11.171,0.863-16.679 			c0.743-5.117,2.984-9.982,4.421-14.91c1.995-6.843,7.075-12.417,13.845-14.65c5.719-1.886,11.546-3.201,17.5-3.193 			c10.419,0.014,21.463,4.911,26.536,14.924c2.823,5.572,3.554,12.16,3.368,18.537c-0.267,9.132-2.326,18.196-5.993,26.394 			c0.229-2.482-1.277-4.858-3.225-6.132c-1.949-1.275-4.268-1.646-6.527-1.847C242.02,225.856,234.155,227.315,231.18,233.824z"/> <path style="opacity:0.05;fill:#2D2D2D;" d="M306.684,254.241c-3.436-3.201-6.356-7.078-10.45-9.379 			c-9.438-5.304-21.139-0.545-30.859,4.222c-2.836,1.391-5.676,2.784-8.391,4.399c-3.792,2.254-7.488,5.214-9.733,8.91 			c-2.242-3.713-5.949-6.684-9.753-8.946c-2.715-1.615-5.555-3.008-8.391-4.399c-9.72-4.768-21.421-9.526-30.859-4.222 			c-4.094,2.301-7.014,6.177-10.451,9.379c-7.835,7.299-18.798,11.121-29.472,10.273c5.606,11.644,16.665,20.163,28.932,24.228 			c12.267,4.065,25.639,3.968,38.309,1.422c5.909-1.187,11.876-2.975,16.605-6.711c2.025-1.6,3.782-3.624,5.059-5.881 			c1.278,2.272,3.044,4.309,5.08,5.917c4.729,3.736,10.696,5.524,16.605,6.711c12.67,2.545,26.042,2.643,38.309-1.422 			c12.267-4.065,23.326-12.584,28.932-24.228C325.482,265.361,314.519,261.54,306.684,254.241z"/> <path style="fill:#FFFFFF;" d="M225.107,244.312c-9.72-4.768-21.421-9.526-30.859-4.222c-4.094,2.301-7.014,6.177-10.451,9.379 			c-7.835,7.299-18.798,11.12-29.472,10.273c5.606,11.644,16.665,20.163,28.932,24.228c12.267,4.065,25.639,3.968,38.309,1.422 			c5.909-1.187,11.876-2.975,16.605-6.711c4.729-3.736,8.014-9.775,7.067-15.727c-0.999-6.28-6.275-10.992-11.741-14.242 			C230.783,247.097,227.943,245.704,225.107,244.312z"/> <path style="fill:#EF4B4C;" d="M362.119,162.68c0.497,0.758,22.373-18.472,11.206-38.783s-51.355-91.701-92.054-80.551 			c-40.699,11.15-36.737,15.08-51.994,26.761s-18.455,22.94-21.575,16.121c-3.12-6.819-11.503-2.524-9.46,10.038 			s2.802,21.929,9.114,23.776c6.313,1.846,13.279-9.382,21.307-7.289c8.028,2.093,10.134,8.674,32.586,6.857 			S349.004,142.689,362.119,162.68z"/> <path style="opacity:0.15;fill:#2D2D2D;" d="M232.428,134.35c0,0-0.086-21.597,10.719-27.333 			c23.481-12.465,41.592-20.688,79.753-9.674s51.594,44.906,46.112,53.381c-5.482,8.475-6.664,14.821-11.809,10.789 			C352.058,157.481,291.171,115.238,232.428,134.35z"/> <path style="fill:#EF4B4C;" d="M211.128,149.452c0,0-17.5-23.103,12.5-30.603s48.5-23.163,93-10.831s60.164,50.277,53.771,59.766 			s-7.771,16.594-13.771,12.08S279.628,128.055,211.128,149.452z"/> <path style="fill:#FFFFFF;" d="M364.999,219.983c0,0,1.931-6.103,7.598-4.765l8.251,1.294c0,0,0.226-7.903-4.109-16.529 			c-2.464-4.904-7.458-7.962-12.937-8.272c-0.005,0-0.009-0.001-0.012-0.001C363.456,191.683,360.876,212.283,364.999,219.983z"/> <path style="fill:#FFFFFF;" d="M261.375,244.348c9.72-4.768,21.421-9.526,30.859-4.222c4.094,2.301,7.014,6.177,10.451,9.379 			c7.835,7.299,18.798,11.12,29.472,10.273c-5.606,11.644-16.665,20.163-28.932,24.228c-12.267,4.065-25.639,3.968-38.309,1.422 			c-5.909-1.187-11.876-2.975-16.605-6.711s-8.014-9.775-7.067-15.727c0.999-6.28,6.275-10.992,11.741-14.242 			C255.699,247.133,258.539,245.74,261.375,244.348z"/> <path style="fill:#F8F8F8;" d="M200.6,190.507c0,0,2.528-19.223,51.028-19.44c48.5-0.217,108.864,26.739,113.432,29.761 			c0,0,9.068,0.216,3.568-14.881s-39.084-56.98-110.792-50.538c0,0-48.708-2.059-62.708,29.941S200.6,190.507,200.6,190.507z"/> <path style="fill:#FFFFFF;" d="M162.942,83.296c0.729-4.259,1.527-8.686,4.065-12.183c3.126-4.307,8.429-6.511,13.659-7.493 			c10.244-1.922,21.632,0.455,29.037,7.79c7.405,7.335,9.682,19.938,3.837,28.568c-1.219,1.8-2.779,3.423-4.727,4.388 			c-1.75,0.866-3.716,1.161-5.623,1.58c-5.148,1.134-10.024,3.239-15.055,4.814c-5.031,1.575-10.4,2.623-15.564,1.562 			s-10.075-4.616-11.48-9.697c-0.885-3.2-0.329-6.6,0.231-9.872C161.862,89.601,162.402,86.448,162.942,83.296z"/> <path style="opacity:0.05;fill:#2D2D2D;" d="M374.776,238.102c-0.439,0.801-1.677,0.788-2.397,0.227 			c-0.721-0.561-1.07-1.46-1.448-2.292c-0.312-0.687-0.671-1.377-0.735-2.129c-0.184-2.176,2.389-3.835,4.518-3.354 			c2.13,0.481,3.644,2.433,4.398,4.482c0.865,2.352,0.917,5.115-0.386,7.256c-1.303,2.141-4.15,3.391-6.461,2.423 			c2.07-1.379,3.332-3.891,3.2-6.376"/> <path style="fill:#EF4B4C;" d="M184.628,354.973c0,0-81-54.871-73-87.747s10-22.845,10-22.845l-22-9.126c0,0-20,35.623-14,59.859 			c6,24.236,65.001,76.156,75.001,82.196C170.628,383.35,184.628,354.973,184.628,354.973z"/> <path style="fill:#F8F8F8;" d="M103.097,221.968c6.976,2.629,13.952,5.257,20.927,7.886c2.003,0.755,4.041,1.529,5.717,2.861 			c5.205,4.135-0.462,17.085-0.591,16.743s-0.584-0.393-0.95-0.39c-13.767,0.098-27.502-5.217-37.616-14.558 			c-2.587-2.389-5.123-5.611-4.439-9.065c0.642-3.243,4.049-5.341,7.346-5.584C96.788,219.617,100.004,220.802,103.097,221.968z"/> <path style="fill:#EF4B4C;" d="M395.628,378.153c7.001-4.155,29,12.197,40,27.197s29,76.33,32,87.665c3,11.335,0,21.062,0,21.062 			l21-5.328c0,0-7-90.399-30-115.399s-43.449-32-67.724-35S395.628,378.153,395.628,378.153z"/> <path style="fill:#F8F8F8;" d="M456.749,501.207c-2.625,2.275-6.12,4.678-5.22,8.034c0.863,3.218,4.638,4.538,7.895,5.24 			c7.713,1.664,15.563,2.689,23.445,3.062c4.497,0.213,9.211,0.166,13.205-1.912c3.994-2.078,6.962-6.789,5.627-11.089 			c-1.425-4.59-6.832-6.658-11.633-6.892c-4.801-0.234-9.735,0.704-14.351-0.636C475.716,497.014,461.274,497.286,456.749,501.207z"/> <path style="fill:#EF4B4C;" d="M141.625,176.475c0.114-4.2-0.364-8.52-2.272-12.264c-2.426-4.759-7.179-8.26-12.443-9.166 			s-10.914,0.806-14.791,4.481c-2.453,2.326-4.166,5.314-5.71,8.321c-8.624,16.802-13.04,35.743-12.736,54.627 			c11.657,2.807,23.314,5.614,34.97,8.42c5.557-4.009,11.247-8.158,14.947-13.925c2.63-4.099,4.091-9.516,1.789-13.807 			c-2.303-4.292-9.484-5.566-11.937-1.358C138.503,194.369,141.379,185.466,141.625,176.475z"/> <path style="fill:#EF4B4C;" d="M492.933,514.431c-1.078-0.755-2.45-0.918-3.759-1.059c-5.375-0.577-10.75-1.153-16.125-1.73 			c-2.251-0.242-4.584-0.475-6.731,0.243c-2.119,0.708-3.827,2.267-5.467,3.785c-5.64,5.219-11.806,12.012-10.053,19.494 			c3.753,0.952,7.96-0.136,10.781-2.788c0.174,3.169-1.194,6.217-1.472,9.379c-0.761,8.647,7.655,16.42,16.335,16.397 			c8.68-0.023,16.5-6.561,19.656-14.647c3.156-8.086,2.221-17.321-0.827-25.448C494.757,516.688,494.13,515.268,492.933,514.431z"/> <path style="fill:#3F3134;" d="M136.19,471.989c0,0-6.235-22.255-1.624-35.912c0,0,257.385,6.694,289.784,35.912l-2.722,25.361 			c0,0-188-36-281-25"/> <polygon style="fill:#F2B705;" points="213.128,432.077 213.128,479.35 264.392,479.35 264.392,435.637 		"/> <g> <path style="fill:#F9CC07;" d="M138.171,174.13c-0.806,1.36-37.239,26.963-39.289,34.692c-2.05,7.729,4.021,10.124,8.841,5.761 				s37.416-32.408,37.416-32.408L138.171,174.13z"/> <polygon style="opacity:0.15;fill:#2D2D2D;" points="137.163,175.003 132.697,178.491 139.219,187.305 146.298,181.173 			"/> <path style="fill:#F2A007;" d="M138.072,165.616c-5.744,1.006-8.242,3.17-5.974,5.174s16.343,18.919,16.343,18.919l5.999-5.196 				L138.072,165.616z"/> <path style="fill:#F9CC07;" d="M164.817,130.544c0,0-32.937,15.967-26.745,35.072l16.368,18.897c0,0,17.177,7.612,37.211-19.662 				L164.817,130.544z"/> <path style="fill:#F2A007;" d="M164.817,130.544c0,0,20.647,1.961,26.834,34.306c0,0-9.503-6.321-15.693-13.536 				C166.589,140.393,164.817,130.544,164.817,130.544z"/> <path style="fill:#F9CC07;" d="M173.763,149.969c0,0,1.322-16.463,9.646-13.726c8.324,2.737,9.615,11.101,7.364,14.153 				c-1.889,2.561-14.603,3.37-14.603,3.37L173.763,149.969z"/> <path style="opacity:0.15;fill:#2D2D2D;" d="M174.311,146.262l-0.565,2.499l4.21,4.86l2.05-0.213 				C180.006,153.409,176.361,149.871,174.311,146.262z"/> </g> </g> </g> <g id="Livello_1"/> </svg></div> <div style="height:100%;width:45%;display:inline-block"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 512 558.151" style="enable-background:new 0 0 512 558.151;" xml:space="preserve" id="christmas_svg"> <g id="_x23_santa"> <circle style="fill:#DAC242;" cx="256" cy="256" r="256"/> <circle style="fill:#FFFFFF;" cx="73.505" cy="345.028" r="10.077"/> <circle style="fill:#FFFFFF;" cx="385.32" cy="73.329" r="9.671"/> <circle style="fill:#FFFFFF;" cx="440.296" cy="312.078" r="5.374"/> <circle style="fill:#FFFFFF;" cx="450.955" cy="190.775" r="5.285"/> <ellipse style="fill:#FFFFFF;" cx="385.32" cy="73.329" rx="5.583" ry="0"/> <ellipse style="fill:#FFFFFF;" cx="61.625" cy="372.338" rx="0" ry="5.039"/> <circle style="fill:#FFFFFF;" cx="63.429" cy="168.309" r="4.902"/> <circle style="fill:#FFFFFF;" cx="429.762" cy="115.692" r="5.16"/> <circle style="fill:#FFFFFF;" cx="486.166" cy="266.328" r="11.891"/> <circle style="fill:#FFFFFF;" cx="120.092" cy="74.483" r="8.664"/> <circle style="fill:#FFFFFF;" cx="90.836" cy="419.024" r="7.254"/> <circle style="fill:#FFFFFF;" cx="150.369" cy="304.233" r="4.071"/> <circle style="fill:#FFFFFF;" cx="27.906" cy="227.565" r="7.86"/> <circle style="fill:#FFFFFF;" cx="221.003" cy="21.85" r="4.152"/> <circle style="fill:#FFFFFF;" cx="307.179" cy="41.973" r="15.972"/> <g> <path d="M236.628,322.35c-16.5-13-114.875,61.279-100.438,149.639c0,0,14.418,24.321,35.975,36.76 			c56.498,32.601,190.522,38.601,233.463,7.61c20.147-14.541,16-19.009,16-19.009s11.436-123.077-54.424-165.033L236.628,322.35z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M216.257,304.552c32.746,25.296,112.598,10.822,136.333-21.186 			c3.43-4.626,7.188-20.716,11.54-24.139c6.042-4.752,14.278,0.412,20.359-5.133c16.72-15.247-2.519-52.722-20.318-34.111 			c10.349-58.699-104.153-86.738-141.267-60.875c-24.237,16.889-25.634,44.529-30.055,70.665 			C188.588,254.961,194.017,287.372,216.257,304.552z" style="stroke:#FFDDAA;;stroke-width:3;fill-opacity:0.2"/> <path d="M257.763,237.9c0,0-0.063-0.268-0.214-0.745c-0.138-0.466-0.45-1.131-0.927-1.869 			c-0.49-0.735-1.229-1.513-2.18-2.211c-0.969-0.706-2.135-1.236-3.542-1.556c-1.337-0.299-2.909-0.371-4.54-0.194 			c-1.618,0.173-3.428,0.584-5.074,1.168c-1.67,0.611-3.312,1.439-4.643,2.528c-1.321,1.093-2.349,2.392-2.75,3.862l-0.046,0.135 			l-0.012,0.034c-0.01,0.037,0.064-0.272,0.03-0.129l-0.005,0.024l-0.021,0.098l-0.083,0.39c-0.055,0.257-0.127,0.558-0.108,0.659 			l-0.034,0.453l0.017,0.572c0.072,0.763,0.222,1.546,0.519,2.311c0.318,0.756,0.708,1.502,1.19,2.202 			c0.503,0.683,1.046,1.347,1.67,1.924c0.612,0.587,1.28,1.101,1.971,1.542c0.707,0.474,1.346,0.765,2.222,1.144 			c1.432,0.594,3.065,1.034,4.539,1.307c3.002,0.552,5.676,0.661,7.542,0.789c1.872,0.106,2.957,0.202,2.957,0.202 			s-0.259,0.078-0.746,0.224c-0.488,0.131-1.201,0.354-2.122,0.565c-1.839,0.438-4.494,1.04-7.87,1.108 			c-1.705,0.005-3.507-0.126-5.562-0.648c-0.851-0.217-1.983-0.587-2.944-1.07c-1.005-0.462-1.951-1.084-2.861-1.786 			c-1.806-1.415-3.418-3.291-4.46-5.628c-0.509-1.172-0.87-2.459-0.988-3.807l-0.043-1.019c0.006-0.363,0.046-0.759,0.08-1.136 			c0.034-0.432,0.092-0.649,0.143-0.914l0.078-0.392l0.019-0.098l0.047-0.202l0.019-0.061l0.078-0.244 			c0.782-2.654,2.603-4.808,4.582-6.253c0.989-0.748,2.043-1.33,3.107-1.8c1.063-0.473,2.133-0.86,3.209-1.121 			c2.18-0.55,4.214-0.744,6.252-0.684c2.025,0.079,3.934,0.481,5.616,1.228c1.618,0.71,2.977,1.794,3.874,2.887 			c0.938,1.084,1.475,2.226,1.768,3.176c0.297,0.958,0.329,1.734,0.315,2.256C257.813,237.633,257.763,237.9,257.763,237.9z" style="stroke:#E8B69C;;stroke-width:3;fill-opacity:0.2"/> <circle style="fill:#2D2D2D;" cx="294.668" cy="219.31" r="3.46"/> <path d="M317.285,260.774c0.487,5.587-3.028,11.031-7.726,13.376c-4.698,2.345-10.276,1.938-15.104-0.076 			c-4.137-1.726-7.953-4.589-12.351-5.19c-4.798-0.656-9.648,1.557-13.328,4.962c-3.68,3.405-6.344,7.909-8.704,12.489 			c1.319-6.067-2.686-12.303-7.804-15.132s-11.078-3.057-16.82-3.228c-9.037-0.268-19.491,0.148-25.042,7.892 			c-2.123-4.002-7.372-5.061-11.277-3.226c-3.905,1.835-6.591,5.855-8.341,10.065c-3.241,7.8-3.064,18.64,3.643,23.138 			c1.316,0.882,3,1.749,3.15,3.419c0.076,0.846-0.292,1.653-0.595,2.437c-3.354,8.674,0.872,18.756,6.785,25.634 			c11.335,13.184,29.301,19.194,45.508,15.222c1.23-0.301,2.476-0.658,3.732-0.55c2.287,0.197,4.197,1.871,6.04,3.355 			c11.94,9.614,27.506,13.747,42.187,11.202c14.681-2.545,28.286-11.735,36.873-24.907c12.344,0.483,25.117-4.054,33.675-13.72 			c8.558-9.666,12.192-24.687,7.63-37.144c-1.935-5.283-5.736-10.303-10.909-11.191c3.622-5.331,5.28-12.19,4.537-18.764 			c-4.674-0.846-10.437-2.875-10.919-7.991c-0.21-2.222,0.735-4.351,1.447-6.448c4.876-14.354,3.389-33.387-0.528-45.571 			c-4.11,3.847-5.406,8.694-7.604,14.08c-2.962,7.258-4.148,15.827-9.55,21.179c-3.467,3.435-8.825,6.02-8.94,11.113 			c-0.039,1.704,0.583,3.349,0.669,5.051c0.234,4.604-3.614,8.498-7.747,9.566S321.421,261.827,317.285,260.774z" style="stroke:#FFFFFF;;stroke-width:3;fill-opacity:0.2"/> <circle style="fill:#2D2D2D;" cx="216.628" cy="213.012" r="3.5"/> <path d="M231.18,233.824c-2.27,4.968-0.763,10.921,0.78,16.216 			c-9.076-2.693-18.519-3.879-27.913-3.503c-2.096,0.084-4.231,0.24-6.26-0.342c-2.03-0.582-3.982-2.064-4.618-4.263 			c-0.551-1.904-0.042-3.972,0.589-5.847c1.357-4.035,3.285-7.87,4.075-12.084c1.025-5.463,0.064-11.171,0.863-16.679 			c0.743-5.117,2.984-9.982,4.421-14.91c1.995-6.843,7.075-12.417,13.845-14.65c5.719-1.886,11.546-3.201,17.5-3.193 			c10.419,0.014,21.463,4.911,26.536,14.924c2.823,5.572,3.554,12.16,3.368,18.537c-0.267,9.132-2.326,18.196-5.993,26.394 			c0.229-2.482-1.277-4.858-3.225-6.132c-1.949-1.275-4.268-1.646-6.527-1.847C242.02,225.856,234.155,227.315,231.18,233.824z" style="opacity:0.02;stroke:#2D2D2D;;stroke-width:3;fill-opacity:0.2"/> <path d="M306.684,254.241c-3.436-3.201-6.356-7.078-10.45-9.379 			c-9.438-5.304-21.139-0.545-30.859,4.222c-2.836,1.391-5.676,2.784-8.391,4.399c-3.792,2.254-7.488,5.214-9.733,8.91 			c-2.242-3.713-5.949-6.684-9.753-8.946c-2.715-1.615-5.555-3.008-8.391-4.399c-9.72-4.768-21.421-9.526-30.859-4.222 			c-4.094,2.301-7.014,6.177-10.451,9.379c-7.835,7.299-18.798,11.121-29.472,10.273c5.606,11.644,16.665,20.163,28.932,24.228 			c12.267,4.065,25.639,3.968,38.309,1.422c5.909-1.187,11.876-2.975,16.605-6.711c2.025-1.6,3.782-3.624,5.059-5.881 			c1.278,2.272,3.044,4.309,5.08,5.917c4.729,3.736,10.696,5.524,16.605,6.711c12.67,2.545,26.042,2.643,38.309-1.422 			c12.267-4.065,23.326-12.584,28.932-24.228C325.482,265.361,314.519,261.54,306.684,254.241z" style="opacity:0.05;stroke:#2D2D2D;;stroke-width:3;fill-opacity:0.2"/> <path d="M225.107,244.312c-9.72-4.768-21.421-9.526-30.859-4.222c-4.094,2.301-7.014,6.177-10.451,9.379 			c-7.835,7.299-18.798,11.12-29.472,10.273c5.606,11.644,16.665,20.163,28.932,24.228c12.267,4.065,25.639,3.968,38.309,1.422 			c5.909-1.187,11.876-2.975,16.605-6.711c4.729-3.736,8.014-9.775,7.067-15.727c-0.999-6.28-6.275-10.992-11.741-14.242 			C230.783,247.097,227.943,245.704,225.107,244.312z" style="stroke:#FFFFFF;;stroke-width:3;fill-opacity:0.2"/> <path d="M362.119,162.68c0.497,0.758,22.373-18.472,11.206-38.783s-51.355-91.701-92.054-80.551 			c-40.699,11.15-36.737,15.08-51.994,26.761s-18.455,22.94-21.575,16.121c-3.12-6.819-11.503-2.524-9.46,10.038 			s2.802,21.929,9.114,23.776c6.313,1.846,13.279-9.382,21.307-7.289c8.028,2.093,10.134,8.674,32.586,6.857 			S349.004,142.689,362.119,162.68z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M232.428,134.35c0,0-0.086-21.597,10.719-27.333 			c23.481-12.465,41.592-20.688,79.753-9.674s51.594,44.906,46.112,53.381c-5.482,8.475-6.664,14.821-11.809,10.789 			C352.058,157.481,291.171,115.238,232.428,134.35z" style="opacity:0.15;stroke:#2D2D2D;;stroke-width:3;fill-opacity:0.2"/> <path d="M211.128,149.452c0,0-17.5-23.103,12.5-30.603s48.5-23.163,93-10.831s60.164,50.277,53.771,59.766 			s-7.771,16.594-13.771,12.08S279.628,128.055,211.128,149.452z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M364.999,219.983c0,0,1.931-6.103,7.598-4.765l8.251,1.294c0,0,0.226-7.903-4.109-16.529 			c-2.464-4.904-7.458-7.962-12.937-8.272c-0.005,0-0.009-0.001-0.012-0.001C363.456,191.683,360.876,212.283,364.999,219.983z" style="stroke:#FFFFFF;;stroke-width:3;fill-opacity:0.2"/> <path d="M261.375,244.348c9.72-4.768,21.421-9.526,30.859-4.222c4.094,2.301,7.014,6.177,10.451,9.379 			c7.835,7.299,18.798,11.12,29.472,10.273c-5.606,11.644-16.665,20.163-28.932,24.228c-12.267,4.065-25.639,3.968-38.309,1.422 			c-5.909-1.187-11.876-2.975-16.605-6.711s-8.014-9.775-7.067-15.727c0.999-6.28,6.275-10.992,11.741-14.242 			C255.699,247.133,258.539,245.74,261.375,244.348z" style="stroke:#FFFFFF;;stroke-width:3;fill-opacity:0.2"/> <path d="M200.6,190.507c0,0,2.528-19.223,51.028-19.44c48.5-0.217,108.864,26.739,113.432,29.761 			c0,0,9.068,0.216,3.568-14.881s-39.084-56.98-110.792-50.538c0,0-48.708-2.059-62.708,29.941S200.6,190.507,200.6,190.507z" style="stroke:#F8F8F8;;stroke-width:3;fill-opacity:0.2"/> <path d="M162.942,83.296c0.729-4.259,1.527-8.686,4.065-12.183c3.126-4.307,8.429-6.511,13.659-7.493 			c10.244-1.922,21.632,0.455,29.037,7.79c7.405,7.335,9.682,19.938,3.837,28.568c-1.219,1.8-2.779,3.423-4.727,4.388 			c-1.75,0.866-3.716,1.161-5.623,1.58c-5.148,1.134-10.024,3.239-15.055,4.814c-5.031,1.575-10.4,2.623-15.564,1.562 			s-10.075-4.616-11.48-9.697c-0.885-3.2-0.329-6.6,0.231-9.872C161.862,89.601,162.402,86.448,162.942,83.296z" style="stroke:#FFFFFF;;stroke-width:3;fill-opacity:0.2"/> <path d="M374.776,238.102c-0.439,0.801-1.677,0.788-2.397,0.227 			c-0.721-0.561-1.07-1.46-1.448-2.292c-0.312-0.687-0.671-1.377-0.735-2.129c-0.184-2.176,2.389-3.835,4.518-3.354 			c2.13,0.481,3.644,2.433,4.398,4.482c0.865,2.352,0.917,5.115-0.386,7.256c-1.303,2.141-4.15,3.391-6.461,2.423 			c2.07-1.379,3.332-3.891,3.2-6.376" style="opacity:0.05;stroke:#2D2D2D;;stroke-width:3;fill-opacity:0.2"/> <path d="M184.628,354.973c0,0-81-54.871-73-87.747s10-22.845,10-22.845l-22-9.126c0,0-20,35.623-14,59.859 			c6,24.236,65.001,76.156,75.001,82.196C170.628,383.35,184.628,354.973,184.628,354.973z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M103.097,221.968c6.976,2.629,13.952,5.257,20.927,7.886c2.003,0.755,4.041,1.529,5.717,2.861 			c5.205,4.135-0.462,17.085-0.591,16.743s-0.584-0.393-0.95-0.39c-13.767,0.098-27.502-5.217-37.616-14.558 			c-2.587-2.389-5.123-5.611-4.439-9.065c0.642-3.243,4.049-5.341,7.346-5.584C96.788,219.617,100.004,220.802,103.097,221.968z" style="stroke:#F8F8F8;;stroke-width:3;fill-opacity:0.2"/> <path d="M395.628,378.153c7.001-4.155,29,12.197,40,27.197s29,76.33,32,87.665c3,11.335,0,21.062,0,21.062 			l21-5.328c0,0-7-90.399-30-115.399s-43.449-32-67.724-35S395.628,378.153,395.628,378.153z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M456.749,501.207c-2.625,2.275-6.12,4.678-5.22,8.034c0.863,3.218,4.638,4.538,7.895,5.24 			c7.713,1.664,15.563,2.689,23.445,3.062c4.497,0.213,9.211,0.166,13.205-1.912c3.994-2.078,6.962-6.789,5.627-11.089 			c-1.425-4.59-6.832-6.658-11.633-6.892c-4.801-0.234-9.735,0.704-14.351-0.636C475.716,497.014,461.274,497.286,456.749,501.207z" style="stroke:#F8F8F8;;stroke-width:3;fill-opacity:0.2"/> <path d="M141.625,176.475c0.114-4.2-0.364-8.52-2.272-12.264c-2.426-4.759-7.179-8.26-12.443-9.166 			s-10.914,0.806-14.791,4.481c-2.453,2.326-4.166,5.314-5.71,8.321c-8.624,16.802-13.04,35.743-12.736,54.627 			c11.657,2.807,23.314,5.614,34.97,8.42c5.557-4.009,11.247-8.158,14.947-13.925c2.63-4.099,4.091-9.516,1.789-13.807 			c-2.303-4.292-9.484-5.566-11.937-1.358C138.503,194.369,141.379,185.466,141.625,176.475z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M492.933,514.431c-1.078-0.755-2.45-0.918-3.759-1.059c-5.375-0.577-10.75-1.153-16.125-1.73 			c-2.251-0.242-4.584-0.475-6.731,0.243c-2.119,0.708-3.827,2.267-5.467,3.785c-5.64,5.219-11.806,12.012-10.053,19.494 			c3.753,0.952,7.96-0.136,10.781-2.788c0.174,3.169-1.194,6.217-1.472,9.379c-0.761,8.647,7.655,16.42,16.335,16.397 			c8.68-0.023,16.5-6.561,19.656-14.647c3.156-8.086,2.221-17.321-0.827-25.448C494.757,516.688,494.13,515.268,492.933,514.431z" style="stroke:#EF4B4C;;stroke-width:3;fill-opacity:0.2"/> <path d="M136.19,471.989c0,0-6.235-22.255-1.624-35.912c0,0,257.385,6.694,289.784,35.912l-2.722,25.361 			c0,0-188-36-281-25" style="stroke:#3F3134;;stroke-width:3;fill-opacity:0.2"/> <polygon style="fill:#F2B705;" points="213.128,432.077 213.128,479.35 264.392,479.35 264.392,435.637 		"/> <g> <path d="M138.171,174.13c-0.806,1.36-37.239,26.963-39.289,34.692c-2.05,7.729,4.021,10.124,8.841,5.761 				s37.416-32.408,37.416-32.408L138.171,174.13z" style="stroke:#F9CC07;;stroke-width:3;fill-opacity:0.2"/> <polygon style="opacity:0.15;fill:#2D2D2D;" points="137.163,175.003 132.697,178.491 139.219,187.305 146.298,181.173 			"/> <path d="M138.072,165.616c-5.744,1.006-8.242,3.17-5.974,5.174s16.343,18.919,16.343,18.919l5.999-5.196 				L138.072,165.616z" style="stroke:#F2A007;;stroke-width:3;fill-opacity:0.2"/> <path d="M164.817,130.544c0,0-32.937,15.967-26.745,35.072l16.368,18.897c0,0,17.177,7.612,37.211-19.662 				L164.817,130.544z" style="stroke:#F9CC07;;stroke-width:3;fill-opacity:0.2"/> <path d="M164.817,130.544c0,0,20.647,1.961,26.834,34.306c0,0-9.503-6.321-15.693-13.536 				C166.589,140.393,164.817,130.544,164.817,130.544z" style="stroke:#F2A007;;stroke-width:3;fill-opacity:0.2"/> <path d="M173.763,149.969c0,0,1.322-16.463,9.646-13.726c8.324,2.737,9.615,11.101,7.364,14.153 				c-1.889,2.561-14.603,3.37-14.603,3.37L173.763,149.969z" style="stroke:#F9CC07;;stroke-width:3;fill-opacity:0.2"/> <path d="M174.311,146.262l-0.565,2.499l4.21,4.86l2.05-0.213 				C180.006,153.409,176.361,149.871,174.311,146.262z" style="opacity:0.15;stroke:#2D2D2D;;stroke-width:3;fill-opacity:0.2"/> </g> </g> </g> <g id="Livello_1"/> </svg></div> </div> <footer> <blockquote style="background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px;"> <h3 style="margin:0 0 0 0;">Source:</h3> article: <a href="http://www.smashingmagazine.com/2014/11/25/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/">Smashing Magazine: Freebie Christmas Icon Set</a> <br/> artist: <a href="http://mokreo.com/">Manuela Langella</a> </blockquote> </footer> <script>var vChristmas = new Vivus('christmas_svg',{type: 'delayed',start:'autostart',delay:0,duration:500})</script> </body> </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment