Skip to content

Instantly share code, notes, and snippets.

@jackiewu

jackiewu/identity card.markdown

Created October 3, 2015 10:07
Show Gist options
  • Save jackiewu/8b768ea8c3a286c4d4bd to your computer and use it in GitHub Desktop.
Save jackiewu/8b768ea8c3a286c4d4bd to your computer and use it in GitHub Desktop.
Download ZIP
identity card
Raw
identity card.markdown
Raw
index.html
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<circle id="SVGID_1_" cx="150" cy="150" r="103.3"/>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
</defs>
<path id="card" visibility="hidden" d="M104.5,188.8H-99.7c-12.3,0-22.4-10.1-22.4-22.4v-332c0-12.3,10.1-22.4,22.4-22.4h204.1
c12.3,0,22.4,10.1,22.4,22.4v332C126.8,178.7,116.8,188.8,104.5,188.8z"/>
<path id="c" visibility="hidden" d="M0-84.8c46.8,0,84.8,38,84.8,84.8S46.8,84.8,0,84.8S-84.8,46.8-84.8,0S-46.8-84.8,0-84.8"/>
<g id="container" visibility="hidden">
<path id="shadow" opacity="0" fill="rgba(0, 0, 0, 0.1)" d="M104.5,188.8H-99.7c-12.3,0-22.4-10.1-22.4-22.4v-332c0-12.3,10.1-22.4,22.4-22.4h204.1
c12.3,0,22.4,10.1,22.4,22.4v332C126.8,178.7,116.8,188.8,104.5,188.8z"></path>
<path id="morphShape" fill="white" d="M0-84.8c46.8,0,84.8,38,84.8,84.8S46.8,84.8,0,84.8S-84.8,46.8-84.8,0S-46.8-84.8,0-84.8"></path>
<g id="me">
<circle id="me-circle-1" fill="#61AF93" cx="150" cy="150" r="118.2"/>
<circle id="me-circle-2" fill="#FFFFFF" cx="150" cy="150" r="103.3"/>
<g clip-path="url(#SVGID_2_)">
<g id="me-character">
<path fill="#545554" d="M192,729.8c0,0,2.4,37.5,3.8,44.3s9.5,17.7,25.2,15.3c15.7-2.4,14.2-14.2,14.3-20.8
c0.1-10.6-13.5-45.9-13.5-45.9"/>
<path fill="#556987" d="M191,723.7c0,0,2,10.9,2.7,24.2c0.7,13.3,4.8,29.2,21.1,28.4s19.8-5.9,18.4-17.5
c-1.4-11.6-13.6-41.6-13.6-41.6L191,723.7z"/>
<path fill="#CCCBCB" d="M195.8,719.3c0,0,9.5,14.1,10.6,27.5c1,13.4-3,26.4-3,26.4s3.5,3.3,11.5,3.2c10-0.1,16.2-3.9,15.3-4.2
c0,0-15-12.9-17.2-22.2c-2.2-9.2-0.7-38.9-0.7-38.9L195.8,719.3z"/>
<path fill="#545554" d="M176.3,725.4c0,0-0.3,11-4.1,30.9s-8,33.2-24.6,33.5c-16.6,0.3-21.4-8.5-21.4-15.3s2.5-8.6,8.2-18.2
c5.8-9.6,14.6-22.1,16.8-30.9c2.2-8.9,2.2-8.9,2.2-8.9L176.3,725.4z"/>
<path fill="#556987" d="M147.6,728.1c0,0,0.1,5.9-7.4,18.6c-7.5,12.7-15.7,21.8-1.4,29.6s26.9-0.9,29-15.2s6.8-35.8,6.8-35.8
L147.6,728.1z"/>
<path fill="#CCCBCB" d="M166.1,722c0,0-5.8,12.6-6.1,26.9c-0.3,14.3,1.3,25.6,1.3,25.6s-5.3,7.7-18.1,3.7
c-11.8-3.7-11.8-9.5-11.8-9.5s15.4-12.9,19.1-25c3.7-12.1,6.8-24.2,6.8-24.2L166.1,722z"/>
<path fill="#262E3A" d="M221.4,459.5l7.5,270.4c0,0-5.5-6.5-21.8-5.8c-16.4,0.7-21.2,6.5-21.2,6.5L162,473.1L221.4,459.5z"/>
<path fill="#262E3A" d="M162.7,472.4l23.9,257.4c0,0,6.1-0.3-11.9,0s-29.7,3.8-29.7,3.8s-6.1,5.5-6.8-3.8
s-30.5-270.4-30.5-270.4L162.7,472.4z"/>
<path fill="#C99065" d="M159.6,181.3c0,0,0.3,7.9,4.1,14.3c3.8,6.4,7.4,8.4,7.4,8.4v33.8c0,0-6.5,11-21.9,9s-19-22.8-19-22.8
l-1.8-18.7c0,0,7.4-4.9,9.2-14.6c1.8-9.7,1.5-12.5,1.5-12.5L159.6,181.3z"/>
<line opacity="0.59" fill="none" stroke="#231F20" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="186.6" y1="729.8" x2="166.3" y2="475.8"/>
<path fill="#A0A4A2" d="M79.3,226c0,0-6.4,2-6.9,14.3c-0.5,12.3-5.9,43-5.9,55c0,12,0.8,30.4,0,34.5c-0.8,4.1-2.6,18.9-2,23.3
c0.5,4.3,3.8,12.8,3.8,29.4s-2.8,19.7-0.5,30.7c2.3,11,4,29.4,4,29.4h32.5l7.5-146.1l-6.1-62L79.3,226"/>
<g>
<defs>
<path id="SVGID_1_" d="M79.3,226c0,0-6.4,2-6.9,14.3c-0.5,12.3-5.9,43-5.9,55c0,12,0.8,30.4,0,34.5c-0.8,4.1-2.6,18.9-2,23.3
c0.5,4.3,3.8,12.8,3.8,29.4s-2.8,19.7-0.5,30.7c2.3,11,4,29.4,4,29.4h32.5l7.5-146.1l-6.1-62L79.3,226"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<path fill="#81CFD1" d="M83.1,453.4c-0.4-2-10.5-48.4-8.9-68.4c0.5-6.5,0.7-12.6,0.9-18.6c0.4-12,0.7-23.3,3.5-34.8
c3.2-13,5.3-32.2,6.6-58.6c1-19.4,4.9-33.9,5.1-34.5l9.9,2.7c0,0.1-3.8,14.1-4.7,32.3c-1.3,27.1-3.6,47-6.9,60.6
c-2.6,10.5-2.9,21.3-3.3,32.7c-0.2,6.1-0.4,12.4-0.9,19.1c-1.5,18.5,8.6,64.9,8.7,65.4L83.1,453.4z"/>
</g>
<g clip-path="url(#SVGID_2_)">
<g>
<path fill="#C04135" d="M84.4,433.2c-0.7,0-1.4,0-2.1-0.1c-13.9-1.5-21.3-8.8-21.6-9.1l7.3-7.2l-3.6,3.6l3.6-3.6
c0.2,0.2,5.3,5.1,15.5,6.2c7.5,0.8,22.8-7.6,30.6-13.1l5.9,8.4C117.7,419.8,98.2,433.2,84.4,433.2z"/>
</g>
<g>
<path fill="#C04135" d="M94.4,406.9c-3.9,0-8.4-0.1-13.1-0.2c-15.2-0.6-24.5-8.3-24.9-8.6l6.6-7.8l-3.3,3.9l3.3-3.9
c0.1,0.1,7.2,5.8,18.8,6.2c13.3,0.5,25.6,0,25.7,0l0.4,10.2C107.5,406.7,102,406.9,94.4,406.9z"/>
</g>
<g>
<path fill="#C04135" d="M88.1,380.6c-16.9,0-30-6-30.6-6.3l4.3-9.3c0.1,0.1,11.6,5.3,26.2,5.3h0c13,0,18.2-6,18.4-6.3l8,6.4
C114.2,370.9,106.4,380.6,88.1,380.6L88.1,380.6z"/>
</g>
<g>
<path fill="#C04135" d="M83.6,357.4c-19.6,0-29.8-9.6-30.2-10l7.1-7.4c0.3,0.3,7.9,7.2,23.2,7.2c0,0,0,0,0,0
c14.6,0,18.9-3.4,19-3.4c-0.2,0.1-0.2,0.2-0.2,0.2l7.3,7.2C108.7,352.2,102.7,357.4,83.6,357.4
C83.7,357.4,83.7,357.4,83.6,357.4z"/>
</g>
<g>
<rect x="57.7" y="319" transform="matrix(0.9176 0.3975 -0.3975 0.9176 135.5945 -5.9067)" fill="#C04135" width="48.7" height="10.2"/>
</g>
<g>
<path fill="#C04135" d="M83.1,310.9c-0.2,0-0.5,0-0.7,0c-16-0.2-26-10.2-26.4-10.7l7.3-7.1l-3.7,3.6l3.6-3.6
c0.1,0.1,7.5,7.5,19.2,7.6c12.8,0.2,22.9-4.4,23-4.5l4.3,9.3C109.3,305.7,97.8,310.9,83.1,310.9z"/>
</g>
<g>
<path fill="#C04135" d="M104,287c-2.8-2.9-6.6-2.8-13.5-2.3c-4.2,0.3-9,0.6-14.3-0.1c-14.1-2-19.6-7.3-20.2-7.9l7.3-7.2
l-3.7,3.6l3.6-3.7c0,0,3.9,3.5,14.4,5c4.2,0.6,8.2,0.3,12.1,0c7.5-0.5,15.3-1.1,21.6,5.4L104,287z"/>
</g>
<g>
<path fill="#C04135" d="M104.7,264.3c-4.7-4.5-26.6-7.8-40.6-8.7l0.6-10.2c6.3,0.4,38,2.7,47.1,11.5L104.7,264.3z"/>
</g>
</g>
</g>
<path fill="#A0A4A2" d="M143.3,214.2l8.2,20.5l19.8,235.9c0,0,2,5.1-8.5,5.2c-10.5,0.2-21-6.5-26.3-5.2c-5.4,1.3-6.4,1.5-14.1,0
c-7.7-1.5-9.3-5.1-14.6-6.9c-5.3-1.8-3.8-4.2-3.8-4.2s1.4-9.4-0.2-28.3c-1.6-18.9-3.9-41.9-2.1-46.8c1.8-4.9,3.6-4.6,1.8-16.9
c-1.8-12.3-3.6-27.4-2.4-41.7c1.2-14.3,3.2-30.2,3.2-30.2s5.4-18.4-3.6-37.6s-21.2-32-21.2-32s2.8-5.1,10.5-6.7
c7.7-1.5,12.5-2.4,18.2-3.8c5.6-1.4,25.2-5.7,29.7-2.9C142.1,215.4,143.3,214.2,143.3,214.2"/>
<path fill="#A0A4A2" d="M179.4,200.3c0,0,11.6,8.7,24.9,12.3c13.3,3.6,24.6,5.3,27.6,8.7s6.1,14.7,6.1,20.1c0,5.5,0,5.5,0,5.5
s2.7,3.4,6.5,17.4c3.8,14,2,14.3,6.8,26.3c4.8,11.9,5.1,12.3,7.8,24.6s2.4,12.3,5.1,23.5c2.7,11.3,0.7,10.6,5.5,19.8
s1.7,2.7,4.8,17.4c3.1,14.7,4.1,33.4,4.1,33.4l-26.3,11.9c0,0-12.3-15.7-14.7-29c-2.4-13.3-6.1-26.3-8.9-32.7
c-2.7-6.5-5.5-7.8-5.5-7.8s3.4,37.5,5.6,51.2s-0.9,20.8,2.9,36.2c3.8,15.3,4.1,22.2,4.1,22.2s-22.9,7.5-28.3,7.8
c-5.5,0.3-3.1,1.4-11.9,2.4c-8.9,1-17.8,1.8-17.8,1.8s-26.2-227.3-23.1-238.5c3.1-11.3,8.3-16.5,12.3-22"/>
<ellipse fill="#C99065" cx="147.9" cy="134.2" rx="41.4" ry="48.4"/>
<circle fill="#231F20" cx="163.7" cy="134.2" r="2.6"/>
<circle fill="#231F20" cx="132.8" cy="134.2" r="2.6"/>
<path fill="#231F20" d="M149.3,168c-2.2,0.2-4.5-0.6-3.1,0.9c1.4,1.5,3.8,1.7,5.5,0.5C154,167.9,151.7,167.9,149.3,168z"/>
<path fill="#75503D" d="M187.3,143.9c0,0-2.7,3.1-4.4,7.2c-1.7,4.1-4.4,5.1-6.1,6.8c-1.7,1.7-5.5,3.1-8.9,2s-8.1-4.8-15.2-4.8
c-7,0-10.8-1.7-12.8,0.3c-2,2-8,3.4-9.6,4.8c-1.6,1.4-7.4,2.1-8.4,0s-6.8-7.2-9.2-10.9c-2.4-3.8-4.5-6.3-6.1-0.7
c-1.6,5.6,3.1,8.4,4.8,12.9c1.7,4.5,3.8,9.6,6.8,12.3c3.1,2.7,5.1,5.5,6.8,7.2c1.7,1.7,1.9,1.7,7.9,4.1
c6.1,2.4,14.9,3.4,21.4,2.7c6.5-0.7,9.5-4.3,13.6-6.8c4.1-2.5,11.3-7,14-10.8c2.7-3.8,5.8-8.6,7.5-14.7
C191,149.4,190.8,138.7,187.3,143.9z M159.6,175c-2.4,0.7-7.8,2.4-11.8,1.4s-7.7,0-10.7-3.8c-3.1-3.8,1.7-7.8,4.4-9.5
c2.7-1.7,6.5,0,11.1,0s4.3,1.5,7,5C162.6,171.8,162,174.3,159.6,175z"/>
<path fill="#3F2B20" d="M125.9,98.2c0,0,4.3,5.5,9.5,6.5c5.2,1,9.1,5.5,15.8,5.5c6.7,0,11.3,1.7,11.3,1.7s2.7,3.1,7.8,5.1
s7.8,0,7.8,0s0.7,8.2,2.4,10.6c1.7,2.4,4.9,3.3,6.8,6.6c1.9,3.3-1.7,4,0,9.8c1.7,5.8,2,11.6,2,11.6s5.5-3.8,5.8-9.9
c0.3-6.1,4.8-25.9,3.1-29.7s-4.1-5.5-4.8-10.2c-0.7-4.8-2.4-8.7-6.8-11.4c-4.4-2.6-7.5-12.2-13.3-12.5
c-5.8-0.3-16.4-3.8-22.5-5.8c-6.1-2-16.5,0.3-20.5,2.7c-4,2.4-5.4,3-10.5,7c-5.1,4-8.2,12.1-13.3,15.6s-4.4,6.4-6.1,14.1
c-1.7,7.7,2,11.8,1.4,18.8s-1,8,0.3,11.1s2.8,13.1,6.1,12.6c3.4-0.5,1-7.8,2-12.3c1-4.4,1-11.4,1-11.4s4.1-5.3,8.2-13.5
c4.1-8.2,4.8-8.5,5.1-13.6C124.8,102,125.9,98.2,125.9,98.2z"/>
<path opacity="0.1" fill="none" stroke="#815943" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="
M137.6,88.7c0,0,4.6,1.5,6.1,3.8c1.5,2.3,2,4.6,2,4.6l6.9,2.3c0,0,6.2-2,8.5,0c2.3,2,2.6,3.1,2.6,3.1"/>
<path opacity="0.1" fill="none" stroke="#815943" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="
M158.6,91c0,0,6.4,1.5,7.7,4.6"/>
<path opacity="0.1" fill="none" stroke="#815943" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="
M129.1,93.1c0,0-4.3-7.7-12.3-2.3"/>
<path fill="#C99065" d="M260.4,429.1c0,0,11.8,17.6,16.4,30.4c4.6,12.9,10.2,31.6,13.8,28.9c3.6-2.7,4.6-9.4,3.6-19.1
c-1-9.7,5.6-3.9,5.6-3.9s0.9-6.9-3.4-14.6c-4.3-7.7-21.2-29.7-21.2-29.7L260.4,429.1z"/>
<path fill="#C99065" d="M84.9,459.5c0,0,3.1,15.3,6.7,31.9c2.2,9.9,7.7,20.2,12.8,22.1s3.6-4.1,0-22.1s-4.1-42-4.1-42H82.9
C82.9,449.3,83.7,454.2,84.9,459.5z"/>
<g>
<defs>
<path id="SVGID_3_" d="M204.3,212.6c-13.3-3.6-24.9-12.3-24.9-12.3l-12.3,12.3c-4,5.6-9.2,10.8-12.3,22
c-0.9,3.2-0.3,23.7,0.9,51.3l-4.3-51.3l-8.2-20.5c0,0-1.2,1.2-5.6-1.6c-4.4-2.8-24,1.5-29.7,2.9c-5.6,1.4-10.5,2.3-18.2,3.8
c-7.7,1.5-10.5,6.7-10.5,6.7s12.3,12.8,21.2,32c9,19.2,3.6,37.6,3.6,37.6s-2,15.9-3.2,30.2c-1.2,14.3,0.7,29.4,2.4,41.7
c1.8,12.3,0,12-1.8,16.9c-1.8,4.9,0.5,27.9,2.1,46.8s0.2,28.3,0.2,28.3s-1.5,2.4,3.8,4.2c5.3,1.8,6.9,5.4,14.6,6.9
c7.7,1.5,8.7,1.3,14.1,0c5.4-1.3,15.9,5.4,26.3,5.2c6.6-0.1,8.3-2.1,8.6-3.6c6.7,0,18.4-0.1,24.5-0.8c8.9-1,6.5-2,11.9-2.4
c5.5-0.3,28.3-7.8,28.3-7.8s-0.3-6.8-4.1-22.2c-3.8-15.3-0.7-22.5-2.9-36.2c-2.2-13.6-5.6-51.2-5.6-51.2s-4.7-40.6-6.8-55
c-2.1-14.4-6.9-23.5-6.9-23.5s0.1-23.8,6.9-35.5c6.8-11.7,15.3-16.4,15.3-16.4S206.4,213.2,204.3,212.6z"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<g>
<path fill="#81CFD1" d="M135.6,291.3c-0.3-1-7.8-24.6-4.2-39.4c3.1-12.4-4.6-33-4.7-33.2l7.7-2.9c0.4,0.9,8.6,23.2,5,38.1
c-2.6,10.4,2,28.7,4,34.9L135.6,291.3z"/>
</g>
<g>
<path fill="#81CFD1" d="M124.6,476.7c-2.8-12.7-4.9-40.8-7.1-70.5c-1-13.9-2.1-28.2-3.2-40.4c-3.4-37.3-1.5-62.9-1.4-63.9
l8.2,0.6c0,0.3-2,26,1.4,62.6c1.1,12.3,2.2,26.7,3.2,40.6c2.1,28.1,4.2,57.2,6.9,69.3L124.6,476.7z"/>
</g>
<g>
<path fill="#81CFD1" d="M144.5,489.3c-0.1-0.4-5.7-37.1-9.4-64.5c-1.8-13.3-0.8-22,0.3-31.2c1.2-10.2,2.5-20.8-0.3-39.4
c-2.8-18.8-5.9-32.1-8.9-44.8c-2.7-11.4-5.2-22.3-7.5-36.5c-4.6-28.8-30.3-57.1-30.6-57.4l6-5.5c1.1,1.2,27.7,30.4,32.6,61.6
c2.2,14,4.7,24.7,7.4,36c3,12.9,6.2,26.3,9,45.5c2.9,19.7,1.6,31.3,0.3,41.5c-1,8.7-2,16.9-0.3,29.2
c3.7,27.4,9.3,64,9.4,64.4L144.5,489.3z"/>
</g>
</g>
<g clip-path="url(#SVGID_4_)">
<g>
<path fill="#81CFD1" d="M194.4,494.7l-8.2-0.6c0-0.2,1.7-22.8,0-48.5c-0.7-10.7-3-23.8-5.3-36.4c-3.4-18.9-6.5-36.7-5.3-49.5
c1.4-14.1-1.6-41.7-3.9-63.8c-1.1-9.9-2.1-19.3-2.6-26.5c-1.7-23.4-2.1-70.2-2.1-70.7l8.2-0.1c0,0.5,0.4,47,2.1,70.1
c0.5,7.1,1.5,16.4,2.6,26.3c2.5,23.7,5.4,50.5,3.9,65.5c-1.1,11.6,2.1,29.7,5.2,47.2c2.3,12.8,4.6,26,5.4,37.2
C196.2,471.4,194.5,493.8,194.4,494.7z"/>
</g>
<g>
<path fill="#81CFD1" d="M212.5,481.4c0-0.4-2.4-39.4-6.8-66.7c-1-6.2-2.3-13.7-3.9-22.4c-5.5-31.1-12.9-73.8-16.6-113.1
c-4.8-51.3,14.7-76.5,15.5-77.5l6.4,5.1l-3.2-2.6l3.2,2.5c-0.2,0.2-18.3,23.9-13.8,71.6c3.7,38.9,11.1,81.4,16.6,112.4
c1.5,8.7,2.9,16.3,3.9,22.5c4.5,27.7,6.9,67.1,6.9,67.5L212.5,481.4z"/>
</g>
</g>
<g clip-path="url(#SVGID_4_)">
<g>
<path fill="#C04135" d="M164.6,222.5c-4.1,0-6.7-0.1-7.1-0.1l0.3-10.2c0.4,0,39,1.2,56.9-6l3.8,9.5
C203.5,221.7,177.3,222.5,164.6,222.5z"/>
</g>
<g>
<path fill="#C04135" d="M86.5,240.5c-4.1,0-7.8-0.2-10.7-0.9l2.4-10c4.3,1,12.6,0.6,20.6,0.2c6.3-0.3,12.8-0.6,18.6-0.4
c9.9,0.4,27.6-5.5,33.6-7.8l3.7,9.5c-1,0.4-23.6,9.1-37.7,8.5c-5.3-0.2-11.5,0.1-17.6,0.4C94.7,240.3,90.4,240.5,86.5,240.5z
"/>
</g>
<g>
<path fill="#C04135" d="M97.1,259.4l-3.5-9.6c0.6-0.2,15.3-5.6,28.4-5.2c11.7,0.3,29.6-2.6,29.7-2.6l1.6,10.1
c-0.8,0.1-19.1,3.1-31.7,2.7C110.5,254.4,97.2,259.3,97.1,259.4z"/>
</g>
<g>
<path fill="#C04135" d="M104.5,278.3c-2.8,0-4.6,0-4.8-0.1L100,268c0.2,0,24.4,0.6,37.8-3c13.9-3.8,19.2-3.1,21.1-2.3
l-3.8,9.5c0,0,0.2,0.1,0.6,0.2c-0.1,0-3.7-0.6-15.1,2.5C129.4,277.9,112.7,278.3,104.5,278.3z"/>
</g>
<g>
<path fill="#C04135" d="M160.2,247.6c-3.9,0-6-0.3-6.3-0.4l1.7-10.1c0,0,3.8,0.6,11.2,0c6.2-0.5,9-1.2,15.9-2.8
c1.9-0.4,4-1,6.6-1.5c12.8-2.9,27.8-0.2,28.4,0l-1.9,10.1l0,0l0,0c-0.3-0.1-13.6-2.5-24.2,0c-2.5,0.6-4.6,1.1-6.5,1.5
c-7,1.6-10.5,2.5-17.4,3C164.6,247.5,162.2,247.6,160.2,247.6z"/>
</g>
<g>
<path fill="#C04135" d="M171.4,275.1c-1.9,0-3.7-0.2-5.6-0.7c-6-1.6-9.1-1.8-9.1-1.8l0.5-10.2c0.4,0,4.1,0.2,11.2,2.1
c3.7,1,8.3-0.2,14.8-1.8c2.5-0.6,5.3-1.3,8.4-2c12.8-2.7,26.5,3.4,27.1,3.6l-4.2,9.3l2.1-4.7l-2.1,4.7c-0.1,0-11.3-5-20.8-3
c-2.9,0.6-5.5,1.3-8,1.9C180.6,273.9,175.9,275.1,171.4,275.1z"/>
</g>
<g>
<path fill="#C04135" d="M146.6,308.6c-4.8,0-11-0.4-18.7-1.4c-20.9-2.8-31.1-0.2-31.2-0.1l-2.7-9.9
c0.5-0.1,12.1-3.3,35.3-0.1c20.5,2.8,28.6,0.2,28.7,0.2c0.6-0.2,10.8-3.2,33.4-5.7c22.7-2.5,31.4-0.1,32.3,0.2l-3,9.8
c-0.1,0-7.7-2.1-28.2,0.2c-20.6,2.3-30.5,5-31.3,5.3C160,307.4,155.6,308.6,146.6,308.6z"/>
</g>
<g>
<path fill="#C04135" d="M95.8,336.2l-1.2-10.2l10.9-1.3c5.5-0.7,9.6-0.1,13.1,0.3c4.1,0.6,7.7,1,13.7-0.3
c12.7-2.8,24.2-2.9,24.7-2.9l0.1,10.2c-0.1,0-11,0.1-22.6,2.6c-7.7,1.7-12.7,1-17.2,0.4c-3.4-0.5-6.3-0.8-10.5-0.3
L95.8,336.2z"/>
</g>
<g>
<path fill="#C04135" d="M162.6,334.9l-0.7-10.2l11-0.7c6.9-0.5,9.6-0.4,13.8-0.2c2.7,0.1,5.9,0.2,11.4,0.2
c12.4,0,20.8-4.2,20.8-4.2l4.7,9.1c-0.4,0.2-10.5,5.3-25.5,5.3c-5.6,0-9-0.1-11.8-0.2c-4-0.1-6.4-0.2-12.8,0.2L162.6,334.9z"
/>
</g>
<g>
<path fill="#C04135" d="M122,361.8c-0.3,0-0.7,0-1,0c-19.8-0.3-30.8-4.1-31.3-4.3l3.4-9.6c0.1,0,10.1,3.4,28.1,3.7
c17.8,0.3,37.6-8.9,37.8-9l4.4,9.3C162.5,352.2,141.9,361.8,122,361.8z"/>
</g>
<g>
<path fill="#C04135" d="M226,363.7c-0.4-0.2-9.3-6-22.6-4c-11.2,1.7-24.7,1.2-33.7,0.8c-3.1-0.1-6.6-0.3-7.5-0.2l-1.2-10.2
c1.6-0.2,4.2-0.1,9.1,0.1c8.6,0.3,21.5,0.9,31.8-0.7c17.5-2.7,29.4,5.3,29.9,5.6L226,363.7z"/>
</g>
<g>
<path fill="#C04135" d="M114.5,395.8c-4.3,0-9.3-0.1-16.2-0.5l0.6-10.2c13.2,0.8,18.9,0.6,26.7,0.3c2.3-0.1,4.8-0.2,7.7-0.3
c6-0.2,13.3-0.9,20.4-1.6c7.6-0.8,14.8-1.5,19.8-1.4c6.1,0.1,8.5-0.4,12.6-1.2c1.6-0.3,3.5-0.7,5.8-1.1c3.6-0.6,5-1,6.2-1.5
c1.6-0.5,3.3-1.1,7.5-1.6c8.3-1.1,22.9,2.8,24.5,3.2l-2.7,9.9c-5.4-1.5-15.8-3.6-20.5-2.9c-3.4,0.5-4.4,0.8-5.8,1.2
c-1.6,0.5-3.3,1.1-7.7,1.8c-2.2,0.4-3.9,0.7-5.5,1c-4.2,0.8-7.5,1.5-14.7,1.4c-4.4-0.1-11.4,0.7-18.7,1.4
c-7.3,0.7-14.8,1.5-21.2,1.7c-2.8,0.1-5.3,0.2-7.6,0.3C122.1,395.7,118.6,395.8,114.5,395.8z"/>
</g>
<g>
<path fill="#C04135" d="M55.7,426.3l-0.2-10.2c0.4,0,39.1-0.7,52.1-0.8c8.9-0.1,17.9-2,28.3-4.2c4.1-0.9,8.4-1.8,12.9-2.6
c13.4-2.5,20.1-1.4,25-0.7c1.1,0.2,2.1,0.3,3,0.4c6.3,0.6,19.2-0.1,34.5-3.6c18.4-4.3,24.7-0.8,26.5,1l-7,7.5
c0.3,0.3,0.5,0.4,0.5,0.4c0,0-4.1-2.1-17.7,1.1c-21.2,5-35.1,4.1-37.7,3.8c-1.2-0.1-2.4-0.3-3.7-0.5
c-4.4-0.7-9.9-1.6-21.6,0.6c-4.4,0.8-8.6,1.7-12.7,2.6c-10.5,2.2-20.4,4.4-30.3,4.4C94.7,425.6,56.1,426.3,55.7,426.3z"/>
</g>
<g>
<path fill="#C04135" d="M120.8,457.7c-11.5,0-21.6-3.3-22.1-3.5l3.2-9.7l-1.6,4.9l1.6-4.9c0.2,0,15.5,5.1,28.2,1.9l1.1-0.3
c14-3.5,23.3-5.8,31-5.5c2.9,0.1,8.7-0.5,14.8-1.2c8-0.8,17-1.8,24-1.7c7.8,0.1,11.4-0.7,15.5-1.6c2.1-0.4,4.2-0.9,6.9-1.3
c8.3-1.1,25.2-0.1,25.9,0l-0.6,10.2c-0.2,0-16.6-1-23.9,0c-2.3,0.3-4.2,0.7-6.1,1.1c-4.4,0.9-8.9,1.9-17.8,1.8
c-6.4-0.1-15.1,0.8-22.8,1.6c-6.8,0.7-12.6,1.3-16.2,1.2c-6.3-0.2-15,2-28.2,5.2l-1.1,0.3
C128.7,457.3,124.6,457.7,120.8,457.7z"/>
</g>
</g>
</g>
<path fill="#994B4B" d="M184.5,223.7c0,0-5.5-11.9-4.8-16.7s0.7-4.8,0.7-4.8s-1-4.4-6.5-4.1c-5.5,0.3-5.9,3.2-5.9,3.2l-6,15.9
c0,0,5.1-9.2,11.3-3.4C179.4,219.6,184.5,223.7,184.5,223.7z"/>
<path fill="#914E4F" d="M162,217.2c0,0-12.9,5.8-12.2,22.5c0.6,16.7,5.8,25.9,6.1,57c0.3,31,0.3,53.9,3.4,78.8
s9.5,100.3,9.5,100.3l14.3-4.1c0,0-16.4-141.2-19.4-171.2s-6.1-55.2-4.4-65.8c1.7-10.6,2.5-16.4,7.2-17.4
c4.7-1,18.1,6.5,18.1,6.5s-11.8-13.1-16-12.8C164.3,211.2,162,217.2,162,217.2z"/>
<path fill="#994B4B" d="M71.9,442.7c0,0-1.5,0,0,6.7c1.5,6.7,0.1,12.1,2.9,12.4c2.7,0.3,28.3,0,28.3,0s1.3-3.3,1.3-9.5
s0-9.6,0-9.6H71.9"/>
<path fill="#994B4B" d="M278.7,409.3L249,423.6c0,0,7.8,6.1,8.2,11.3c0.3,5.1,3.2,4.1,3.2,4.1l25.4-14.8L278.7,409.3"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="202.8" y1="737.2" x2="213.7" y2="727.1"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="213" y1="732.5" x2="199.4" y2="729.8"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="202.8" y1="744.5" x2="215.4" y2="732.5"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="220.2" y1="740.9" x2="201.4" y2="735.2"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="151.3" y1="735.2" x2="165.1" y2="729.8"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="165.1" y1="733.3" x2="152.7" y2="731.2"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="148.7" y1="745.4" x2="162.7" y2="736.5"/>
<line fill="none" stroke="#3A436D" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" x1="163.9" y1="743.7" x2="151.2" y2="738.4"/>
<path fill="#A0A4A2" stroke="#81CFD1" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="M175,292.6
c0,0,2,12.3,2,16.4s1,5.5,5.1,5.5c4.1,0,21.8-2.4,21.8-2.4s1-8.2,0-14c-1-5.8-2.4-8.3-2.4-8.3L175,292.6"/>
<polygon fill="#A0A4A2" stroke="#81CFD1" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" points="
171.1,278.3 173.3,292.6 204,289.5 200.9,278.3 "/>
<path fill="#A0A4A2" stroke="#81CFD1" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="M143.3,295
l2,19.4c0,0-2.7,3.4-10.9,3.4s-19.4-1.7-19.4-1.7l-3.2-19.5L143.3,295"/>
<path fill="#A0A4A2" stroke="#81CFD1" stroke-width="4.1745" stroke-linecap="round" stroke-miterlimit="10" d="M110.5,283.4
l1.3,13.2l31.5-1.6l-2-11.6c0,0-0.7,2.1-9.2,2C123.5,285.5,110.5,283.4,110.5,283.4"/>
<g>
<defs>
<path id="SVGID_5_" d="M231.9,221.3c0,0,6.1,14.7,6.1,20.1c0,5.5,0,5.5,0,5.5s2.7,3.4,6.5,17.4c3.8,14,2,14.3,6.8,26.3
c4.8,11.9,5.1,12.3,7.8,24.6s2.4,12.3,5.1,23.5c2.7,11.3,0.7,10.6,5.5,19.8s1.7,2.7,4.8,17.4c3.1,14.7,4.1,33.4,4.1,33.4
l-26.3,11.9c0,0-12.3-15.7-14.7-29c-2.4-13.3-6.1-26.3-8.9-32.7c-2.7-6.5-5.5-7.8-5.5-7.8s-2.2-36.8-6.8-55
c-4.6-18.2-6.9-23.5-6.9-23.5S209.8,225.4,231.9,221.3z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_6_)">
<g>
<path fill="#81CFD1" d="M273.6,416.5c-0.9-9.6-4.4-36.7-10.5-46.5c-8.8-14.1-14.6-42-19.1-67.5c-0.9-5.3-1.9-10.2-2.9-14.9
c-3.7-18.3-6.5-32.8-4-54l10.2,1.2c-2.3,19.7,0.4,33.4,3.9,50.8c0.9,4.8,1.9,9.7,2.9,15.1c4.1,23.1,9.8,51.2,17.7,63.9
c8.5,13.6,11.7,47.2,12,51L273.6,416.5z"/>
</g>
<g>
<path fill="#81CFD1" d="M259.6,449.5c-2.2-6.8-12.9-41.5-10.5-52.1c0.8-3.4-4-14.2-7.9-22.9c-4.5-10.2-9.7-21.7-11.4-31.7
c-1-5.9-1.7-12.2-2.5-18.9c-1.7-15.3-3.5-31.1-9.2-41.1c-9.2-16-15.3-44.5-15.6-45.7l10-2.1c0.1,0.3,6.1,28.1,14.4,42.7
c6.8,11.9,8.7,28.8,10.5,45.1c0.7,6.5,1.4,12.6,2.4,18.2c1.5,8.8,6.4,19.7,10.7,29.3c5.6,12.6,10.1,22.6,8.5,29.3
c-1.3,5.8,5.2,30.8,10.3,46.7L259.6,449.5z"/>
</g>
</g>
<g clip-path="url(#SVGID_6_)">
<g>
<path fill="#C04135" d="M208.6,263.6l-8.3-6c13.9-19.1,39.2-27.9,40.2-28.2l3.3,9.7C243.6,239.1,220.5,247.2,208.6,263.6z"/>
</g>
<g>
<path fill="#C04135" d="M217.1,402.2l-0.9-10.2c0.2,0,19.1-1.8,38.6-7.2c17-4.7,21.3-9.5,21.4-9.5c-0.1,0.1-0.1,0.2-0.1,0.2
l8.3,6c-0.9,1.2-6.3,7.6-26.8,13.2C237.1,400.3,217.9,402.1,217.1,402.2z"/>
</g>
<g>
<path fill="#C04135" d="M215.2,352.5l-2.8-9.9c0.1,0,11.6-3.3,20.6-9.6c10.5-7.3,33.8-11.9,36.4-12.4l1.9,10.1
c-6.5,1.2-25.1,5.5-32.5,10.7C228.5,348.7,215.8,352.3,215.2,352.5z"/>
</g>
<g>
<path fill="#C04135" d="M226.8,372.1l-3.7-9.5c0.2-0.1,6.2-2.4,19.8-7.2c13.2-4.6,28.6-12.3,28.7-12.4l4.6,9.1
c-0.7,0.3-16.2,8.1-30,12.9C232.9,369.7,226.8,372.1,226.8,372.1z"/>
</g>
<g>
<path fill="#C04135" d="M211.4,328.7l-6-8.3c0.1-0.1,11-8,24-16.9c14.6-10,31.3-6.9,32-6.7l-2,10c-0.1,0-13.3-2.4-24.3,5.1
C222.3,320.7,211.5,328.6,211.4,328.7z"/>
</g>
<g>
<path fill="#C04135" d="M210.1,294.9l-3.4-9.6c15.2-5.4,41.1-15.5,46-20l6.9,7.6C251.7,280,217,292.4,210.1,294.9z"/>
</g>
<g>
<path fill="#C04135" d="M205.1,274l-2.3-10c0.3-0.1,27.2-6.5,42.7-20.8l6.9,7.5C235,266.9,206.3,273.8,205.1,274z"/>
</g>
</g>
</g>
<polygon fill="#994B4B" points="143.3,214.2 122.8,234.6 112.9,212.6 128.1,199.9"/>
</g>
</g>
</g>
</g>
</svg>
Raw
script.js
var select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
p1 = select('#c').getAttribute('d'),
p3 = select('#card').getAttribute('d');
var tl = new TimelineMax({paused:false, repeat:-1, yoyo:false,repeatDelay:1, delay:2 });
tl.set('#container', {x: 306, y: 181, scaleX: 0, scaleY: 0, transformOrigin: '80px 200px 0px', visibility: 'visible'})
.set('#me', {x: -150, y: -150})
.set('#me-character', {y: 200})
.set('#me-circle-1', {scaleX: 0, scaleY: 0, transformOrigin: '118 118'})
.set('#me-circle-2', {scaleX: 0, scaleY: 0, transformOrigin: '103 103'})
.to('#container', 1, {y: '+=200', scaleX: 1, scaleY: 1, ease: Quad.easeIn})
.to('#container', 0.2, {y: '+=100', ease: Sine.easeIn})
.to('#container', 0.1, {scaleY: 0.5, ease: Quad.easeIn}, '-=0.1')
.to('#container', 0.2, {scaleX: 1, scaleY: 1, ease: Quad.easeOut})
.to('#container', 0.5, {y: '-=200', ease: Sine.easeOut}, '-=0.1')
.to('#container', 0.3, {y: '+=200', ease: Circ.easeIn})
.to('#container', 0.1, {scaleY: 0.5, ease: Quad.easeIn}, '-=0.1')
.to('#container', 0.1, {scaleX: 1, scaleY: 1, ease: Quad.easeOut})
.to('#container', 0.7, {y: '-=200', ease: Circ.easeOut}, '-=0.1')
.to('#container', 0.2, {
scaleX: 1.5,
scaleY: 1.5,
y: 380,
ease: Circ.easeInOut
})
.to('#morphShape', 0.8, {
morphSVG:{shape:p3},
ease: Back.easeOut
}, '-=0.2')
.set('#shadow', {opacity: 1})
.to('#shadow', 0.2, {x: '-=20', y: '+=20', ease: Power1.easeOut})
.to('#me-circle-1', 0.5, {scaleX: 1, scaleY: 1, ease: Quad.easeOut}, '-=0.5')
.to('#me-circle-2', 0.5, {scaleX: 1, scaleY: 1, ease: Quad.easeOut}, '-=0.3')
.to('#me-character', 0.7, {y: 0, ease: Back.easeOut})
.to('#container', 0.2, {rotation: '20deg', ease: Quad.easeIn, delay: 2})
.to('#container', 0.7, {y: 2000, ease: Quad.easeIn}, '-=0.1')
tl.timeScale(3);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
Raw
style.css
body{
margin: 0;
background-color: #ffddac;
overflow: hidden;
}
svg{
width: 100vw;
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment