Plane, Goodbye
How do I make an plane, goodbye?
A quick pen for a Dev that left work.. What is a plane, goodbye? How do you make a plane, goodbye? This script and codes were developed by B. on 21 December 2022, Wednesday.
Plane, Goodbye - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Plane, Goodbye</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="stage"> <svg class="clouds"> </svg> <div class="plane"> <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" width="89.87px" height="34.306px" viewBox="0 0 89.87 34.306" enable-background="new 0 0 89.87 34.306" xml:space="preserve">
<g> <g> <path fill="#939498" d="M86,16.004c0,0,1.348-0.071,1.95-0.199c1.252-0.267,1.92-0.774,1.92-1.356c0-0.578-0.576-1.084-1.83-1.352 C87.44,12.971,86,12.9,86,12.9V16.004z"/> </g> <g> <path fill="#750F05" d="M83.832,19.73c1.302-0.857,1.95-2.047,1.95-5.282c0-3.232-0.646-4.23-1.943-5.088L83.832,19.73z"/> </g> <g> <path fill="#270502" d="M85.782,14.448c0-3.232-0.646-4.23-1.943-5.088"/> </g> <g> <path fill="#9C1407" d="M47.988,9.195l0.554,1.111c0.556,1.199,2.405,1.903,3.813,1.903c1.766,0,4.645-1.409,4.645-3.101V9.086 c0,0,21.688-0.374,23.025,0.968c0.871,0.864,1.975,1.16,1.975,1.16v9.771c0-1.248-2.666-0.865-2.666-0.865 s-4.311,3.253-8.758,3.253l-2.303,1.539c0,0,2.244,0-17.381,0c-13.798-1-31.657-3.535-41.869-4.902l-0.036-0.367 c-0.037,0.429-0.399,0.59-0.839,0.59c-0.472,0-0.853-0.47-0.853-0.937c0-0.057,0.007-0.154,0.016-0.205l-0.041-0.023 c-3.356-0.487-4.948-0.933-5.556-1.288C0.842,17.778,0,17.618,0,14.703c0-2.918,0-2.604,0-11.669 c0-9.071,18.148,4.387,18.148,11.763"/> <path fill="#57130D" d="M0.847,4.422c0-9.068,15.989,2.898,15.989,10.274c0,0,0.681-1.885-6.37-8.938 C4.639-0.067,0.847,4.422,0.847,4.422z"/> </g> <g> <path fill="#57130D" d="M18.227,15.241l29.762-5.596l0.554,1.107c0.556,1.2,2.405,1.907,3.813,1.907 c1.766,0,4.645-1.413,4.645-3.103V9.535c0,0,21.393-0.373,22.732,0.966c0.865,0.863,1.825,1.189,1.825,1.189"/> <path fill="#57130D" d="M18.227,15.241"/> </g> <g> <rect x="16.319" y="20.224" fill="#999999" width="0" height="1.929"/> </g> <g> <rect x="14.776" y="21.235" transform="matrix(-0.7083 -0.7059 0.7059 -0.7083 10.3762 48.4227)" fill="#999999" width="0.836" height="1.666"/> </g> <g> <path fill="#1A1A1A" d="M64.646,31.387c0,1.616,1.308,2.919,2.919,2.919c1.612,0,2.918-1.303,2.918-2.919 c0-1.609-1.306-2.915-2.918-2.915C65.953,28.472,64.646,29.777,64.646,31.387z"/> </g> <g> <path fill="#8F8F8F" d="M61.021,30.347c0,0-1.3,1.424,6.544,1.424c2.182,0,4.67,0.646,4.67-0.752c0-2.623-2.128-5.424-4.75-5.424 S62.527,27.302,61.021,30.347z"/> </g> <g> <polygon fill="#737373" points="62.227,28.423 62.813,27.834 57.668,22.681 57.079,23.273 "/> </g> <g> <path fill="#737373" d="M69.938,25.611c2.361,0,3.062,1.041,3.062,1.041s0-2.168,0-4.447C73,19.931,70.066,25.565,69.938,25.611z" /> </g> <g> <path fill="#270502" d="M69.302,21.238c0.044,0,0.084-0.014,0.116-0.042c0.062-0.06,0.054-0.146-0.007-0.2L51.004,5.797 c-0.065-0.052-0.159-0.05-0.226,0.006c-0.054,0.052-0.05,0.141,0.01,0.195L69.194,21.2C69.224,21.226,69.266,21.238,69.302,21.238 z"/> </g> <g> <path fill="#270502" d="M68.09,4.513c0.042-0.006,0.088,0.004,0.122,0.024c0.063,0.05,0.071,0.136,0.02,0.197L52.211,22.432 c-0.059,0.06-0.155,0.07-0.222,0.026c-0.064-0.051-0.077-0.135-0.019-0.196L67.989,4.563C68.018,4.535,68.052,4.519,68.09,4.513z" /> </g> <g> <polygon fill="#270502" points="4,18.921 4,18.921 5.895,9.433 12.183,6.073 11.112,5.845 4,9.29 "/> </g> <g> <path fill="#333333" d="M85.776,14.981C85.776,3.169,88,0.253,88,0.253v14.729v14.59C88,29.571,85.776,26.789,85.776,14.981z"/> </g> <g> <path fill="#1A1A1A" d="M13.289,22.646c0,0.768,0.622,1.392,1.393,1.392c0.765,0,1.383-0.624,1.383-1.392 c0-0.767-0.618-1.39-1.383-1.39C13.911,21.256,13.289,21.879,13.289,22.646z"/> </g> <g> <circle fill="#737373" cx="14.681" cy="22.646" r="0.417"/> </g> <g> <path fill="#57130D" d="M0,15.188c0,0,3.614,0.771,8.073,0.771c4.457,0,8.066-0.348,8.066-0.771c0-0.428-3.609-0.771-8.066-0.771 C3.614,14.417,0,15.188,0,15.188z"/> </g> <g> <path fill="#270502" d="M0,15.188c0,0,3.614,0.771,8.073,0.771c4.457,0,8.066-0.348,8.066-0.771"/> </g> <g> <path fill="#270502" d="M48.148,5.531c0,0,4.75,1.427,10.548,1.242c5.801-0.181,10.48-1.032,10.452-1.897 c-0.026-0.875-4.751-1.43-10.55-1.248C52.799,3.813,48.148,5.531,48.148,5.531z"/> </g> <g> <path fill="#57130D" d="M69.148,4.876c-0.026-0.875-4.751-1.43-10.55-1.248c-5.8,0.186-10.45,1.903-10.45,1.903"/> </g> <g> <path fill="#270502" d="M50.405,22.744c0,0,4.814,1.18,10.596,0.702c5.783-0.48,10.414-1.572,10.34-2.438 c-0.072-0.867-4.817-1.179-10.6-0.701C54.958,20.783,50.405,22.744,50.405,22.744z"/> </g> <g> <path fill="#57130D" d="M71.341,21.008c-0.072-0.867-4.817-1.179-10.6-0.701c-5.783,0.477-10.336,2.438-10.336,2.438"/> </g> <g> <rect x="82" y="6.911" fill="#9C1407" width="4" height="15"/> </g> <g> <polyline fill="#57130D" points="86,7.911 86,6.911 82,6.911 "/> </g>
</g>
</svg> <div class="banner">
<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" width="194.308px" height="30px" viewBox="0 0 194.308 30" enable-background="new 0 0 194.308 30" xml:space="preserve">
<g> <polygon fill="#E6C77D" stroke="#D34830" stroke-miterlimit="10" points="171.087,29.404 1.087,29.404 13.087,15.404 1.087,0.404 171.087,0.404 "/> <g> <line fill="none" stroke="#270502" stroke-miterlimit="10" x1="186.524" y1="15.138" x2="193.954" y2="7.708"/> <line fill="none" stroke="#270502" stroke-miterlimit="10" x1="186.524" y1="14.671" x2="193.954" y2="22.101"/> </g> <line fill="none" stroke="#270502" stroke-miterlimit="10" x1="187.087" y1="14.5" x2="171.087" y2="14.5"/> <g> <path d="M28.775,18.646v-8h3.562c1.392,0,2.243,0.84,2.243,2.039c0,1.008-0.672,1.68-1.403,1.834 c0.852,0.133,1.56,1.008,1.56,1.967c0,1.283-0.852,2.16-2.315,2.16H28.775z M33.549,12.829c0-0.721-0.479-1.297-1.379-1.297 h-2.399v2.58h2.399C33.069,14.112,33.549,13.56,33.549,12.829z M33.705,16.378c0-0.73-0.504-1.379-1.476-1.379h-2.459v2.758h2.459 C33.153,17.757,33.705,17.229,33.705,16.378z"/> <path d="M36.107,20.097c0.132,0.059,0.348,0.096,0.491,0.096c0.396,0,0.66-0.133,0.864-0.611l0.384-0.877l-2.423-5.852h0.983 l1.919,4.75l1.931-4.75h0.972l-2.902,6.969c-0.348,0.838-0.936,1.162-1.703,1.174c-0.192,0-0.492-0.035-0.647-0.084L36.107,20.097 z"/> <path d="M41.831,15.743c0-1.68,1.199-3.035,2.854-3.035c1.751,0,2.782,1.367,2.782,3.107v0.227h-4.677 c0.071,1.092,0.827,2.004,2.074,2.004c0.672,0,1.332-0.264,1.8-0.744l0.432,0.588c-0.588,0.576-1.367,0.898-2.303,0.898 C43.066,18.788,41.831,17.554,41.831,15.743z M44.674,13.452c-1.235,0-1.847,1.043-1.896,1.918h3.803 C46.568,14.519,45.993,13.452,44.674,13.452z"/> <path d="M51.936,18.646v-8h0.995v7.111h3.718v0.889H51.936z"/> <path d="M57.359,15.743c0-1.68,1.199-3.035,2.854-3.035c1.751,0,2.782,1.367,2.782,3.107v0.227h-4.677 c0.071,1.092,0.827,2.004,2.074,2.004c0.672,0,1.332-0.264,1.8-0.744l0.432,0.588c-0.588,0.576-1.367,0.898-2.303,0.898 C58.595,18.788,57.359,17.554,57.359,15.743z M60.202,13.452c-1.235,0-1.847,1.043-1.896,1.918h3.803 C62.097,14.519,61.521,13.452,60.202,13.452z"/> <path d="M69.465,18.646l-1.512-4.654l-1.511,4.654h-0.899l-1.848-5.793h0.936l1.415,4.617l1.523-4.617h0.779l1.512,4.617 l1.415-4.617h0.947l-1.847,5.793H69.465z"/> <path d="M73.103,11.425c0-0.336,0.276-0.611,0.612-0.611s0.6,0.275,0.6,0.611s-0.264,0.6-0.6,0.6S73.103,11.761,73.103,11.425z M73.259,18.646v-5.793h0.899v5.793H73.259z"/> <path d="M75.468,17.878l0.455-0.648c0.384,0.443,1.115,0.828,1.907,0.828c0.888,0,1.379-0.42,1.379-0.996 c0-1.402-3.586-0.539-3.586-2.686c0-0.912,0.768-1.668,2.147-1.668c0.995,0,1.69,0.371,2.146,0.84l-0.42,0.623 c-0.348-0.42-0.972-0.73-1.727-0.73c-0.792,0-1.284,0.395-1.284,0.91c0,1.26,3.587,0.432,3.587,2.688 c0,0.971-0.78,1.75-2.268,1.75C76.847,18.788,76.055,18.489,75.468,17.878z"/> <path d="M81.778,20.169l-0.456-0.373c0.384-0.252,0.731-0.719,0.779-1.115c-0.023,0.012-0.107,0.023-0.168,0.023 c-0.323,0-0.575-0.264-0.575-0.611s0.275-0.646,0.636-0.646c0.407,0,0.755,0.336,0.755,0.91 C82.749,19.089,82.33,19.772,81.778,20.169z"/> <path d="M89.421,18.646v-7.113h-2.53v-0.887h6.068v0.887h-2.542v7.113H89.421z"/> <path d="M98.168,18.646v-3.814c0-1.031-0.516-1.318-1.308-1.318c-0.695,0-1.367,0.432-1.703,0.898v4.234h-0.899v-8h0.899v3.047 c0.396-0.492,1.188-0.984,2.063-0.984c1.211,0,1.847,0.588,1.847,1.848v4.09H98.168z"/> <path d="M104.492,18.646v-0.66c-0.468,0.527-1.14,0.803-1.919,0.803c-0.972,0-2.015-0.658-2.015-1.918 c0-1.307,1.031-1.906,2.015-1.906c0.792,0,1.451,0.252,1.919,0.779v-1.045c0-0.768-0.624-1.211-1.463-1.211 c-0.696,0-1.26,0.24-1.775,0.805l-0.42-0.625c0.624-0.646,1.367-0.959,2.315-0.959c1.234,0,2.242,0.553,2.242,1.955v3.982H104.492 z M104.492,17.421v-1.104c-0.348-0.467-0.959-0.707-1.583-0.707c-0.852,0-1.439,0.527-1.439,1.26c0,0.744,0.588,1.271,1.439,1.271 C103.533,18.142,104.145,17.901,104.492,17.421z"/> <path d="M111.128,18.646v-3.791c0-1.031-0.527-1.342-1.308-1.342c-0.707,0-1.367,0.432-1.715,0.898v4.234h-0.899v-5.793h0.899 v0.84c0.408-0.492,1.199-0.984,2.075-0.984c1.199,0,1.835,0.611,1.835,1.871v4.066H111.128z"/> <path d="M117.776,18.646l-2.075-2.604l-0.972,0.947v1.656h-0.899v-8h0.899v5.289l3.047-3.082h1.139l-2.566,2.627l2.579,3.166 H117.776z"/> <path d="M122.926,20.097c0.132,0.059,0.348,0.096,0.491,0.096c0.396,0,0.66-0.133,0.864-0.611l0.384-0.877l-2.423-5.852h0.983 l1.919,4.75l1.931-4.75h0.972l-2.902,6.969c-0.348,0.838-0.936,1.162-1.703,1.174c-0.192,0-0.492-0.035-0.647-0.084 L122.926,20.097z"/> <path d="M128.649,15.743c0-1.68,1.104-3.035,2.866-3.035c1.764,0,2.867,1.355,2.867,3.035c0,1.678-1.104,3.045-2.867,3.045 C129.753,18.788,128.649,17.421,128.649,15.743z M133.435,15.743c0-1.176-0.684-2.23-1.919-2.23s-1.919,1.055-1.919,2.23 c0,1.188,0.684,2.242,1.919,2.242S133.435,16.931,133.435,15.743z"/> <path d="M139.76,18.646v-0.816c-0.444,0.504-1.199,0.959-2.063,0.959c-1.211,0-1.847-0.6-1.847-1.846v-4.09h0.899v3.814 c0,1.018,0.516,1.318,1.308,1.318c0.695,0,1.367-0.408,1.703-0.875v-4.258h0.899v5.793H139.76z"/> <path d="M142.281,18.104c0-0.359,0.3-0.658,0.659-0.658c0.36,0,0.66,0.299,0.66,0.658c0,0.361-0.3,0.66-0.66,0.66 C142.581,18.765,142.281,18.466,142.281,18.104z"/> </g>
</g>
</svg> </div> </div> <div class="landscape"> <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" width="830.574px" height="421.911px" viewBox="0 0 830.574 421.911" enable-background="new 0 0 830.574 421.911" xml:space="preserve"> <g> <g> <defs> <path id="SVGID_1_" d="M481.14,366.753L318.063,252.024l-53.294-4.687l-57.142-35.142L121.5,41.006l-14.597-17.902L71,67.006 L-1,171.542c0,0-37.745,6.175-40,8.988c-2.255,2.813-43.386,53.251-45.725,57.019s-184.804,115.21-184.804,115.21"/> </defs> <use xlink:href="#SVGID_1_" overflow="visible" fill="#4D4D4D"/> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="139,50.006 146.5,88.006 104.806,71.006 61,82.006 71,50.006 71,17.911 139,17.911 "/> <polyline clip-path="url(#SVGID_2_)" fill="#D7D8D6" points="105,17.911 139,17.911 139,50.006 146.5,88.006 104.903,70.958 "/> </g> <g> <defs> <path id="SVGID_3_" d="M602.14,399.753L439.063,285.024l-53.294-4.687l-57.142-35.142L242.5,74.006l-14.598-17.902L192,100.006 l-44.627,61.774c0,0-65.118,48.937-67.373,51.75c-2.255,2.813-43.386,53.251-45.725,57.019s-184.804,115.21-184.804,115.21"/> </defs> <use xlink:href="#SVGID_3_" overflow="visible" fill="#808080"/> <clipPath id="SVGID_4_"> <use xlink:href="#SVGID_3_" overflow="visible"/> </clipPath> <polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="260,83.006 246.5,93.006 225.806,88.006 202,97.006 192,83.006 192,50.911 260,50.911 "/> <polyline clip-path="url(#SVGID_4_)" fill="#D7D8D6" points="226,50.911 260,50.911 260,83.006 246.5,93.006 225.902,87.958 "/> </g> <g> <polygon fill="#3A6D5C" points="-83.21,426.06 201.436,292.06 375.51,274.495 489.79,283.583 544.79,273.747 610.389,277.126 724.668,342.231 855.778,441.075 "/> <g> <g> <rect x="201" y="302.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="212.102,304.911 208.117,297.911 209.869,297.911 206.237,291.911 208.237,291.911 201.558,280.342 194.879,291.911 196.879,291.911 193.247,297.911 194.998,297.911 191.015,304.911 "/> </g> <g> <rect x="217" y="299.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="228.102,301.911 224.117,294.911 225.869,294.911 222.237,288.911 224.237,288.911 217.558,277.342 210.879,288.911 212.879,288.911 209.247,294.911 210.998,294.911 207.015,301.911 "/> </g> <g> <rect x="179" y="304.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="190.868,306.911 186.885,299.911 188.637,299.911 185.005,293.911 187.005,293.911 180.325,282.342 173.646,293.911 175.646,293.911 172.014,299.911 173.766,299.911 169.782,306.911 "/> </g> <g> <rect x="159" y="310.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="170.868,312.911 166.885,305.911 168.637,305.911 165.005,299.911 167.005,299.911 160.325,288.342 153.646,299.911 155.646,299.911 152.014,305.911 153.766,305.911 149.782,312.911 "/> </g> <g> <rect x="238" y="294.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="249.652,296.911 245.669,289.911 247.42,289.911 243.789,283.911 245.789,283.911 239.109,272.342 232.43,283.911 234.43,283.911 230.798,289.911 232.549,289.911 228.566,296.911 "/> </g> <g> <rect x="229" y="301.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="240.985,303.911 237.002,296.911 238.753,296.911 235.121,290.911 237.121,290.911 230.442,279.342 223.763,290.911 225.763,290.911 222.131,296.911 223.883,296.911 219.898,303.911 "/> </g> <g> <rect x="253" y="294.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="264.218,296.911 260.234,289.911 261.986,289.911 258.354,283.911 260.354,283.911 253.675,272.342 246.995,283.911 248.995,283.911 245.363,289.911 247.115,289.911 243.132,296.911 "/> </g> <g> <rect x="190" y="308.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="201.55,310.911 197.566,303.911 199.318,303.911 195.686,297.911 197.687,297.911 191.007,286.342 184.327,297.911 186.327,297.911 182.695,303.911 184.447,303.911 180.464,310.911 "/> </g> <g> <rect x="245" y="297.911" fill="#504135" width="2" height="6"/> <polygon fill="#3C5327" points="256.536,299.911 252.553,292.911 254.305,292.911 250.673,286.911 252.673,286.911 245.993,275.342 239.313,286.911 241.314,286.911 237.682,292.911 239.434,292.911 235.45,299.911 "/> </g> <g> <rect x="211" y="305.911" fill="#504135" width="2" height="6"/> <polygon fill="#3C5327" points="222.434,307.911 218.451,300.911 220.202,300.911 216.57,294.911 218.57,294.911 211.891,283.342 205.211,294.911 207.211,294.911 203.58,300.911 205.331,300.911 201.348,307.911 "/> </g> <g> <rect x="145" y="314.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="156.102,316.911 152.117,309.911 153.869,309.911 150.237,303.911 152.237,303.911 145.558,292.342 138.879,303.911 140.879,303.911 137.247,309.911 138.998,309.911 135.015,316.911 "/> </g> <g> <rect x="151" y="316.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="162.985,318.911 159.002,311.911 160.753,311.911 157.121,305.911 159.121,305.911 152.442,294.342 145.763,305.911 147.763,305.911 144.131,311.911 145.883,311.911 141.898,318.911 "/> </g> <g> <rect x="169" y="309.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="180.218,311.911 176.234,304.911 177.986,304.911 174.354,298.911 176.354,298.911 169.675,287.342 162.995,298.911 164.995,298.911 161.363,304.911 163.115,304.911 159.132,311.911 "/> </g> <g> <rect x="126" y="318.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="137.868,320.911 133.885,313.911 135.637,313.911 132.005,307.911 134.005,307.911 127.325,296.342 120.646,307.911 122.646,307.911 119.014,313.911 120.766,313.911 116.782,320.911 "/> </g> <g> <rect x="108" y="331.911" fill="#504135" width="2" height="6"/> <polygon fill="#1E2A14" points="119.868,333.911 115.885,326.911 117.637,326.911 114.005,320.911 116.005,320.911 109.325,309.342 102.646,320.911 104.646,320.911 101.014,326.911 102.766,326.911 98.782,333.911 "/> </g> <g> <rect x="134" y="326.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="145.55,328.911 141.566,321.911 143.318,321.911 139.686,315.911 141.687,315.911 135.007,304.342 128.327,315.911 130.327,315.911 126.696,321.911 128.447,321.911 124.464,328.911 "/> </g> <g> <rect x="120" y="330.911" fill="#504135" width="2" height="6"/> <polygon fill="#2D3E1D" points="131.218,332.911 127.234,325.911 128.986,325.911 125.354,319.911 127.354,319.911 120.675,308.342 113.995,319.911 115.995,319.911 112.363,325.911 114.115,325.911 110.132,332.911 "/> </g> <g> <rect x="107" y="340.911" fill="#504135" width="2" height="6"/> <polygon fill="#3C5327" points="118.536,342.911 114.553,335.911 116.305,335.911 112.673,329.911 114.673,329.911 107.993,318.342 101.313,329.911 103.314,329.911 99.682,335.911 101.434,335.911 97.45,342.911 "/> </g> <g> <rect x="145" y="325.911" fill="#504135" width="2" height="6"/> <polygon fill="#3C5327" points="156.434,327.911 152.451,320.911 154.202,320.911 150.57,314.911 152.57,314.911 145.891,303.342 139.211,314.911 141.211,314.911 137.58,320.911 139.331,320.911 135.348,327.911 "/> </g> </g> <g> <g> <rect x="611" y="279.911" fill="#504135" width="3" height="9"/> <polygon fill="#1E2A14" points="627.721,282.911 621.822,271.911 624.415,271.911 619.038,262.911 622,262.911 612.109,245.782 602.221,262.911 605.182,262.911 599.805,271.911 602.397,271.911 596.5,282.911 "/> </g> <g> <rect x="619" y="284.911" fill="#504135" width="3" height="9"/> <polygon fill="#2D3E1D" points="636.132,287.911 630.235,276.911 632.827,276.911 627.451,267.911 630.412,267.911 620.522,250.782 610.632,267.911 613.594,267.911 608.217,276.911 610.809,276.911 604.912,287.911 "/> </g> <g> <rect x="626" y="289.911" fill="#504135" width="3" height="9"/> <polygon fill="#3C5327" points="642.844,292.911 636.947,281.911 639.54,281.911 634.163,272.911 637.124,272.911 627.234,255.782 617.344,272.911 620.306,272.911 614.929,281.911 617.521,281.911 611.625,292.911 "/> </g> </g> </g> </g> </svg> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Plane, Goodbye - Script Codes CSS Codes
.stage { background-color: #3d7d84; overflow: hidden; width: 100%; height: 100vh;
}
.plane { position: relative; left: -100%; top: 42vh; -webkit-animation-name: plane-fly; animation-name: plane-fly; -webkit-animation-duration: 15s; animation-duration: 15s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear;
}
@-webkit-keyframes plane-fly { 0% { left: -10%; -webkit-transform: scale(1.4); transform: scale(1.4); } 50% { left: 110%; -webkit-transform: scale(1); transform: scale(1); } 51% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-duration: 30s; animation-duration: 30s; } 100% { left: -110%; -webkit-transform: scale(0.4) rotateY(180deg); transform: scale(0.4) rotateY(180deg); -webkit-animation-duration: 30s; animation-duration: 30s; }
}
.banner { position: absolute; left: -12.1em; top: -0.35em;
}
.landscape { position: absolute; bottom: -4px;
}
.clouds { height: 50vh; width: 100%; position: absolute;
}
Plane, Goodbye - Script Codes JS Codes
//From https://codepen.io/fmtoffolo/details/vruqB/ just changed svg path
var sky = document.getElementsByClassName('clouds')[0]; screenWidth = window.screen.width, boxHeight = 300, clouds = [], path = "M100.434,26.461c-2.076-6.246-7.969-10.752-14.911-10.752c-4.093,0-7.807,1.577-10.603,4.14C71.763,8.411,61.309,0,48.865,0C37.991,0,28.643,6.428,24.343,15.678c-2.577-2.158-5.893-3.459-9.517-3.459C6.828,12.219,0.308,18.547,0,26.471L100.434,26.461z";
var cloud = function (screenWidth, boxHeight) { var yPos = Math.random()*boxHeight, xPos = Math.random()*screenWidth, speed = Math.random(), direction = Math.random(), scale = speed, scaleString = 'scale(' + scale + ' ' + scale + ')', opacity = scale; var cloud = document.createElementNS("http://www.w3.org/2000/svg", 'path');//create SVG cloud.setAttribute('d', path);//set path cloud.setAttribute('fill', "white");//color cloud.setAttribute('fill-opacity', opacity); if(direction > 0.5){//set random direction speed = -speed; } sky.appendChild(cloud);//put clouds in the sky this.animate = function(){//animation method cloud.setAttribute('transform', 'translate('+ (xPos+=speed) +','+ yPos +')' + scaleString ); if(xPos > screenWidth + 200){ xPos = -200; yPos = Math.random()*boxHeight; } if(xPos < -200){ xPos = screenWidth + 200; yPos = Math.random()*boxHeight; } };
};
var createClouds = function(quantity){ for (var i = 0; i < quantity; i++) {//create clouds and put them inside array clouds.push(new cloud(screenWidth, boxHeight)); }
};
var render = function(){//call the animate method from each cloud and control flow with requestAnimationFrame for (var i = 0; i < clouds.length; i++) { clouds[i].animate(); } requestAnimationFrame(render);
};
createClouds(10);
render();
Developer | B. |
Username | wearebold |
Uploaded | December 21, 2022 |
Rating | 3 |
Size | 9,358 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pure CSS3 Robot with JS clocks | 7,759 Kb |
Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
Alerts | 2,726 Kb |
Pure CSS3 Batman Logo | 4,527 Kb |
Particle Earth Map | 5,106 Kb |
Center the Unknow | 2,434 Kb |
Simple Slick Sync Slider | 5,946 Kb |
Simple CSS3 Button | 2,571 Kb |
Simple Preloader | 3,265 Kb |
Simple Accordion | 3,683 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Responsive slide | Thorien | 2,400 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Welcome | Nakome | 6,076 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Improve | Gavra | 1,652 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!