HTML
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="design" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 27.9 54.5" style="enable-background:new 0 0 27.9 54.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
.st1{fill:#768B96;}
</style>
<title>Asset 8</title>
<rect id="design-line" y="53.4" class="st0" width="22.2" height="1"/>
<g id="pencil">
<path class="st1" d="M27.9,9.7H16.4v32l0,0v0.4c0,0.1,0,0.1,0,0.2l4,9.3l0,0l1.1,2.6c0.1,0.3,0.4,0.4,0.7,0.3
c0.1-0.1,0.2-0.1,0.3-0.3l1.1-2.6l0,0l4.1-9.3c0-0.1,0-0.1,0-0.2v-0.4l0,0L27.9,9.7z M23.4,49.9c-0.3-0.7-0.7-1.2-1.2-1.2
s-0.9,0.5-1.2,1.2l-3.3-7.6l2-2v0.1l2.6,3l2.6-3v-0.1l0,0l2,2L23.4,49.9z"/>
<path class="st1" d="M27.9,8.5V3.7c0-2-1.6-3.7-3.6-3.7c0,0,0,0,0,0h-4.2c-2,0-3.6,1.6-3.6,3.6c0,0,0,0,0,0v4.8H27.9z"/>
</g>
</svg>
CSS
#design {
max-height: 200px;
}
#pencil {
transform: translate(-22px);
animation: pencil 1s ease-in-out 0s forwards;
}
#design-line {
transform: scalex(0);
transform-origin: left;
animation: design 1s ease-in-out 0s forwards;
}
@keyframes pencil {
from { transform: translate(-22px); }
to { transform: translate(0px); }
}
/* Firefox < 16 */
@-moz-keyframes pencil {
from { transform: translate(-22px); }
to { transform: translate(0px); }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes pencil {
from { transform: translate(-22px); }
to { transform: translate(0px); }
}
/* Internet Explorer */
@-ms-keyframes pencil {
from { transform: translate(-22px); }
to { transform: translate(0px); }
}
/* Opera < 12.1 */
@-o-keyframes pencil {
from { transform: translate(-22px); }
to { transform: translate(0px); }
}
@keyframes design {
from { transform: scalex(0); }
to { transform: scalex(1); }
}
/* Firefox < 16 */
@-moz-keyframes design {
from { transform: scalex(0); }
to { transform: scalex(1); }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes design {
from { transform: scalex(0); }
to { transform: scalex(1); }
}
/* Internet Explorer */
@-ms-keyframes design {
from { transform: scalex(0); }
to { transform: scalex(1); }
}
/* Opera < 12.1 */
@-o-keyframes design {
from { transform: scalex(0); }
to { transform: scalex(1); }
}
