Animated Cloud Graphic
How do I make an animated cloud graphic?
GSAP SVG animation. What is a animated cloud graphic? How do you make a animated cloud graphic? This script and codes were developed by Todd Linkner on 12 September 2022, Monday.
Animated Cloud Graphic Previews
Animated Cloud Graphic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Cloud Graphic</title>
</head>
<body> <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="740px" height="380px" viewBox="0 0 740 380" enable-background="new 0 0 740 380" xml:space="preserve">
<path fill="#0C7AAC" d="M400.038,111.566c0-1.735-1.463-3.143-3.267-3.143H71.052c-1.804,0-3.267,1.408-3.267,3.143v67.961 c0,1.735,1.463,3.143,3.267,3.143h325.72c1.805,0,3.268-1.407,3.268-3.143L400.038,111.566L400.038,111.566z"/>
<circle fill="#0C7AAC" cx="396.771" cy="121.119" r="61.551"/>
<circle fill="#0C7AAC" cx="67.785" cy="121.119" r="61.551"/>
<circle fill="#0C7AAC" cx="286.166" cy="96.477" r="73.861"/>
<circle fill="#0C7AAC" cx="169.17" cy="94.036" r="88.633"/>
<path fill="#FFFFFF" d="M200.761,90.285v18.138h54.413V90.285H200.761z M251.546,99.544c0,0.892-0.729,1.623-1.623,1.623h-11.265 c-0.893,0-1.623-0.73-1.623-1.623v-0.383c0-0.892,0.729-1.623,1.623-1.623h11.265c0.893,0,1.623,0.73,1.623,1.623V99.544z"/>
<path fill="#FFFFFF" d="M200.761,130.187h54.413v-18.138h-54.413V130.187z M237.036,120.928c0-0.892,0.729-1.623,1.623-1.623h11.265 c0.893,0,1.623,0.731,1.623,1.623v0.382c0,0.893-0.729,1.623-1.623,1.623h-11.265c-0.893,0-1.623-0.73-1.623-1.623V120.928z"/>
<path fill="#FFFFFF" d="M200.761,151.953h54.413v-18.138h-54.413V151.953z M237.036,142.693c0-0.894,0.729-1.623,1.623-1.623h11.265 c0.893,0,1.623,0.729,1.623,1.623v0.383c0,0.892-0.729,1.623-1.623,1.623h-11.265c-0.893,0-1.623-0.73-1.623-1.623V142.693z"/>
<path fill="#0C7AAC" d="M689.27,106.292c2.492-2.186-2.159-6.169-3.022-3.653c0.44,0.774,1.553,1.668,0.842,2.654 c-0.272,0.376-0.694,0.38-0.971,0.683C685.426,106.73,688.67,106.818,689.27,106.292z"/>
<path fill="#0C7AAC" d="M708.04,134.344c-1.314,1.817-2.346,2.27-2.708,4.684c-0.1,0.68-0.109,2.067,0.878,2.067 c1.362,0,2.062-2.474,2.144-3.477C708.438,136.609,708.95,135.115,708.04,134.344z"/>
<path fill="#0C7AAC" d="M698.048,90.284c-17.028,0-30.834,13.806-30.834,30.835c0,17.028,13.806,30.834,30.834,30.834 c17.029,0,30.835-13.806,30.835-30.834C728.883,104.09,715.077,90.284,698.048,90.284z M698.048,148.326 c-15.001,0-27.207-12.204-27.207-27.207c0-15.001,12.206-27.207,27.207-27.207c5.487,0,10.599,1.639,14.876,4.444 c-1.169-0.385-1.896,0.376-3.197,0.17c-0.111-0.573-0.968-0.857-1.308-0.296c-0.36,0.591,0.322,1.53-0.089,1.862 c-0.407,0.33-3.452-0.239-4.893,0.684c-0.875,0.561-3.158,2.578-3.405,0.395c1.317-0.168,1.15-1.842,0.602-2.306 c-0.549-0.467-1.776-0.548-4.312-0.381c-3.467,0.254-4.461,0.501-5.688,2.288c-1.499,2.192,2.499,2.339,2.511,3.972 c1.48-0.454,1.568-2.142,3.523-0.98c1.763,0.438-0.707,1.979-0.963,1.858c-1.969-0.978-3.319,0.344-4.928,0.771 c-0.72,0.188-3.263,0.937-3.682,1.565c0.367,0.604,1.771,1.271,0.339,1.903c-0.472,0.207-1.776-0.207-1.817,0.678 c-0.062,1.319-0.408,3.589,1.796,2.533c1.011-0.485,2.225-1.504,3.062-2.237c0.854-0.749,1.474-1.167,2.238-0.229 c0.554,0.675,1.602,0.777,1.61,1.794c2.563,0.751-0.812-3.098-0.607-3.288c0.596-0.567,2.484,2.044,2.646,2.333 c0.138,0.25,1.146,2.186,1.679,1.267c0.292-0.503-0.888-1.404-0.025-1.619c1.154-0.055,0.642,1.404,1.498,1.762 c0.695,0.289,1.926,0.487,2.384,1.16c1.303,1.928-1.351,2.822-2.646,2.546c-0.67-0.135-1.57-0.039-2.229,0.119 c-0.543,0.133-0.82,1.471-1.574,0.997c-0.729-0.465-1.289-0.845-2.067-1.275c-0.667-0.366,0.466-1.365-0.539-1.59 c-0.961-0.221-2.31,0.104-3.219,0.35c-1.017,0.278-2.129-0.219-2.987,0.295c-1.201,0.722-2.32,2.578-3.253,3.683 c-0.613,0.727-0.883,1.58-0.571,2.509c0.293,0.882-0.51,1.891-0.213,2.944c0.319,1.124,1.846,3.831,3.104,4.047 c0.864,0.151,3.196-0.241,3.958-0.708c0.878-0.552,0.945,0.258,1.564,0.616c0.555,0.319,1.537-0.19,1.502,0.835 c-0.039,1.064-0.158,1.731,0.406,2.721c0.438,0.778,1.083,1.559,1.068,2.499c-0.021,1.22-1.003,1.866-0.482,3.182 c0.792,1.987,0.323,5.944,1.673,7.641c0.509,0.648,2.181,0.092,2.83-0.117c1.325-0.43,2.561-2.654,3.152-3.792 c0.311-0.602,0.917-0.984,1.194-1.561c0.032-0.424-0.026-0.829-0.178-1.224c0.053-1.056,1.373-1.428,1.961-2.1 c0.892-1,0.096-2.499-0.121-3.601c-0.258-1.32,0.383-2.417,1.183-3.405c1.419-1.737,3.252-3.112,3.461-5.531 c-2.062,1.583-3.478,0.098-5.054-1.195c-0.912-0.747-0.903-1.917-1.618-2.781c-0.654-0.796,0.478-1.712,1.292-1.328 c1.598,0.759,1.726,4.849,3.047,4.854c1.95,0.01,3.722-2.001,4.913-3.27c-0.177-1.167,0.296-2.238,1.646-2.122 c1.471,0.125,1.229,1.517,2.268,1.723c0.809,0.158,1.272-0.536,1.785,0.565c0.447,0.963,0.637,2.056,0.877,3.082 c0.08,0.354,0.36,2.437,0.927,2.437c1.397,0,0.77-2.609,1.088-3.282c0.511-1.081,2.489-3.03,3.659-3.307 c0.454,0.435,0.125,1.95,0.805,2.138c0.501,0.137,0.714-0.743,0.693-2.087c0.031,0.53,0.051,1.062,0.051,1.598 C725.254,136.122,713.05,148.326,698.048,148.326z"/>
<path fill="#FFFFFF" d="M418.175,96.633h-61.667v39.903h21.952c-2.353,2.304-3.813,5.515-3.813,9.069h3.629 c0-5.001,4.066-9.069,9.067-9.069c5,0,9.069,4.068,9.069,9.069h3.627c0-3.554-1.461-6.765-3.815-9.069h21.952L418.175,96.633 L418.175,96.633z M414.549,132.908h-54.413v-32.647h54.413V132.908z"/>
<path fill="#0C7AAC" d="M82.104,277.438H53.466c-3.939,0-7.161,3.224-7.161,7.16v53.697c0,3.938,3.221,7.16,7.161,7.16h28.638 c3.938,0,7.161-3.223,7.161-7.16v-53.697C89.265,280.66,86.042,277.438,82.104,277.438z M67.783,343.667 c-1.979,0-3.579-1.604-3.579-3.583c0-1.975,1.6-3.579,3.579-3.579c1.979,0,3.583,1.604,3.583,3.579 C71.366,342.062,69.762,343.667,67.783,343.667z M82.104,334.717H53.466V288.18h28.638V334.717z"/>
<path fill="#FFFFFF" d="M89.55,115.677v-9.069h-9.069v-9.069h-43.53v29.022h9.069v9.069h9.069v9.069h43.53v-29.022H89.55z M40.578,122.933v-21.766h36.276v21.766H40.578z M49.647,132.002v-5.441h30.834v-16.325h5.441v21.766H49.647z M94.991,141.071 H58.716v-5.441H89.55v-16.325h5.441V141.071z"/>
<circle fill="#FFFFFF" cx="46.02" cy="106.609" r="1.814"/>
<circle fill="#FFFFFF" cx="53.275" cy="106.609" r="1.814"/>
<circle fill="#FFFFFF" cx="60.531" cy="106.609" r="1.814"/>
<path fill="#0C7AAC" d="M371.018,319.307V300.85c2.111-0.746,3.625-2.756,3.625-5.125c0-3.004-2.436-5.439-5.44-5.439 c-3.003,0-5.44,2.438-5.44,5.439c0,2.371,1.518,4.379,3.628,5.125v18.457h-7.254v18.14h54.414v-18.14H371.018z M410.92,328.564 c0,0.894-0.729,1.625-1.623,1.625h-11.265c-0.895,0-1.623-0.731-1.623-1.625v-0.382c0-0.893,0.729-1.623,1.623-1.623h11.265 c0.896,0,1.623,0.73,1.623,1.623V328.564z"/>
<path fill="#0C7AAC" d="M387.338,219.785c-7.904,0-14.314,6.41-14.314,14.322v20.047h28.639v-20.047 C401.66,226.193,395.247,219.785,387.338,219.785z M389.248,243.873v4.552h-3.816v-4.552c-0.584-0.521-0.955-1.284-0.955-2.13 c0-1.581,1.281-2.867,2.861-2.867c1.584,0,2.868,1.286,2.868,2.867C390.206,242.589,389.835,243.352,389.248,243.873z M378.751,234.105c0-4.735,3.851-8.595,8.587-8.595c4.734,0,8.594,3.858,8.594,8.595H378.751z"/>
<path fill="#0C7AAC" d="M560.967,103.935c-7.904,0-14.315,6.411-14.315,14.322v20.047h28.639v-20.047 C575.288,110.346,568.875,103.935,560.967,103.935z M562.875,128.023v4.552h-3.814v-4.552c-0.586-0.522-0.955-1.284-0.955-2.129 c0-1.582,1.281-2.868,2.861-2.868c1.583,0,2.867,1.286,2.867,2.868C563.834,126.739,563.464,127.5,562.875,128.023z M552.379,118.256c0-4.736,3.852-8.593,8.588-8.593c4.734,0,8.594,3.857,8.594,8.593H552.379z"/>
<text transform="matrix(1 0 0 1 183.021 205.7578)" fill="#0C7AAC" font-family="'Avenir-Medium'" font-size="18.8581">Imp Cloud</text>
<text transform="matrix(1 0 0 1 34.7837 369.7793)" fill="#0C7AAC" font-family="'Avenir-Medium'" font-size="18.8581">BlinkUp</text>
<text transform="matrix(1 0 0 1 211.1465 369.7793)" fill="#0C7AAC" font-family="'Avenir-Medium'" font-size="18.8581">Imp</text>
<text transform="matrix(1 0 0 1 368.332 369.7793)" fill="#0C7AAC" font-family="'Avenir-Medium'" font-size="18.8581">WiFi</text>
<text transform="matrix(1 0 0 1 664.6699 171.9316)" fill="#0C7AAC" font-family="'Avenir-Roman'" font-size="18.8581">Internet</text>
<path fill="#0C7AAC" d="M239.195,289.449c0,1.213-1.011,2.225-2.225,2.225c-1.214,0-2.225-1.012-2.225-2.225h-2.023 c0,1.213-1.012,2.225-2.225,2.225c-1.214,0-2.225-1.012-2.225-2.225h-2.023c0,1.213-1.011,2.225-2.225,2.225 c-1.213,0-2.225-1.012-2.225-2.225h-2.023c0,1.213-1.011,2.225-2.225,2.225c-1.213,0-2.225-1.012-2.225-2.225h-2.022 c0,1.213-1.012,2.225-2.226,2.225c-1.213,0-2.225-1.012-2.225-2.225h-2.023c0,1.213-1.011,2.225-2.225,2.225 c-1.213,0-2.225-1.012-2.225-2.225h-2.022v43.996h2.022c0-1.213,1.012-2.225,2.225-2.225c1.214,0,2.225,1.012,2.225,2.225h2.023 c0-1.213,1.012-2.225,2.225-2.225c1.214,0,2.226,1.012,2.226,2.225h2.022c0-1.213,1.012-2.225,2.225-2.225 c1.214,0,2.225,1.012,2.225,2.225h2.023c0-1.213,1.012-2.225,2.225-2.225c1.214,0,2.225,1.012,2.225,2.225h2.023 c0-1.213,1.011-2.225,2.225-2.225c1.213,0,2.225,1.012,2.225,2.225h2.023c0-1.213,1.011-2.225,2.225-2.225 c1.213,0,2.225,1.012,2.225,2.225h15.576v-43.996H239.195z M206.627,326.164L206.627,326.164c0-3.945,1.113-7.688,3.136-10.822 v0.101c-1.922-2.225-2.832-5.36-2.023-8.294c0.607-2.73,2.427-4.854,4.349-6.776c-0.506,3.034-0.809,6.979,2.124,8.9l0.708,0.405 l-0.101,0.101c3.438-2.629,7.788-4.146,12.44-4.146c4.753,0,9.103,1.618,12.541,4.248l0,0l0,0l0.911-0.506 c3.034-1.922,2.629-5.866,2.124-8.9c1.921,1.922,3.742,4.046,4.349,6.776c0.809,2.933-0.101,6.17-2.124,8.496l-0.101-0.102 c1.921,3.136,3.034,6.776,3.034,10.722h-41.367V326.164z"/>
<circle class="internetdots" fill="#FFFFFF" cx="121.073" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="147.673" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="174.275" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="281.053" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="307.653" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="334.255" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#FFFFFF" cx="438.618" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="474.493" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="501.093" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="526.694" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="593.242" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="621.842" cy="121.12" r="4.5"/>
<circle class="internetdots" fill="#0C7AAC" cx="648.443" cy="121.12" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="121.073" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="147.673" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="174.275" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="281.053" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="307.653" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="334.255" cy="303.436" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="387.34" cy="303.438" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="387.34" cy="274.766" r="4.5"/>
<circle class="devdots" fill="#0C7AAC" cx="387.34" cy="200.544" r="4.5"/>
<circle class="devdots" fill="#FFFFFF" cx="387.34" cy="163.465" r="4.5"/>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Cloud Graphic - Script Codes JS Codes
$(document).ready(function() { var tl = new TimelineMax({ repeat: -1, yoyo: true }).timeScale(4); var tl2 = new TimelineMax({ repeat: -1, yoyo: true }).timeScale(4); $("svg .internetdots").each(function() { tl.to($(this), 1, {transformOrigin: "50% 50%", scale: 2, ease: Power0.easeInOut},"-=2"); tl.to($(this), 1, {transformOrigin: "50% 50%", scale: 1, ease: Power0.easeInOut},"-=0.5"); }); $("svg .devdots").each(function() { tl2.to($(this), 1, {transformOrigin: "50% 50%", scale: 2, ease: Power0.easeInOut},"-=2"); tl2.to($(this), 1, {transformOrigin: "50% 50%", scale: 1, ease: Power0.easeInOut},"-=0.5"); });
});
| Developer | Todd Linkner |
| Username | tlinkner |
| Uploaded | September 12, 2022 |
| Rating | 3.5 |
| Size | 5,275 Kb |
| Views | 18,216 |
Do you need developer help for Animated Cloud Graphic?
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!
Todd Linkner (tlinkner) Script Codes
| Name | Size |
| Array 1 | 1,819 Kb |
| A Pen by Todd Linkner | 2,314 Kb |
| CSS Flexbox leader | 1,605 Kb |
| Common Aspect Ratios in CSS | 2,357 Kb |
| Category Introduction Animation | 9,323 Kb |
Create amazing video scripts with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| Wrap_Test | Mscfourn | 7,503 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| Pericles mi loro... | Judag | 4,125 Kb |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Svg animation draw | SzymonDziewonski | 5,545 Kb |
| Gradients | Karpovsystems | 2,394 Kb |
| Simple jQuery Slider | Jurbank | 2,874 Kb |
| TimelineMax Circular loader | Nicolund | 2,649 Kb |
| Price | Catcode | 2,623 Kb |
Do you want hide your ip address?
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!