3
Greensock SVG Search Animation
source link: https://codepen.io/joshsalazar/pen/RwLGQXJ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Greensock SVG Search Animation
0 unsaved changes
xxxxxxxxxx
<div class="svg-container">
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<g id="LeftLeg">
<polyline id="LeftLegPortion" class="st0" points="210.67,413.11 210.67,392.78
210.67,366.56 "/>
<line id="LeftFoot" class="st0" x1="196.37" y1="419.22" x2="210.67" y2="413.66" />
</g>
<g id="RightLeg">
<line id="RightFoot" class="st0" x1="269.04" y1="417.61" x2="254.75" y2="412.06" />
<polyline id="RightLegPortion" class="st1" points="254.75,413.11 254.75,392.78 254.75,366.56 "/>
</g>
<path id="Body" class="st2" d="M254.5,263.44h-42.56c-11.03,0-20.06,9.02-20.06,20.06c0,0-10,49.06-10,66.11s9.03,28.22,20.06,28.22
h62.56c11.03,0,20.06-8.03,20.06-28.22s-10-66.11-10-66.11C274.56,272.47,265.53,263.44,254.5,263.44z" />
<g id="HeadGroup">
<path id="Fin" class="st3" d="M145.55,131.66V65.28c0-9.71,11.85-14.44,18.54-7.41l70.2,73.79H145.55z" />
<path id="Head" class="st3" d="M303.85,110.72H164.72c-24.46,0-44.47,20.01-44.47,44.47v81.42c0,24.46,20.01,44.47,44.47,44.47
h139.13c24.46,0,44.47-20.01,44.47-44.47v-81.42C348.32,130.73,328.31,110.72,303.85,110.72z" />
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK