<div class="container">
<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"
viewBox="0 0 250 130" enable-background="new 0 0 250 130" xml:space="preserve">
<path id="wind-1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M55.9,27c13.2-2,26.5-1.2,39.8-0.9c2.3,0,4.7,0.1,6.8-1
c2.1-1,3.8-3.5,3.4-5.9c-0.4-2.5-2.8-4.1-5.1-4.1c-2.3,0.1-4.4,1.5-6,3.2c-0.2,0.3-0.5,0.5-0.6,0.9c-0.1,0.4,0,0.9,0.2,1.3
c0.7,1.6,2.1,2.7,3.7,3.2s3.2,0.5,4.8,0.5c11.2,0.1,22.3,0.7,33.4,1.6"/>
<g id="bird-1">
<ellipse id="XMLID_164_" cx="157" cy="19.3" rx="0.5" ry="0.5"/>
<path id="XMLID_165_" fill="none" d="M156.8,19.3c-0.9-1.4-2.2-2.5-3.7-3c-0.6-0.2-1.2-0.4-1.8-0.3"/>
<path id="left-wing-1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M156.9,19.3c0.1-0.3-0.2-0.5-0.5-0.6
c-1.6-0.5-3.2-0.7-4.8-0.6"/>
<path id="right-wing-1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M157.1,19.4c0.1-0.5,0.3-0.9,0.6-1.2
c1.2-1.8,2.8-2.9,4.4-3.2"/>
</g>
<g id="bird-2">
<ellipse id="XMLID_193_" cx="216.1" cy="35" rx="0.3" ry="0.4"/>
<path id="XMLID_166_" fill="none" d="M216,35c-0.6-1.1-1.4-2-2.4-2.5c-0.4-0.2-0.8-0.3-1.1-0.2"/>
<path id="left-wing-2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M216.1,35c0.1-0.2-0.1-0.4-0.3-0.5
c-1-0.4-2.1-0.6-3.1-0.5"/>
<path id="right-wing-2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M216.2,35.1c0.1-0.4,0.2-0.7,0.4-1
c0.8-1.4,1.8-2.3,2.8-2.6"/>
</g>
<g id="bird-3">
<ellipse id="XMLID_195_" cx="88.4" cy="59.8" rx="0.3" ry="0.5"/>
<path id="XMLID_194_" fill="none" d="M88.3,59.8c-0.5-1.4-1.3-2.5-2.1-3c-0.3-0.2-0.7-0.4-1-0.3"/>
<path id="left-wing-3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M88.4,59.8c0.1-0.3-0.1-0.5-0.3-0.6
c-0.9-0.5-1.8-0.7-2.8-0.6"/>
<path id="right-wing-3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M88.5,60c0.1-0.5,0.2-0.9,0.3-1.2
c0.7-1.8,1.6-2.9,2.5-3.2"/>
</g>
<path id="wind-2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M143.1,41.2c6.9-1,14-0.6,21-0.5c1.2,0,2.5,0,3.6-0.5
s2-1.8,1.8-3.1c-0.2-1.3-1.5-2.2-2.7-2.2c-1.2,0-2.3,0.8-3.2,1.7c-0.1,0.1-0.3,0.3-0.3,0.5c-0.1,0.2,0,0.5,0.1,0.7
c0.4,0.9,1.1,1.4,1.9,1.7c0.8,0.3,1.7,0.3,2.5,0.3c5.9,0.1,11.7,0.4,17.6,0.9"/>
<g id="XMLID_1_">
<g id="tower">
<polygon id="XMLID_3_" fill="none" stroke="#000000" stroke-miterlimit="10" points="44.7,55.6 40.2,110 49.2,110 "/>
<polyline id="XMLID_4_" fill="none" stroke="#000000" stroke-miterlimit="10" points="41.4,110 44.7,55.6 47.8,110 "/>
<path id="XMLID_5_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M40.2,110"/>
<line id="XMLID_14_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="44.3" y1="60.1" x2="44.7" y2="55.6"/>
<path id="XMLID_6_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M49.2,110"/>
<line id="XMLID_18_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="40.2" y1="110" x2="48.8" y2="105.6"/>
<line id="XMLID_19_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="49.2" y1="110" x2="40.5" y2="105.6"/>
<line id="XMLID_20_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="48.8" y1="105.6" x2="41" y2="100.1"/>
<line id="XMLID_21_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="41" y1="100.1" x2="47.8" y2="94.5"/>
<line id="XMLID_22_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.8" y1="94.5" x2="41.9" y2="88.9"/>
<line id="XMLID_23_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="41.9" y1="88.9" x2="47" y2="83.4"/>
<line id="XMLID_24_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47" y1="83.4" x2="42.8" y2="77.8"/>
<line id="XMLID_25_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="42.8" y1="77.8" x2="46.1" y2="72.3"/>
<line id="XMLID_26_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46.1" y1="72.3" x2="43.8" y2="66.7"/>
<line id="XMLID_27_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="43.8" y1="66.7" x2="45.1" y2="61.1"/>
<line id="XMLID_28_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="45.1" y1="61.1" x2="44.6" y2="55.6"/>
<line id="XMLID_29_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="40.5" y1="105.6" x2="48.4" y2="100.1"/>
<line id="XMLID_30_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="48.4" y1="100.1" x2="41.4" y2="94.7"/>
<line id="XMLID_31_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="41.4" y1="94.7" x2="47.4" y2="88.9"/>
<line id="XMLID_32_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.4" y1="88.9" x2="42.4" y2="83.4"/>
<line id="XMLID_33_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="42.4" y1="83.4" x2="46.5" y2="77.8"/>
<line id="XMLID_34_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46.5" y1="77.8" x2="43.3" y2="72.3"/>
<line id="XMLID_35_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="43.3" y1="72.3" x2="45.6" y2="66.7"/>
<line id="XMLID_36_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="45.6" y1="66.7" x2="44.2" y2="61.1"/>
<line id="XMLID_37_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="44.2" y1="61.1" x2="44.6" y2="55.6"/>
<line id="XMLID_38_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="41.4" y1="110" x2="47.6" y2="105.6"/>
<line id="XMLID_39_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.6" y1="105.6" x2="42" y2="100.1"/>
<line id="XMLID_40_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="42" y1="100.1" x2="46.9" y2="94.5"/>
<line id="XMLID_41_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46.9" y1="94.5" x2="42.7" y2="88.9"/>
<line id="XMLID_42_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="42.7" y1="88.9" x2="46.3" y2="83.4"/>
<line id="XMLID_43_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46.3" y1="83.4" x2="43.3" y2="77.8"/>
<line id="XMLID_44_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="43.3" y1="77.8" x2="45.6" y2="72.3"/>
<line id="XMLID_45_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="45.6" y1="72.3" x2="44" y2="66.7"/>
<line id="XMLID_46_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="44" y1="66.7" x2="45" y2="61.1"/>
<line id="XMLID_47_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="45" y1="61.1" x2="44.7" y2="55.5"/>
<line id="XMLID_48_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.8" y1="110" x2="41.7" y2="105.6"/>
<line id="XMLID_49_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="41.7" y1="105.6" x2="47.3" y2="100.1"/>
<line id="XMLID_50_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="47.3" y1="100.1" x2="42.4" y2="94.5"/>
<line id="XMLID_51_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="42.4" y1="94.5" x2="46.6" y2="88.9"/>
<line id="XMLID_52_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46.6" y1="88.9" x2="43" y2="83.4"/>
<line id="XMLID_53_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="43" y1="83.4" x2="46" y2="77.8"/>
<line id="XMLID_54_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="46" y1="77.8" x2="43.7" y2="72.3"/>
<line id="XMLID_55_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="43.7" y1="72.3" x2="45.3" y2="66.7"/>
<line id="XMLID_56_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="45.3" y1="66.7" x2="44.3" y2="61.1"/>
<line id="XMLID_89_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="44.3" y1="61.1" x2="44.7" y2="55.6"/>
</g>
<g id="XMLID_2_">
<ellipse id="rotator" cx="44.6" cy="55.6" rx="2.4" ry="2.6"/>
<g id="blade_1-1">
<polyline id="XMLID_90_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="44.4,54.9 45.3,27.4
46.1,47.4 44.9,49 44.7,54.9 "/>
</g>
<g id="blade_1-2">
<polyline id="XMLID_9_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="43.7,56.4 21.3,69
36.9,58.4 38.7,58.8 43.5,56.1 "/>
</g>
<g id="blade_1-3">
<polyline id="XMLID_10_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="45.4,55.6 66.6,70.5
50.4,61.1 49.8,59.1 45.3,55.9 "/>
</g>
</g>
</g>
<g id="XMLID_7_">
<g id="tower_1_">
<polygon id="XMLID_100_" fill="none" stroke="#000000" stroke-miterlimit="10" points="125,55.6 120.5,110 129.5,110 "/>
<polyline id="XMLID_99_" fill="none" stroke="#000000" stroke-miterlimit="10" points="121.8,110 125,55.6 128.2,110 "/>
<path id="XMLID_98_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M120.5,110"/>
<line id="XMLID_97_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124.6" y1="60.1" x2="125" y2="55.6"/>
<path id="XMLID_96_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M129.5,110"/>
<line id="XMLID_95_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="120.5" y1="110" x2="129.2" y2="105.6"/>
<line id="XMLID_94_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="129.5" y1="110" x2="120.9" y2="105.6"/>
<line id="XMLID_93_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="129.2" y1="105.6" x2="121.3" y2="100.1"/>
<line id="XMLID_92_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="121.3" y1="100.1" x2="128.2" y2="94.5"/>
<line id="XMLID_91_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="128.2" y1="94.5" x2="122.3" y2="88.9"/>
<line id="XMLID_88_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="122.3" y1="88.9" x2="127.3" y2="83.4"/>
<line id="XMLID_87_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127.3" y1="83.4" x2="123.2" y2="77.8"/>
<line id="XMLID_86_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="123.2" y1="77.8" x2="126.4" y2="72.3"/>
<line id="XMLID_85_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="126.4" y1="72.3" x2="124.1" y2="66.7"/>
<line id="XMLID_84_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124.1" y1="66.7" x2="125.5" y2="61.1"/>
<line id="XMLID_83_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="125.5" y1="61.1" x2="125" y2="55.6"/>
<line id="XMLID_82_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="120.9" y1="105.6" x2="128.7" y2="100.1"/>
<line id="XMLID_81_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="128.7" y1="100.1" x2="121.8" y2="94.7"/>
<line id="XMLID_80_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="121.8" y1="94.7" x2="127.8" y2="88.9"/>
<line id="XMLID_79_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127.8" y1="88.9" x2="122.7" y2="83.4"/>
<line id="XMLID_78_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="122.7" y1="83.4" x2="126.9" y2="77.8"/>
<line id="XMLID_77_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="126.9" y1="77.8" x2="123.6" y2="72.3"/>
<line id="XMLID_76_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="123.6" y1="72.3" x2="125.9" y2="66.7"/>
<line id="XMLID_75_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="125.9" y1="66.7" x2="124.6" y2="61.1"/>
<line id="XMLID_74_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124.6" y1="61.1" x2="125" y2="55.6"/>
<line id="XMLID_73_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="121.8" y1="110" x2="127.9" y2="105.6"/>
<line id="XMLID_72_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127.9" y1="105.6" x2="122.4" y2="100.1"/>
<line id="XMLID_71_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="122.4" y1="100.1" x2="127.3" y2="94.5"/>
<line id="XMLID_70_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127.3" y1="94.5" x2="123" y2="88.9"/>
<line id="XMLID_69_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="123" y1="88.9" x2="126.6" y2="83.4"/>
<line id="XMLID_68_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="126.6" y1="83.4" x2="123.6" y2="77.8"/>
<line id="XMLID_67_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="123.6" y1="77.8" x2="125.9" y2="72.3"/>
<line id="XMLID_66_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="125.9" y1="72.3" x2="124.4" y2="66.7"/>
<line id="XMLID_65_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124.4" y1="66.7" x2="125.3" y2="61.1"/>
<line id="XMLID_64_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="125.3" y1="61.1" x2="125" y2="55.5"/>
<line id="XMLID_63_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="128.2" y1="110" x2="122" y2="105.6"/>
<line id="XMLID_62_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="122" y1="105.6" x2="127.6" y2="100.1"/>
<line id="XMLID_61_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127.6" y1="100.1" x2="122.7" y2="94.5"/>
<line id="XMLID_60_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="122.7" y1="94.5" x2="127" y2="88.9"/>
<line id="XMLID_59_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="127" y1="88.9" x2="123.4" y2="83.4"/>
<line id="XMLID_58_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="123.4" y1="83.4" x2="126.3" y2="77.8"/>
<line id="XMLID_57_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="126.3" y1="77.8" x2="124" y2="72.3"/>
<line id="XMLID_17_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124" y1="72.3" x2="125.7" y2="66.7"/>
<line id="XMLID_16_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="125.7" y1="66.7" x2="124.7" y2="61.1"/>
<line id="XMLID_15_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="124.7" y1="61.1" x2="125" y2="55.6"/>
</g>
<g id="XMLID_8_">
<ellipse id="rotator_1_" cx="124.9" cy="55.6" rx="2.4" ry="2.6"/>
<g id="blade_2-1">
<polyline id="XMLID_13_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="124.8,54.9
125.6,27.4 126.5,47.4 125.3,49 125,54.9 "/>
</g>
<g id="blade_2-2">
<polyline id="XMLID_12_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="124,56.4 101.6,69
117.2,58.4 119.1,58.8 123.9,56.1 "/>
</g>
<g id="blade_2-3">
<polyline id="XMLID_101_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="125.7,55.6
147,70.5 130.7,61.1 130.1,59.1 125.6,55.9 "/>
</g>
</g>
</g>
<g id="XMLID_11_">
<g id="tower_2_">
<polygon id="XMLID_150_" fill="none" stroke="#000000" stroke-miterlimit="10" points="205.4,55.6 200.9,110 209.9,110 "/>
<polyline id="XMLID_149_" fill="none" stroke="#000000" stroke-miterlimit="10" points="202.1,110 205.4,55.6 208.5,110 "/>
<path id="XMLID_148_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M200.9,110"/>
<line id="XMLID_147_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="205" y1="60.1" x2="205.4" y2="55.6"/>
<path id="XMLID_146_" fill="none" stroke="#000000" stroke-miterlimit="10" d="M209.9,110"/>
<line id="XMLID_145_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="200.9" y1="110" x2="209.5" y2="105.6"/>
<line id="XMLID_144_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="209.9" y1="110" x2="201.2" y2="105.6"/>
<line id="XMLID_143_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="209.5" y1="105.6" x2="201.7" y2="100.1"/>
<line id="XMLID_142_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="201.7" y1="100.1" x2="208.5" y2="94.5"/>
<line id="XMLID_141_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="208.5" y1="94.5" x2="202.6" y2="88.9"/>
<line id="XMLID_140_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202.6" y1="88.9" x2="207.7" y2="83.4"/>
<line id="XMLID_139_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="207.7" y1="83.4" x2="203.5" y2="77.8"/>
<line id="XMLID_138_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="203.5" y1="77.8" x2="206.7" y2="72.3"/>
<line id="XMLID_137_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="206.7" y1="72.3" x2="204.4" y2="66.7"/>
<line id="XMLID_136_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204.4" y1="66.7" x2="205.8" y2="61.1"/>
<line id="XMLID_135_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="205.8" y1="61.1" x2="205.3" y2="55.6"/>
<line id="XMLID_134_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="201.2" y1="105.6" x2="209" y2="100.1"/>
<line id="XMLID_133_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="209" y1="100.1" x2="202.1" y2="94.7"/>
<line id="XMLID_132_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202.1" y1="94.7" x2="208.1" y2="88.9"/>
<line id="XMLID_131_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="208.1" y1="88.9" x2="203.1" y2="83.4"/>
<line id="XMLID_130_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="203.1" y1="83.4" x2="207.2" y2="77.8"/>
<line id="XMLID_129_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="207.2" y1="77.8" x2="204" y2="72.3"/>
<line id="XMLID_128_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204" y1="72.3" x2="206.3" y2="66.7"/>
<line id="XMLID_127_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="206.3" y1="66.7" x2="204.9" y2="61.1"/>
<line id="XMLID_126_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204.9" y1="61.1" x2="205.3" y2="55.6"/>
<line id="XMLID_125_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202.1" y1="110" x2="208.3" y2="105.6"/>
<line id="XMLID_124_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="208.3" y1="105.6" x2="202.7" y2="100.1"/>
<line id="XMLID_123_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202.7" y1="100.1" x2="207.6" y2="94.5"/>
<line id="XMLID_122_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="207.6" y1="94.5" x2="203.4" y2="88.9"/>
<line id="XMLID_121_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="203.4" y1="88.9" x2="207" y2="83.4"/>
<line id="XMLID_120_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="207" y1="83.4" x2="204" y2="77.8"/>
<line id="XMLID_119_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204" y1="77.8" x2="206.3" y2="72.3"/>
<line id="XMLID_118_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="206.3" y1="72.3" x2="204.7" y2="66.7"/>
<line id="XMLID_117_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204.7" y1="66.7" x2="205.7" y2="61.1"/>
<line id="XMLID_116_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="205.7" y1="61.1" x2="205.4" y2="55.5"/>
<line id="XMLID_115_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="208.5" y1="110" x2="202.4" y2="105.6"/>
<line id="XMLID_114_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202.4" y1="105.6" x2="208" y2="100.1"/>
<line id="XMLID_113_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="208" y1="100.1" x2="203" y2="94.5"/>
<line id="XMLID_112_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="203" y1="94.5" x2="207.3" y2="88.9"/>
<line id="XMLID_111_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="207.3" y1="88.9" x2="203.7" y2="83.4"/>
<line id="XMLID_110_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="203.7" y1="83.4" x2="206.7" y2="77.8"/>
<line id="XMLID_109_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="206.7" y1="77.8" x2="204.4" y2="72.3"/>
<line id="XMLID_108_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="204.4" y1="72.3" x2="206" y2="66.7"/>
<line id="XMLID_107_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="206" y1="66.7" x2="205" y2="61.1"/>
<line id="XMLID_106_" fill="none" stroke="#000000" stroke-miterlimit="10" x1="205" y1="61.1" x2="205.4" y2="55.6"/>
</g>
<g id="XMLID_102_">
<ellipse id="rotator_2_" cx="205.3" cy="55.6" rx="2.4" ry="2.6"/>
<g id="blade_3-1">
<polyline id="XMLID_105_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="205.1,54.9
205.9,27.4 206.8,47.4 205.6,49 205.4,54.9 "/>
</g>
<g id="blade_3-2">
<polyline id="XMLID_104_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="204.4,56.4 182,69
197.6,58.4 199.4,58.8 204.2,56.1 "/>
</g>
<g id="blade_3-3">
<polyline id="XMLID_151_" fill="#020202" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="206.1,55.6
227.3,70.5 211.1,61.1 210.5,59.1 206,55.9 "/>
</g>
</g>
</g>
</svg>
</div>html, body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 350px;
height: 250px;
}const random = (min, max) => {
return Math.floor(Math.random() * ( max - min ) + min);
};
const initialiseBlade = (num) => {
gsap.set('#blade_'+num+'-1', {
transformOrigin: 'center bottom'
});
gsap.set('#blade_'+num+'-2', {
transformOrigin: 'right top'
});
gsap.set('#blade_'+num+'-3', {
transformOrigin: 'left top'
});
}
const initialiseWind = (num) => {
gsap.set('#wind-1, #wind-2', {
visibility: 'hidden',
});
if (num == 1) {
gsap.set('#wind-1', {
strokeDasharray: 250,
strokeDashoffset: 250,
});
} else {
gsap.set('#wind-2', {
strokeDasharray: 230,
strokeDashoffset: 230,
});
}
}
const initialiseBird = (num) => {
gsap.set('#bird-1, #bird-2, #bird-3', {
visibility: 'hidden',
})
gsap.set('#left-wing-'+num, {
transformOrigin: 'right bottom',
})
gsap.set('#right-wing-'+num, {
transformOrigin: 'left bottom',
});
}
const rotateMill = (num) => {
initialiseBlade(num);
var tl = new gsap.timeline();
tl.to('#blade_'+ num +'-1, #blade_'+ num +'-2, #blade_'+ num +'-3', {
rotateZ: 360,
duration: 3,
ease: Linear.easeIn
});
tl.to('#blade_'+ num +'-1, #blade_'+ num +'-2, #blade_'+ num +'-3', {
rotateZ: 720,
duration: 1.7,
repeat: 3,
ease: Linear.easeOut
});
return tl;
}
const flowWind = (num, offset) => {
initialiseWind(num);
var fx = random(-100, 0);
var tx = random(0, 100);
var tl = new gsap.timeline();
tl.set('#wind-'+num, {
visibility: 'visible',
});
tl.fromTo('#wind-'+ num, {
strokeDashoffset: offset,
x: fx,
opacity: 0,
}, {
x: tx,
strokeDashoffset: 0,
opacity: 0.4,
duration: 1,
ease: 'sine'
}, 0);
tl.fromTo('#wind-'+num, {
strokeDashoffset: 0,
}, {
strokeDashoffset: -offset,
duration: 1,
ease: Linear.easeInOut,
}, 0.6);
return tl;
}
const flyBird = (id, rot, fr_x, fr_y, tr_x, tr_y) => {
initialiseBird(id);
var tl = new gsap.timeline({repeat: -1});
tl.set('#bird-'+id, {
visibility: 'visible',
});
tl.fromTo('#left-wing-'+id, {
scale: 0.5,
}, {
rotateZ: rot,
yoyo: true,
repeat: 5,
duration: 0.6,
scale: 1,
}, 0);
tl.fromTo('#right-wing-'+id, {
scale: 0.5
}, {
rotateZ: -rot,
yoyo: true,
repeat: 5,
duration: 0.6,
scale: 1,
}, 0);
tl.fromTo('#bird-'+id, {
x: fr_x,
y: fr_y,
opacity: 1,
scale: 1
}, {
x: tr_x,
y: tr_y,
scale: 0.8,
duration: 9,
opacity: 0.5,
ease: Linear.easeOut,
}, 0);
}
var master = new gsap.timeline({repeat: -1});
master.add('start');
master.add(rotateMill(1), 'start');
master.add(rotateMill(2), 'start');
master.add(rotateMill(3), 'start');
master.add(flowWind(1, 250), 'start+=2.6');
master.add(flowWind(2, 230), 'start+=3');
flyBird(1);
flyBird(2);
flyBird(3);
for(var i = 1; i<=3; i++){
let rot = random(20, 40);
let fr_x = random(-100, 0);
let fr_y = random(0, 30);
let tr_x = random(0, 100);
let tr_y = random(-30, 0);
flyBird(i, rot, fr_x, fr_y, tr_x, tr_y);
}
External CSS
This Pen doesn't use any external CSS resources.