Landscape with Cows

HTML
<div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 700 372" id="svg"> <defs> <style type="text/css"> <![CDATA[ @import url("https://fonts.googleapis.com/css?family=Raleway"); text{ font-family:"Raleway", sans-serif; text-transform:uppercase; font-weight:500; font-size:35px; fill:#e4e6eb; } #svg{ width:100%; padding-bottom: 53.1%; height: 1px; overflow: visible; visibility:hidden; } .sky{ fill:#9db8d2; } #cloud1, #cloud2, #cloud3{ fill: #e4e6eb; fill-opacity: 0.7; } .glass1, .glass2, .glass3{ fill: #7590ae; fill-opacity: 0.4; } .frame1, .frame2, .frame3{ fill: #825c68; } .hills{ fill:#83a67f; } .road{ fill:#e4e6eb; } .body{ fill:#e4e6eb; } .socket{ fill: #abb0ba; } .roofdoor{ fill:#825c68; } .wings{ fill:#dec995; } .cow-dark{ fill:#314e6c; } .cow-light{ fill:#e4e6eb; } .cow-eye{ stroke:#314e6c; fill:none; } .forest{ fill:#4b6975; } .bush{ fill:#688c65; } .shadow{ fill:#4b6975; fill-opacity:.7; } ]]> </style> </defs> <script type="text/javascript" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script type="text/javascript"> <![CDATA[ document.addEventListener("DOMContentLoaded", function(event) { window.onload = function() { var svg = document.getElementById("svg"); cloud1 = document.getElementById("cloud1"); cloud2 = document.getElementById("cloud2"); cloud3 = document.getElementById("cloud3"); wings = document.getElementById("wings"); cowHead1 = document.getElementById("cowHead1"); cowHead2 = document.getElementById("cowHead2"); cowNeckHead1 = document.getElementById("cowNeckHead1"); cowNeckHead2 = document.getElementById("cowNeckHead2"); cowTail1 = document.getElementById("cowTail1"); cowTail2 = document.getElementById("cowTail2"); sinine = document.getElementById("sinine"); must = document.getElementById("must"); valge = document.getElementById("valge"); lipp = document.getElementById("lipp"); TweenMax.set(svg, {visibility:"visible"}); TweenMax.set([cowHead1, cowHead2], {transformOrigin:"50% 50%"}); TweenMax.set([cowNeckHead1, cowNeckHead2], {transformOrigin:"70% 30%"}); TweenMax.set(cloud1, {scale:.8}); TweenMax.set(cloud2, {scale:.6}); TweenMax.set(cloud3, {scale:.4}); TweenMax.set([cloud1, cloud2, cloud3], {autoAlpha:0}); var mainTl = new TimelineMax({repeat:-1}); mainTl.timeScale(1); function getTl1() { var tl1 = new TimelineMax({repeat:-1}); tl1.to(sinine, 2, {x:-600, ease:Linear.easeNone}); return tl1; } function getTl2() { var tl2 = new TimelineMax({repeat:-1}); tl2.to(must, 2, {x:-600, ease:Linear.easeNone}); return tl2; } function getTl3() { var tl3 = new TimelineMax({repeat:-1}); tl3.to(valge, 2, {x:-600, ease:Linear.easeNone}); return tl3; } function getTl4() { var tl4 = new TimelineMax({repeat:-1}); tl4.to(wings, 12, {rotationZ:-359, transformOrigin:"50% 50%", ease:Linear.easeNone}); return tl4; } function getTl5() { var tl5 = new TimelineMax({repeat:-1}); tl5.set(cloud1, {autoAlpha:1}); tl5.to(cloud1, 48, {x:-940, ease:Linear.easeNone}); tl5.set(cloud1, {autoAlpha:0}); return tl5; } function getTl6() { var tl6 = new TimelineMax({repeat:-1}); tl6.set(cloud2, {autoAlpha:1}); tl6.to(cloud2, 48, {x:-940, ease:Linear.easeNone}); tl6.set(cloud2, {autoAlpha:0}); return tl6; } function getTl7() { var tl7 = new TimelineMax({repeat:-1}); tl7.set(cloud3, {autoAlpha:1}); tl7.to(cloud3, 48, {x:-940, ease:Linear.easeNone}); tl7.set(cloud3, {autoAlpha:0}); return tl7; } function getTl8() { var tl8 = new TimelineMax({}); tl8.fromTo(cowTail1, 1, {rotation:-10}, {rotation:0, yoyo:true, ease:Sine.easeInOut, repeat:-1}); return tl8; } function getTl9() { var tl9 = new TimelineMax({}); tl9.fromTo(cowHead1, .3, {rotation:-20}, {rotation:-15, repeat:-1, yoyo:true, ease:Sine.easeInOut}); return tl9; } function getTl10() { var tl10 = new TimelineMax({}); tl10.fromTo(cowNeckHead1, 3, {rotation:5}, {rotation:-5, repeat:-1, yoyo:true, ease:Sine.easeInOut}); return tl10; } function getTl11() { var tl11 = new TimelineMax({}); tl11.fromTo(cowTail2, 1, {rotation:0}, {rotation:-10, repeat:-1, yoyo:true, ease:Sine.easeInOut}); return tl11; } function getTl12() { var tl12 = new TimelineMax({}); tl12.fromTo(cowHead2, .3, {rotation:-20}, {rotation:-15, repeat:-1, yoyo:true, ease:Sine.easeInOut}); return tl12; } function getTl13() { var tl13 = new TimelineMax({}); tl13.fromTo(cowNeckHead2, 3, {rotation:-5}, {rotation:5, repeat:-1, yoyo:true, ease:Sine.easeInOut}); return tl13; } function init() { mainTl.add(getTl1(), 0).add(getTl2(), 0).add(getTl3(), 0).add(getTl4(), 0).add(getTl5(), -15).add(getTl6(), 0).add(getTl7(), 15).add(getTl8(), 0).add(getTl9(), 0).add(getTl10(), 0).add(getTl11(), 0).add(getTl12(), 0).add(getTl13(), 0); } init(); }; }); ]]> </script> <path d="M0 0h728v372H0z" class="sky"/> <path id="cloud1" d="M749.832 138.646c-36.312-17.437-20.585-60.73 1.05-67.555-15.456-48.15 59.708-69.59 79.633-30.93 25.04-19.87 61.52-1.52 60.735 31.27 44.277 4.36 45.608 54.95 19.16 66.73-4.742 2.01-4.805 1.8-85.127 1.78-68.94-.02-70.9.53-75.45-1.29z"/> <path id="cloud2" d="M749.832 188.646c-36.312-17.437-20.585-60.73 1.05-67.555-15.456-48.15 59.708-69.59 79.633-30.93 25.04-19.87 61.52-1.52 60.735 31.27 44.277 4.36 45.608 54.95 19.16 66.73-4.742 2.01-4.805 1.8-85.127 1.78-68.94-.02-70.9.53-75.45-1.29z"/> <path id="cloud3" d="M749.832 258.646c-36.312-17.437-20.585-60.73 1.05-67.555-15.456-48.15 59.708-69.59 79.633-30.93 25.04-19.87 61.52-1.52 60.735 31.27 44.277 4.36 45.608 54.95 19.16 66.73-4.742 2.01-4.805 1.8-85.127 1.78-68.94-.02-70.9.53-75.45-1.29z"/> <path d="M-37 400l18.2-160 16.2 20L19 220l6 40s7-30 9-30l8 20 8-30 8 30c1 10 11-30 11-30l5 30 6-20s9 20 11 20l5-10 4 20 10-40 10 30 10-20 10 20 10-30 10 40 10-30 10 20 10-10 10 10 10-20 10 30 20-20 10 20 10-40 10 40 10-30 10 30 10-20 20 20 10-40 10 40 10-20s10 30 10 20l10-20 10 20 10-10 10 10 10-20 10 20 10-30 10 20 10-10 10 20 20-30 10 20 10-30 10 30v-20l60 20 10-30 10 40 10-40 10 30v-30l20 20v-20l20 30v-20l10 10v-20l20 20 20-30 20 50 20-50 20 30 20-20 10 30 20-20 50 160z" class="forest"/> <path d="M358.8 309.5c-95.4-27.6-231.3-53-358.8 0V400h728V264.3l-55.7 30.5c-114-65-180.3-84.5-313.5 14.7z" class="hills"/> <path d="M305 400l176.3.3C496 355 485.8 327 510.5 328c11.6.7 13.4-23.4 13.7-48.8l-22 .2c0 22.8-17.5 47-64 43.8-22-1-69 76.6-133.2 77z" class="road"/> <path d="M143 288a30 3-2 0 0 60 0 30 4-9 0 0-60 0zm72 58a30 6-5 0 0 85 0 30 6-15 0 0-85 0zm128-12h6l48-18h-5zm257-64a60 10 0 0 1-45 14 45 7 0 0 1-60-15 50 10 0 0 1 50-10 50 20 0 0 1 65 9zm130 39a50 10 0 0 1-45 14 45 7 0 0 1-50-15 50 10 0 0 1 50-9 50 10 0 0 1 90 15z" class="shadow"/> <path d="M494.992 161.835c-.41 34.83-4.645 62.56-16.39 93.566 0 3.76 91.037 3.56 91.105-.13-12.293-32.23-15.708-57.91-16.118-93.36-19.26-.82-40.78-1.36-58.6 0z" class="body"/> <path d="M494.718 164.567c21.445-1.024 39.066-1.16 59.145 0v-6.147c-19.806-1.843-37.7-2.048-59.145-.682zm-12.634 90.492v23.08c7.376.68 14.478 1.16 22.674 1.16h21.855c10.244 0 31.69-.27 39.61-1.37v-22.81c-31.005-1.51-60.782-1.16-84.686 0z" class="socket"/> <path d="M494.787 161.357l-2.254-.888c-1.912-1.03.546-36.88 32.1-36.88 31.893 0 33.464 35.51 31.62 36.74l-2.46.89-.34-1.37c-19.67-1.37-37.29-1.37-58.46 0zm18.576 94.59c-11.27.137-11.27 6.283-11.27 6.283v17.074h22.198V262.23s0-6.146-10.92-6.283z" class="roofdoor"/> <path d="M516.846 208.96h14.616v13.66h-14.616z" class="glass1"/> <path d="M515.958 207.798v15.504h16.733v-15.504h-16.73zm2.05 1.913h5.053v5.33h-4.98v-4.92zm7.17 0h5.464v5.33h-5.464v-5.39zm5.464 6.83v5.26h-5.464v-4.78h5.464zm-7.512 0v5.26h-5.054v-4.78h5.054z" class="frame1"/> <path d="M536.925 258.952h14.547v13.66h-14.547z" class="glass2"/> <path d="M535.97 257.79v15.504h16.663V257.79h-16.596zm2.048 1.913h5.054v4.918h-4.78v-4.91zm7.24 0h5.326v4.918h-5.327v-4.91zm5.326 6.83v4.78h-5.258v-4.78h5.258zm-7.512 0v4.78h-4.986v-4.78h4.986z" class="frame2"/> <path d="M516.778 168.392h14.684v13.66H516.71z" class="glass3"/> <path d="M515.958 167.162v15.572h16.733v-15.572h-16.73zm2.05 1.913h5.053v5.054h-4.98v-5.06zm7.17 0h5.464v4.917h-5.464v-4.917zm5.464 6.83v4.917h-5.464v-4.78l5.464-.138zm-7.512 0v5.053h-5.054v-4.78h5.054z" class="frame3"/> <path id="wings" d="M440.807 60.237c-.45.45-.584 1.212.09 1.886l77.647 77.648c-1.437 2.16-1.484 5.08.004 7.2l-9.435 9.44-21.567-21.56-64.703 64.71 21.567 21.57-3.505 3.51c-1.348 1.35.448 3.14 1.796 1.8l77.65-77.64c2.16 1.26 5.04 1.44 7.2.01l9.44 9.44-21.56 21.57 64.7 64.7 21.57-21.57 3.51 3.51c1.35 1.34 3.14-.45 1.8-1.8L529.35 147c1.48-2.11 1.25-5.03 0-7.19l9.43-9.433 21.57 21.563 64.7-64.7-21.56-21.57 3.69-3.684c1.03-1.032-.72-2.872-1.8-1.8L527.56 138c-2.11-1.48-4.94-1.35-7.19 0l-9.44-9.44 21.57-21.57-64.7-64.7-21.57 21.57-3.6-3.6c-.58-.58-1.35-.44-1.8.01zm7.188 5.392l9.436-9.44 4.49 4.49-9.43 9.43-4.49-4.49zm11.235-11.24l8.533-8.54 4.49 4.49-8.54 8.54-4.49-4.49zm-4.95 17.52l9.432-9.44 4.49 4.49-9.432 9.43-4.49-4.49zm11.23-11.23l8.54-8.54 4.49 4.49-8.54 8.54-4.49-4.49zm-4.948 17.52L470 68.77l4.49 4.49-9.433 9.432-4.49-4.49zm11.233-11.23l8.538-8.54 4.49 4.49-8.538 8.54-4.49-4.49zm-4.94 17.52l9.435-9.44 4.49 4.49-9.43 9.43-4.49-4.49zm11.233-11.24l8.54-8.54 4.49 4.49-8.54 8.53-4.488-4.49zm-4.938 17.53l9.435-9.44 4.49 4.49-9.433 9.43-4.49-4.49zm11.232-11.24L492.92 71l4.49 4.49-8.538 8.54-4.49-4.49zm-4.932 17.53l9.433-9.44 4.49 4.49-9.434 9.43-4.49-4.49zm11.23-11.24l8.54-8.54 4.49 4.49-8.543 8.54-4.49-4.49zm-4.945 17.52l9.432-9.44 4.49 4.49-9.432 9.43-4.483-4.49zm11.23-11.23l8.533-8.54 4.49 4.49-8.534 8.53-4.483-4.48zm-4.95 17.52l9.432-9.44 4.49 4.49-9.433 9.43-4.49-4.49zm11.228-11.23l8.537-8.54 4.49 4.49-8.535 8.53-4.49-4.49zm-4.948 17.52l9.435-9.44 4.49 4.49-9.433 9.43-4.497-4.5zm11.232-11.24l8.538-8.54 4.49 4.49-8.535 8.53-4.497-4.5zM426.4 199.52l4.494-4.493 8.535 8.535-4.5 4.495-8.54-8.533zm6.292-6.29l4.492-4.492 8.535 8.534-4.5 4.498-8.54-8.535zm6.29-6.29l4.497-4.497 8.53 8.535-4.49 4.49-8.54-8.535zm6.293-6.293l4.497-4.497 8.535 8.536-4.49 4.49-8.535-8.537zm6.293-6.293l4.49-4.49 8.535 8.53-4.49 4.49-8.535-8.533zm6.293-6.297l4.5-4.495 8.54 8.535-4.49 4.49-8.53-8.535zm6.3-6.29l4.5-4.497 8.54 8.536-4.49 4.49-8.53-8.537zm6.3-6.293l4.5-4.498 8.54 8.533L479 164l-8.534-8.538zm6.3-6.294l4.5-4.496 8.54 8.533-4.49 4.49-8.53-8.536zm6.3-6.293l4.49-4.49 8.54 8.533-4.49 4.49-8.53-8.535zm21.56-20.67l9.44-9.433 4.49 4.49-9.43 9.432-4.49-4.5zm11.24-11.236l8.54-8.53 4.49 4.49-8.52 8.53-4.5-4.5zm-79.09 98.86l4.49-4.49 9.44 9.44-4.5 4.5-9.43-9.43zm6.29-6.29l4.49-4.49 9.44 9.44-4.5 4.5-9.43-9.43zm6.29-6.29l4.49-4.49 9.44 9.44-4.49 4.49-9.43-9.43zm6.29-6.29l4.5-4.49 9.43 9.43-4.49 4.49-9.43-9.43zm6.29-6.29l4.49-4.49 9.44 9.44-4.49 4.5-9.43-9.43zm6.29-6.28l4.49-4.49 9.44 9.44-4.49 4.49-9.43-9.43zm6.29-6.29l4.5-4.49 9.44 9.44-4.49 4.5-9.43-9.43zm6.29-6.29l4.5-4.49 9.44 9.44-4.49 4.5-9.43-9.43zm6.3-6.29l4.49-4.49 9.43 9.43-4.49 4.5-9.43-9.43zm6.29-6.29l4.49-4.5 9.44 9.44-4.49 4.49-9.43-9.43zM595.37 73.7l9.43 9.43-4.407 4.41-9.43-9.43 4.497-4.494zm1.794-1.793l4.495-4.495 9.43 9.434-4.5 4.495-9.44-9.43zm-26.87 26.87l9.436 9.43-4.494 4.497-9.433-9.432 4.493-4.49zm1.8-1.797l4.49-4.495 9.43 9.435-4.49 4.49-9.43-9.435zm6.29-6.29l4.49-4.49 9.434 9.43-4.5 4.5-9.43-9.435zm6.287-6.288l4.49-4.49 9.43 9.43-4.49 4.49-9.43-9.43zm-39.54 39.54l9.44 9.433-4.5 4.5-9.43-9.433 4.49-4.49zm1.8-1.796l4.49-4.49 9.43 9.43-4.49 4.49-9.43-9.434zm6.29-6.29l4.5-4.493 9.43 9.434-4.49 4.49-9.43-9.432zm6.29-6.29l4.5-4.494 9.43 9.43-4.49 4.49-9.43-9.434zm-7.63 30.107l4.49-4.49 8.55 8.54-4.49 4.495-8.53-8.533zm6.29-6.286l4.5-4.494 8.54 8.54-4.49 4.5-8.53-8.538zm6.3-6.292l4.5-4.493 8.55 8.542-4.49 4.49-8.54-8.535zm6.3-6.29l4.5-4.494 8.55 8.54-4.49 4.49-8.53-8.53zm6.29-6.293l4.49-4.493 8.54 8.54-4.49 4.49-8.53-8.53zm6.29-6.29l4.49-4.49 8.54 8.54-4.49 4.49-8.53-8.534zm6.29-6.29l4.49-4.49 8.54 8.543-4.5 4.498-8.53-8.53zm6.29-6.287l4.49-4.492 8.54 8.547-4.49 4.49-8.53-8.537zm6.29-6.29l4.5-4.493 8.54 8.54-4.49 4.49-8.53-8.535zm6.29-6.292l4.49-4.49 8.55 8.54-4.49 4.5-8.53-8.535zm-89.5 96.7l9.44-9.43 4.5 4.494-9.43 9.43-4.49-4.49zm11.24-11.23l8.54-8.54 4.5 4.494-8.54 8.54-4.49-4.493zm-4.93 17.52l9.44-9.43 4.49 4.495-9.43 9.436-4.49-4.49zm11.24-11.23l8.54-8.54 4.49 4.49-8.54 8.545-4.49-4.49zm-4.94 17.52l9.44-9.44 4.49 4.49-9.43 9.44-4.49-4.49zm11.24-11.24l8.54-8.54 4.49 4.49-8.54 8.546-4.49-4.49zm-4.94 17.52l9.44-9.432 4.5 4.5-9.432 9.44-4.49-4.49zm11.23-11.237l8.53-8.535 4.5 4.5-8.54 8.54-4.49-4.49zm-4.94 17.53l9.44-9.44 4.5 4.495-9.44 9.44-4.49-4.49zm11.23-11.236l8.54-8.536 4.5 4.495-8.55 8.54-4.49-4.49zm-4.94 17.53l9.44-9.438 4.49 4.49-9.43 9.436-4.49-4.49zm11.24-11.235l8.53-8.54 4.49 4.49-8.54 8.543-4.49-4.49zm-4.95 17.52l9.43-9.438 4.5 4.5-9.43 9.43-4.49-4.49zM568 206.258l8.544-8.542 4.49 4.5-8.543 8.54-4.49-4.49zm-4.936 17.524l9.43-9.437 4.494 4.49-9.43 9.44-4.49-4.493zm11.23-11.23l8.534-8.54 4.492 4.49-8.54 8.54-4.49-4.49zm-4.95 17.52l9.437-9.44 4.49 4.494-9.43 9.43-4.49-4.493zm11.235-11.236l8.54-8.544 4.49 4.492-8.55 8.55-4.5-4.494zm-4.94 17.52l9.43-9.434 4.49 4.492-9.43 9.435-4.5-4.49zm11.23-11.23l8.54-8.54 4.49 4.49-8.56 8.557-4.49-4.49z" class="wings"/> <path d="M640 280c-10-20-40 1-21 20-28 0-20 20 15 20h30c30 5 30-30 10-23 20-10 0-30-10-22 0-22-30-15-28 0z" class="bush"/> <g id="cow-1"> <g id="cow-body-1"> <path d="M165.115 288.23l-.234-13.51c6.05 1.215 12.64.045 18-1.29.29 1.72.29 3.535 1.02 5.555.53 1.46-.1 5.95-.52 8.245l1.79-.085s4.26-7.554 3.58-8.17c-1.74-1.955 1.3-7.855 1.3-7.855 1.74 4.605 5.49 7.728 3.87 17.18l1.63-.036s2.73-6.618 3.398-9.598c.313-.938-1.58-1.435-1.117-3.395 1.035-2.78 4.005-23.86-1.515-28.7-5.374-3-13.82.81-20.99.66-5.77-.11-9.82-1.92-17.134-2.36-10.76 4.23-10.34 26.21-5.37 28.3l-1.06 14.29 1.86.05 4.71-12.83 5.08 13.59z" class="cow-light"/> <path d="M172.85 255.12c1.712 1.635 4.09 2.205 5.67 4.353 2.272 3.22 1.158 7.315 3.22 9.28 2.23 2.086 5.73-2.112 6.565-6.44.55-2.005 1.788.152 3.274-.376 1.45-.252 1.9-3.096 1.2-7.453-.38-1.705-1.86-2.57-4.49-2.845-2.4-.19-3.74 2.18-4.92 1.26-1.31-1-2.15-2.39-3.79-2.72-4.63-.2-8.27 3.7-6.74 4.93z" class="cow-dark"/> </g> <path id="cowTail1" d="M194.24 246.782c.98-.333 3.88.733 4.958 1.988 1.028 1.137 3.635 16.04 4.702 18.53.728 1.248 3.156 4.673 3.156 4.673 1.655.836 2.73 2.545 2.1 4.077-1.336-.31-2.956-1.81-2.6-3.635 0 0-2.4-2.965-3.28-4.735-1.086-1.85-4.226-17.08-4.74-17.92-.96-1.295-4.41-.48-4.286-2.975z" class="cow-light"/> <g id="cowNeckHead1"> <g id="cow-neck-1"> <path d="M170.745 258.136c.224-11.103-5.4-12.842-12.717-13.287-1.175-.03-5.923 1.63-6.696 2.66-2.184 3.73-10.51 18.86-13.065 23.42-5.26 9.25 3.387 8.77 7.35 5.68 3.348-2.23 4.982-3.08 7.035-3.48 7.095-1.92 18.19 1.17 18.093-15.01z" class="cow-light"/> <path d="M139.455 268.785s1.09 1.39 2.037 1.136c1.862-.69 1.23-3.63 2.588-4.23 1.02-.33 1.768 2.18 3.535 2.34 1.105.03 2.708-2.22 2.84-3 .086-1.82-.935-3.18-.693-6.06.316-2.21 4.325-2.96 2.81-5.55-.853-1.45-6.945 4.26-6.945 4.26zm13.688-8.937c-.036 2.672 2.224 3.215 3.757 5.272.98 1.23.883 6.124 3.41 6.44 3.03.315 3.22-4.483 5.524-6.345 1.073-1.137 3.22.852 4.072-2.43 1.105-4.136-2.65-4.105-3.09-4.546-.755-1.14-.345-6.29-1.295-6.92-1.26-.63-3.4-1.27-6.88 1.7-1.16.91-.5 2.02-2.24 3.25-.6.38-3.23 1.88-3.25 3.56zm-.32-13.413s2.116 3.977 3.916 3.125c1.92-.695 1.35-1.894 4.04-1.515 1.01.19 2.58 1.452 3.82 1.04 2.21-.756-.57-2.587-2.72-3.755-1.2-.41-2.94-.758-4.07-.6-2.65.6-3.32.98-4.99 1.705z" class="cow-dark"/> </g> <g id="cowHead1"> <path d="M136.166 272.053c-.284-.473-7.81-1.79-7.748-.875.193 4.16 5.307 5.055 7.045 2.886-.12 2.835-1.083 10.435-1.53 12.845-.268 1.16 3.88 2.31 4.563 1.15 1.19-2.02 2.214-3.54 3.53-4.42 1.59-1.07 2.82-2.56 3.07-3.98 2.14 2.02 4.44 1.7 6.384-.48.665-.76-4.85-2.67-5.29-2.42 2.61-5.25-9.16-9.47-10.015-4.73z" class="cow-light"/> <path d="M137.62 283.42c1.04.79 2.65-1.01 3.377-1.705 1.262-.853 2.935-2.02 4.072-4.072.47-.947-.1-2.21-.7-2.84-.92-.696-2.59-.696-3.35-.38-2.34 1.105-2.25 2.36-2.34 3.535.02 1.88-1.9 4.75-1.08 5.462zm-.696-10.48l1.8-.695c-2.553-3.148-2.386-5.94-2.607-5.94-.426-.01-1.655 3.462.807 6.635zm7.986 1.388l1.264 1.42c3.835-1.61 4.025-5.334 3.882-5.508-.205-.14-1.925 3.805-5.145 4.09zm-11.27 11.507c-.03-1.01 1.5-1.216 3.237-.6 1.64.662 2.62 1.846 2.257 2.54-.49 1.01-2.1 1.042-3.583.537-1.61-.584-1.91-.852-1.91-2.478z" class="cow-dark"/> <path fill="none" d="M136.19 277.572c.154.916.946 1.15 1.74.892" class="cow-eye"/> </g> </g> </g> <g id="cow-2"> <path id="cowTail2" d="M275.512 296.317c1.272-.433 5.044.952 6.446 2.584 1.336 1.48 4.726 20.86 6.112 24.09.946 1.63 4.103 6.08 4.103 6.08 2.152 1.09 3.548 3.31 2.73 5.3-1.736-.4-3.842-2.35-3.38-4.72 0 0-3.12-3.85-4.265-6.15-1.41-2.4-5.492-22.2-6.162-23.29-1.248-1.68-5.733-.62-5.57-3.87z" class="cow-dark"/> <g id="cow-body-2"> <path d="M237.65 350.198l-.305-17.56c7.86 1.578 16.42.057 23.39-1.678.367 2.236.37 4.595 1.323 7.22.69 1.9-.137 7.736-.683 10.72l2.32-.11s5.532-9.822 4.648-10.622c-2.262-2.54 1.684-10.21 1.684-10.21 2.255 5.985 7.13 10.044 5.024 22.333l2.12-.04s3.55-8.6 4.42-12.47c.41-1.22-2.05-1.86-1.45-4.41 1.35-3.62 5.21-31.03-1.97-37.31-6.98-3.91-17.96 1.05-27.28.86-7.5-.15-12.76-2.49-22.27-3.07-13.99 5.5-13.45 34.08-6.98 36.79l-1.38 18.58 2.42.054 6.13-16.684 6.61 17.67z" class="cow-light"/> <path d="M250.5 310.25c3.25 3.25 0 13 6.5 1.3 1.3 6.5 1.95 6.5 3.25 12.064 2.9 2.712 7.45-2.745 8.535-8.37.714-2.607 2.324.197 4.256-.49 1.89-.328 2.48-4.025 1.58-9.688-.49-2.217-2.41-3.34-5.82-3.7-3.11-.246-4.85 2.842-6.39 1.64-1.69-1.294-2.79-3.1-4.92-3.53-6.02-.254-10.74 4.816-8.76 6.41z" class="cow-dark"/> </g> <g id="cowNeckHead2"> <g id="cow-neck-2"> <path d="M244.97 311.077c.29-14.434-7.02-16.694-16.534-17.273-1.527-.04-7.7 2.12-8.704 3.458-2.84 4.85-13.665 24.525-16.985 30.446-6.838 12.025 4.403 11.408 9.555 7.384 4.352-2.9 6.477-3.997 9.146-4.517 9.223-2.496 23.648 1.52 23.52-19.507z" class="cow-light"/> <path d="M204.292 324.92s1.417 1.81 2.647 1.477c2.42-.903 1.6-4.72 3.36-5.5 1.32-.432 2.3 2.833 4.59 3.038 1.43.04 3.52-2.884 3.69-3.9.11-2.37-1.22-4.143-.91-7.878.41-2.873 5.62-3.857 3.65-7.22-1.11-1.89-9.03 5.538-9.03 5.538zm17.795-11.617c-.05 3.474 2.89 4.18 4.883 6.853 1.272 1.6 1.15 7.96 4.432 8.372 3.94.41 4.186-5.827 7.182-8.248 1.394-1.478 4.186 1.107 5.293-3.16 1.437-5.376-3.445-5.335-4.017-5.91-.98-1.477-.448-8.167-1.683-8.987-1.638-.82-4.427-1.642-8.944 2.216-1.515 1.19-.657 2.62-2.912 4.22-.78.49-4.19 2.45-4.22 4.63zm-.416-17.438s2.75 5.17 5.09 4.063c2.51-.903 1.77-2.462 5.26-1.97 1.32.247 3.37 1.888 4.97 1.354 2.88-.984-.74-3.365-3.53-4.883-1.56-.54-3.81-.99-5.29-.78-3.44.78-4.31 1.27-6.48 2.21z" class="cow-dark"/> </g> <g id="cowHead2"> <path d="M200.016 329.17c-.37-.617-10.154-2.328-10.073-1.14.25 5.41 6.9 6.573 9.16 3.754-.157 3.685-1.41 13.565-1.99 16.698-.348 1.508 5.044 3.003 5.93 1.495 1.548-2.626 2.88-4.595 4.59-5.746 2.067-1.39 3.666-3.32 3.99-5.16 2.783 2.63 5.773 2.21 8.302-.62.864-.98-6.305-3.47-6.877-3.14 3.393-6.81-11.908-12.31-13.02-6.15z" class="cow-light"/> <path d="M201.904 343.946c1.355 1.026 5.2-.65 3.25-2.6 1.95-3.25 3.816-2.626 4.55-5.294.616-1.23-.123-2.873-.903-3.694-1.19-.902-3.36-.902-4.34-.492-3.03 1.437-2.92 3.07-3.03 4.596.03 2.442-2.47 6.175-1.39 7.1zM201 330.322l2.34-.904c-3.318-4.09-3.1-7.722-3.39-7.722-.552-.013-2.15 4.5 1.05 8.626zm10.383 1.804l1.643 1.848c4.985-2.093 5.232-6.936 5.047-7.16-.267-.183-2.503 4.945-6.69 5.316zm-14.65 14.96c-.04-1.314 1.95-1.58 4.207-.78 2.134.86 3.406 2.4 2.934 3.303-.637 1.31-2.73 1.35-4.658.69-2.093-.76-2.483-1.11-2.483-3.22z" class="cow-dark"/> <path fill="none" d="M200.047 336.343c.2 1.19 1.23 1.497 2.262 1.16" class="cow-eye"/> </g> </g> </g> <svg id="lipp" viewBox="0 0 2500 2200"> <svg width="350" height="340" x="865" y="749"> <path id="sinine" fill="none" stroke="#699dbf" stroke-width="60" d="M0 90c150 0 150 46 300 46s150-46 300-46 150 46 300 46 150-46 300-46"/> <path id="must" fill="none" stroke="#314e6c" stroke-width="60" d="M0 150c150 0 150 46 300 46s150-46 300-46 150 46 300 46 150-46 300-46"/> <path id="valge" fill="none" stroke="#e4e6eb" stroke-width="60" d="M0 210c150 0 150 46 300 46s150-46 300-46 150 46 300 46 150-46 300-46"/> </svg> </svg> <g id="varras" fill="#e4e6eb"> <path d="M343 135h3v200h-3z"/> <circle id="circ1" cx="344.5" cy="133" r="3"/> </g> <text x="525" y="360"> Eesti 100 </text> </svg> </div>
SCSS
body{ background-color:#1d1f20; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container{ max-width:1150px; width:100%; overflow:hidden; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } #svg{/*IE fix*/ width:100%; padding-bottom: 53.1%; height: 1px; overflow: visible; visibility:hidden; }
JAVASCRIPT
//// Audio //// function initAudioPlayer(){ var snd1 = new Audio(); var src1 = document.createElement("source"); src1.type = "audio/mpeg"; // Tate_Peterson - Ragtime - free open source audio src1.src = "http://visualangle.ee/audio/Tate_Peterson_-_Ragtime.mp3"; snd1.appendChild(src1); snd1.loop = true; snd1.play(); var snd2 = new Audio(); var src2 = document.createElement("source"); src2.type = "audio/wav"; // Nightingale song - free open source audio src2.src = "http://visualangle.ee/audio/Nightingale_song.wav"; snd2.appendChild(src2); snd2.loop = true; snd2.play(); } window.addEventListener("load", initAudioPlayer);
Expand for more options Login