<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/glendonray/pen/gXYWLe" />
<style class="cp-pen-styles">#text {
fill: #443635;
}
#plant{
fill: #bc955c;
}
#cypress-pointe-logo {
width: 300px;
display: block;
margin: 1em auto;
overflow: visible;
animation: logo ease-in-out 3s;
}
@keyframes logo {
0% {
filter: blur(20px);
}
100% {
filter: blur(0px);
}
}
#petal-l {
transform-origin: 100% 100%;
animation: petal-l ease-in-out 2s;
animation-delay: 0;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes petal-l {
0% {
transform: rotate(-45deg);
opacity: 0;
}
100% {
transform: initial;
opacity: 1;
}
}
#petal-r {
transform-origin: 0% 100%;
animation: petal-r ease-in-out 2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes petal-r {
0% {
transform: rotate(45deg);
opacity: 0;
}
100% {
transform: initial;
opacity: 1;
}
}
#petal-top {
transform-origin: 50% 100%;
animation: petal-top ease-in-out 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes petal-top {
0% {
transform: translate(0, 15px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
#text #cypress,
#text #pointe {
animation: text ease-in-out 2s;
opacity: 0;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
@keyframes text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text #cremation {
animation: cremation ease-in-out 2s;
opacity: 0;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes cremation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style></head><body>
<svg id="cypress-pointe-logo" class="run-animation" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 230.06 217.73">
<title>cypress-logo</title>
<g id="plant">
<path id="petal-r" class="cls-2" d="M190.74,43.83l-.41-3.16-3.16-.41a86.08,86.08,0,0,0-11-.72c-19.56,0-37.37,7-50.14,19.8-12.11,12.11-19.08,28.91-19.72,47.46l0,35.28h8.24V109.92l0-1.54c.2-17.1,6.21-32,17.36-43.18s26.93-17.38,44.28-17.38c2.21,0,4.48.1,6.75.3,1.8,20.11-4.24,38.19-17.08,51C155,109.93,140,116,123.43,116.47v8.3c18.81-.45,35.87-7.41,48.23-19.77,15.2-15.19,22.15-37.49,19.08-61.17" transform="translate(0.37 -0.43)"/>
<path id="petal-top" class="cls-2" d="M111,10.29c12.42,8.39,21.34,18.61,26,29.78a78.72,78.72,0,0,1,7.43-3.5C138.73,23.19,128,11.24,113.24,1.85L111,.43l-2.23,1.41C94,11.25,83.31,23.2,77.55,36.57A78.54,78.54,0,0,1,85,40.07C89.67,28.9,98.59,18.68,111,10.29" transform="translate(0.37 -0.43)"/>
<path id="petal-l" class="cls-2" d="M56.23,99.15c-12.83-12.84-18.88-30.93-17.07-51,2.27-.2,4.53-.3,6.75-.3C63.25,47.82,79,54,90.19,65.2a57.41,57.41,0,0,1,11.58,16.69,76.89,76.89,0,0,1,4.1-9.75A62.94,62.94,0,0,0,96,59.34C83.27,46.57,65.47,39.53,45.91,39.53a85.87,85.87,0,0,0-11,.73l-3.17.41-.41,3.16c-3.07,23.68,3.89,46,19.09,61.17,12,12.06,28.59,19,46.86,19.74v-8.29c-16-.73-30.52-6.8-41-17.3" transform="translate(0.37 -0.43)"/>
</g>
<g id="text">
<g id="pointe">
<g id="tm">
<polygon class="cls-1" points="229.28 169.34 228.01 171.31 226.75 169.34 225.97 169.34 225.97 173.51 226.69 173.51 226.69 170.53 227.99 172.48 228.01 172.48 229.33 170.52 229.33 173.51 230.06 173.51 230.06 169.34 229.28 169.34"/>
<polygon class="cls-1" points="221.48 169.34 221.48 170.02 222.8 170.02 222.8 173.51 223.54 173.51 223.54 170.02 224.86 170.02 224.86 169.34 221.48 169.34"/>
</g>
<path id="e2" class="cls-1" d="M218.45,182.93c-.26-2.58-1.78-4.59-4.41-4.59-2.44,0-4.16,1.88-4.52,4.59Zm-12.89,1.28v-.06c0-5,3.53-9.07,8.51-9.07,5.54,0,8.34,4.35,8.34,9.36a11.23,11.23,0,0,1-.07,1.13H209.55a4.86,4.86,0,0,0,5,4.41,6.31,6.31,0,0,0,4.72-2.08l2.34,2.08a8.8,8.8,0,0,1-7.12,3.27,8.69,8.69,0,0,1-8.94-9" transform="translate(0.37 -0.43)"/>
<path id="t" class="cls-1" d="M195.94,188v-9.17h-2.21v-3.43h2.21v-4.78h4v4.78h4.69v3.43h-4.69v8.54a1.91,1.91,0,0,0,2.15,2.18,5.3,5.3,0,0,0,2.47-.6v3.27a6.91,6.91,0,0,1-3.59.89c-2.94,0-5-1.29-5-5.11" transform="translate(0.37 -0.43)"/>
<path id="n" class="cls-1" d="M176.48,175.44h4v2.67a6.32,6.32,0,0,1,5.44-3c3.93,0,6.2,2.64,6.2,6.66v11.11h-4V183c0-2.7-1.35-4.25-3.72-4.25s-3.93,1.61-3.93,4.32v9.82h-4Z" transform="translate(0.37 -0.43)"/>
<path id="i" class="cls-1" d="M168.6,175.44h4v17.41h-4Zm-.16-6.46h4.28v3.79h-4.28Z" transform="translate(0.37 -0.43)"/>
<path id="o" class="cls-1" d="M162.3,184.25v-.07a5.38,5.38,0,0,0-5.34-5.61,5.22,5.22,0,0,0-5.24,5.54v.07a5.37,5.37,0,0,0,5.31,5.57,5.21,5.21,0,0,0,5.27-5.5m-14.57,0v-.07a9.28,9.28,0,0,1,18.56-.07v.07a9.1,9.1,0,0,1-9.33,9.07,9,9,0,0,1-9.23-9" transform="translate(0.37 -0.43)"/>
<path id="P" class="cls-1" d="M138.2,169.77h-9.1v23.08h4.06V173.46h4.71c3,0,5,1.42,5,4.13v.06c0,2.41-1.91,4.12-5,4.12h-3.19v3.66h3.06c5.08,0,9.23-2.7,9.23-7.88v-.06c0-4.65-3.36-7.72-8.77-7.72" transform="translate(0.37 -0.43)"/>
</g>
<g id="cremation">
<polygon id="N-2" data-name="N" class="cls-1" points="165.31 208.93 165.31 214.91 160.68 208.93 159.27 208.93 159.27 217.58 160.76 217.58 160.76 211.43 165.53 217.58 166.81 217.58 166.81 208.93 165.31 208.93"/>
<path id="O-2" data-name="O" class="cls-1" d="M151.37,213.71v0a3,3,0,0,0-2.94-3.07,2.91,2.91,0,0,0-2.91,3v0a3,3,0,0,0,2.94,3.07,2.91,2.91,0,0,0,2.91-3m-7.45,0v0a4.53,4.53,0,0,1,9.05,0v0a4.53,4.53,0,0,1-9.05,0" transform="translate(0.37 -0.43)"/>
<rect id="I-2" data-name="I" class="cls-1" x="136.4" y="208.93" width="1.52" height="8.65"/>
<polygon id="T-2" data-name="T" class="cls-1" points="122.73 208.93 122.73 210.34 125.48 210.34 125.48 217.58 127.01 217.58 127.01 210.34 129.75 210.34 129.75 208.93 122.73 208.93"/>
<path id="A" class="cls-1" d="M113.12,211.11l1.5,3.46h-3Zm-.68-1.81L108.63,218h1.56l.89-2.09h4.09l.88,2.09h1.61l-3.81-8.71Z" transform="translate(0.37 -0.43)"/>
<polygon id="M" class="cls-1" points="101.02 208.93 98.39 213.02 95.75 208.93 94.13 208.93 94.13 217.58 95.63 217.58 95.63 211.4 98.34 215.45 98.39 215.45 101.12 211.38 101.12 217.58 102.64 217.58 102.64 208.93 101.02 208.93"/>
<polygon id="E" class="cls-1" points="80.1 208.93 80.1 217.58 86.58 217.58 86.58 216.22 81.62 216.22 81.62 213.9 85.96 213.9 85.96 212.54 81.62 212.54 81.62 210.29 86.52 210.29 86.52 208.93 80.1 208.93"/>
<path id="R" class="cls-1" d="M68.78,213.65c1.09,0,1.78-.57,1.78-1.45v0c0-.93-.67-1.44-1.79-1.44H66.56v2.91ZM65,209.36h3.85a3.51,3.51,0,0,1,2.5.86,2.62,2.62,0,0,1,.72,1.87v0a2.6,2.6,0,0,1-2.06,2.62L72.39,218h-1.8l-2.13-3h-1.9v3H65Z" transform="translate(0.37 -0.43)"/>
<path id="C" class="cls-1" d="M49.84,213.71v0a4.37,4.37,0,0,1,4.46-4.47,4.52,4.52,0,0,1,3.39,1.35l-1,1.12a3.44,3.44,0,0,0-2.42-1.07,2.91,2.91,0,0,0-2.85,3v0a2.91,2.91,0,0,0,2.85,3.07,3.38,3.38,0,0,0,2.48-1.11l1,1a4.49,4.49,0,0,1-3.51,1.53,4.36,4.36,0,0,1-4.4-4.45" transform="translate(0.37 -0.43)"/>
</g>
<g id="cypress">
<path id="s2" class="cls-1" d="M102.63,190.58l1.78-2.71a9.81,9.81,0,0,0,5.7,2.14c1.72,0,2.7-.72,2.7-1.87v-.07c0-1.35-1.84-1.81-3.89-2.44-2.57-.72-5.44-1.78-5.44-5.11v-.07c0-3.29,2.74-5.3,6.2-5.3a12.07,12.07,0,0,1,6.4,2L114.5,180a10.18,10.18,0,0,0-4.92-1.65c-1.55,0-2.44.73-2.44,1.72v.06c0,1.29,1.88,1.81,3.93,2.47,2.54.8,5.4,1.95,5.4,5.08v.07c0,3.66-2.83,5.47-6.46,5.47a12.23,12.23,0,0,1-7.38-2.6" transform="translate(0.37 -0.43)"/>
<path id="s1" class="cls-1" d="M87.76,190.58l1.78-2.71a9.81,9.81,0,0,0,5.7,2.14c1.72,0,2.7-.72,2.7-1.87v-.07c0-1.35-1.84-1.81-3.88-2.44-2.58-.72-5.45-1.78-5.45-5.11v-.07c0-3.29,2.74-5.3,6.2-5.3a12.07,12.07,0,0,1,6.4,2L99.63,180a10.18,10.18,0,0,0-4.92-1.65c-1.55,0-2.44.73-2.44,1.72v.06c0,1.29,1.88,1.81,3.93,2.47,2.54.8,5.4,1.95,5.4,5.08v.07c0,3.66-2.83,5.47-6.46,5.47a12.23,12.23,0,0,1-7.38-2.6" transform="translate(0.37 -0.43)"/>
<path id="e1" class="cls-1" d="M83.17,182.93c-.26-2.58-1.78-4.59-4.41-4.59-2.44,0-4.16,1.88-4.52,4.59Zm-12.89,1.28v-.06c0-5,3.53-9.07,8.51-9.07,5.54,0,8.34,4.35,8.34,9.36a11.23,11.23,0,0,1-.07,1.13H74.27a4.86,4.86,0,0,0,5,4.41A6.31,6.31,0,0,0,84,187.9L86.34,190a8.8,8.8,0,0,1-7.12,3.27,8.69,8.69,0,0,1-8.94-9" transform="translate(0.37 -0.43)"/>
<path id="r-2" data-name="r" class="cls-1" d="M59.7,175.44h4v3.93c1.09-2.61,3.1-4.39,6.16-4.26v4.22h-.23c-3.49,0-5.93,2.28-5.93,6.89v6.63h-4Z" transform="translate(0.37 -0.43)"/>
<path id="p-2" data-name="p" class="cls-1" d="M53.83,184.18v-.07c0-3.36-2.28-5.57-5-5.57a5.25,5.25,0,0,0-5.08,5.57v.07a5.25,5.25,0,0,0,5.08,5.57c2.74,0,5-2.14,5-5.57m-13.95-8.74h4v2.9a7,7,0,0,1,5.94-3.26c4.09,0,8.07,3.23,8.07,9v.07c0,5.77-4,9-8.07,9a7.13,7.13,0,0,1-5.94-3.06v8h-4Z" transform="translate(0.37 -0.43)"/>
<path id="y" class="cls-1" d="M34.44,175.44H38.6l-6.93,17.91c-1.38,3.56-2.93,4.88-5.73,4.88a8.21,8.21,0,0,1-4.12-1.06l1.35-3a4.83,4.83,0,0,0,2.34.66c1.12,0,1.81-.49,2.47-2l-7.25-17.44H25l4.92,12.93Z" transform="translate(0.37 -0.43)"/>
<path id="c-2" data-name="c" class="cls-1" d="M-.37,181.38v-.07a11.67,11.67,0,0,1,11.9-11.93,12,12,0,0,1,9,3.59L18,176a9.22,9.22,0,0,0-6.47-2.87c-4.38,0-7.61,3.63-7.61,8.14v.07c0,4.52,3.2,8.18,7.61,8.18,2.84,0,4.65-1.12,6.63-3l2.61,2.64a12,12,0,0,1-9.37,4.09A11.61,11.61,0,0,1-.37,181.38" transform="translate(0.37 -0.43)"/>
</g>
</g>
</svg>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script >$("#cypress-pointe-logo").click(function() {
var el = $(this),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
//# sourceURL=pen.js
</script>
</body></html>
