<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="xmas" x="0" y="0" viewBox="0 0 270.1 140.1" xml:space="preserve" enable-background="new 0 0 270.1 140.1">
<style>
.s0{
overflow:visible;
}
.s1{
clip-path:url(#SVGID_1_);
fill:#D73F22;
}
.s2{
clip-path:url(#SVGID_1_);
fill:#4C4C4E;
}
.s3{
fill:#FCB51D;
}
.s4{
fill:#B61F2B;
}
</style>
<g id="Presents">
<g id="PresentB" class="box">
<ellipse id="ShadowPresent" class="PresentBoxShadow" cx="188.2" cy="117.3" rx="81.8" ry="22.8" fill="#81572A"/>
<g class="PresentBox">
<g id="Logo" class="socialLinkP">
<a xlink:href="https://ihatetomatoes.net/svg-christmas/" target="_blank">
<circle cx="182.3" cy="96.3" r="18.5" fill="#FFF"/>
<defs>
<rect id="SVGID_5_" x="146.7" y="61.9" transform="matrix(-1 5.395776e-03 -5.395776e-03 -1 365.5186 194.4719)" width="71.6" height="71.6"/>
</defs>
<clipPath id="SVGID_1_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<path d="M181.1 90.8c-3 0.1-5.5 2.6-5.5 5.6 0 1.7 0.6 3.2 1.7 4.3l8.1-8.2C184.3 91.4 182.8 90.7 181.1 90.8" class="s1"/>
<path d="M179.6 100.6c1.1 1.1 2.6 1.7 4.3 1.7 3-0.1 5.5-2.6 5.5-5.6 0-1.7-0.6-3.2-1.7-4.3L179.6 100.6z" class="s1"/>
<polygon points="190 102.8 188.9 101.7 194 96.5 188.8 91.3 190 90.2 196.3 96.5 " class="s2"/>
<polygon points="175 102.9 168.7 96.6 174.9 90.3 176.1 91.4 170.9 96.6 176.1 101.7 " class="s2"/>
<defs>
<rect id="SVGID_7_" x="144.9" y="59.2" transform="matrix(-1 5.395776e-03 -5.395776e-03 -1 365.5132 192.4719)" width="75.1" height="75.2"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<path d="M180 88.9c0-0.1 0-0.3 0-0.4 0-0.1 0.1-0.3 0-0.4 -0.1-0.2-0.4-0.2-0.5 0 -0.2 0.4-0.2 0.9-0.2 1.3 -0.6 0.3-1.6 0.2-2.3 0 0.5 0.4 1.1 0.6 1.7 0.7 -0.6 0.3-1.2 0.7-1.7 1.1 1.3-0.9 3-0.7 4.2 0.3 -0.1-0.4-0.3-0.8-0.6-1.2 0.7-0.5 1.5-0.7 2.4-0.6 -0.7-0.2-1.3-0.3-2-0.2 0.3-0.2 0.6-0.4 0.8-0.7 -0.6 0.3-1.1 0.4-1.7 0.4C180.1 89.1 180 88.9 180 88.9" style="clip-path:url(#SVGID_2_);fill:#94D500"/>
</a>
</g>
<rect x="146.8" y="72" width="66.2" height="49.5" fill="#D53938"/>
<rect x="146.8" y="72.7" width="66.2" height="3.6" fill="#B6282E" class="boxTopShadow"/>
<rect x="138" y="57.9" width="83.9" height="15.1" fill="#E85E4D" class="boxTop"/>
<rect x="185" y="57.5" width="10.4" height="64" fill="#FCB51D" class="ribbonSide"/>
<g class="PresentBoxRibbon">
<polygon points="190.7 57.2 175.9 40.8 164.8 52.7 184.4 63.6 " fill="#FCB51D"/>
<polygon points="184.4 63.5 163.9 61.1 164.8 52.6 " fill="#B61F2B"/>
<polygon points="190.5 57.3 204.6 40.2 216.2 51.5 197.2 63.4 " fill="#FCB51D"/>
<polygon points="197.2 63.4 217.5 60 216.2 51.5 " fill="#B61F2B"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<footer>
<p><a href="https://ihatetomatoes.net/svg-christmas/" target="_blank"> View the Full Version of Merry SVG Christmas</a></p>
</footer>body {
font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
background-color: #996a30;
color: #222222;
}
.wrapper {
width: 300px;
margin: 80px auto 0 auto;
z-index: 1;
position: relative;
}
#xmas {
width: 300px;
}
.box {
cursor: pointer;
}
footer {
text-align: center;
position: fixed;
top: 0;
left: 30px;
right: 30px;
font-size: 14px;
opacity: 0.7;
z-index: 999;
}
footer a {
text-decoration: none;
color: #fff;
}
footer a:hover {
text-decoration: underline;
}/*
Merry SVG Christmas from the guy who hates tomatoes
https://ihatetomatoes.net/svg-christmas/
https://twitter.com/ihatetomatoes
*/
/* Global Variables */
var $Presents = $('#Presents'),
$box = $('.box'),
$PresentB = $('#PresentB'),
$sIcons = $('.sIcon'),
$socialLinkP = $('.socialLinkP');
/* Jump Presents */
tlJumpPresent = new TimelineMax({paused: true});
$box.mouseenter(function(){
$PresentBox = $(this).find('.PresentBox'),
$PresentBoxShadow = $(this).find('.PresentBoxShadow');
tlJumpPresent
.to($PresentBox, 0.5, {scaleX: 0.8, transformOrigin:"bottom center", y: -20, ease:Power4.easeInOut})
.to($PresentBox, 0.2, {scaleX: 1, transformOrigin:"bottom center", y: 0, ease:Bounce.easeOut})
.to($PresentBoxShadow, 0.5, {scaleX: 0.8, transformOrigin:"bottom center", ease:Power4.easeInOut}, "0")
.to($PresentBoxShadow, 0.2, {scaleX: 1, transformOrigin:"bottom center", ease:Bounce.easeOut}, "0.5");
tlJumpPresent.play();
});
$box.click(function(){
event.preventDefault();
$thisBox = this,
$PresentBoxRibbon = $(this).find('.PresentBoxRibbon'),
$PresentBoxTop = $(this).find('.boxTop'),
$PresentBoxTopShadow = $(this).find('.boxTopShadow'),
$PresentRibbonSide = $(this).find('.ribbonSide'),
$socialLinkP = $(this).find('.socialLinkP');
/* Open Present */
tlOpenPresent = new TimelineMax({paused: true});
tlOpenPresent
.to($PresentBoxRibbon, 0.4, {yPercent: 252, ease:Power4.easeInOut})
.to($PresentBoxTop, 0.4, {yPercent: -80, ease:Power4.easeOut}, "0")
.to($PresentBoxTopShadow, 0.2, {autoAlpha: 0}, "0")
.to($PresentRibbonSide, 0.4, {scaleY: 0.3, transformOrigin:"bottom center", onComplete: stopHover, onCompleteParams: [$thisBox]}, "0.2")
.to($PresentBoxTop, 0.4, {rotation: -90, transformOrigin:"left center", ease:Power4.easeInOut}, "0")
.to($PresentBoxTop, 0.3, {yPercent: 400, transformOrigin:"left center", ease:Bounce.easeOut}, "0.4")
.to($PresentBoxTop, 0.4, {rotation: -180, transformOrigin:"left center", ease:Power4.easeIn}, "0.7")
.to($socialLinkP, 0.6, {scale: 1.4, yPercent: -130, transformOrigin:"top center", ease:Power4.easeInOut}, "-=0.4");
tlOpenPresent.play();
function stopHover(element){
$(element).unbind('mouseenter click');
$(element).css('cursor: default');
}
});
External CSS
This Pen doesn't use any external CSS resources.