SVG Radar Animation with Radio Waves Alert

Developer
Ahsan K. Rathore
Size
2,753 Kb
Views
159,896
  1. SVG Radar Animation with Radio Waves Alert Previews
  2. SVG Radar Animation with Radio Waves Alert HTML Codes
  3. SVG Radar Animation with Radio Waves Alert CSS Codes
  4. SVG Radar Animation with Radio Waves Alert JS Codes

How do I make an svg radar animation with radio waves alert?

SVG Radar Animation with Radio Waves Alert on Google Maps. What is a svg radar animation with radio waves alert? How do you make a svg radar animation with radio waves alert? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.

SVG Radar Animation with Radio Waves Alert Previews
IQ Test

SVG Radar Animation with Radio Waves Alert - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Radar Animation with Radio Waves Alert</title> <script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="googleMap"></div>
<div class="small-circle"> <span></span>
</div>
<svg version="1.1" id="radar-svg" pointer-events="none"> <polygon id="radar-beam" fill="#ED1C24" points="" fill-opacity='0.75'/>
</svg>
<svg version="1.1" id="radar-circle-other" pointer-events="none"> <circle cx="50%" cy="50%" r="0" fill-opacity="0" stroke="white" stroke-width="16px" stroke-opacity="0.4"> <animate attributeName="r" from="0" to="1220" dur="6s" repeatCount="indefinite" begin="0.25s" /> </circle> <circle cx="50%" cy="50%" r="0" fill-opacity="0" stroke="white" stroke-width="12px" stroke-opacity="0.4"> <animate attributeName="r" from="0" to="1220" dur="6s" repeatCount="indefinite" begin="1.25s" /> </circle> <circle cx="50%" cy="50%" r="0" fill-opacity="0" stroke="white" stroke-width="8px" stroke-opacity="0.4"> <animate attributeName="r" from="0" to="1220" dur="6s" repeatCount="indefinite" begin="2.25s" /> </circle> <circle cx="50%" cy="50%" r="0" fill-opacity="0" stroke="white" stroke-width="4px" stroke-opacity="0.4"> <animate attributeName="r" from="0" to="1220" dur="6s" repeatCount="indefinite" begin="3.25s" /> </circle> <circle cx="50%" cy="50%" r="0" fill-opacity="0" stroke="white" stroke-width="2px" stroke-opacity="0.4"> <animate attributeName="r" from="0" to="1220" dur="6s" repeatCount="indefinite" begin="4.25s" /> </circle>	</svg> <script src="js/index.js"></script>
</body>
</html>

SVG Radar Animation with Radio Waves Alert - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden;
}
body { overflow: scroll; }
#radar-svg { position: absolute; top: 0; left: -100px; right: 0; bottom: 0; margin: auto; z-index: 3; box-sizing: border-box; pointer-events: none;
}
#googleMap{ position:absolute; width:100%; height:100%; overflow:hidden; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; box-sizing: border-box;
}
.small-circle { width: 5px; height: 5px; border: 1px solid #000; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; z-index: 2; padding : 2px;
}
.small-circle span { width: 5px; height: 5px; background-color: #000; display: block; border-radius: 50%;
}
#radar-circle-other {	width: 100%;	height: 100%;
}
#radar-circle-other {	position: absolute; top: 0; left: 0px; right: 0; bottom: 0; margin: auto; z-index: 1; box-sizing: border-box; pointer-events: none;
}

SVG Radar Animation with Radio Waves Alert - Script Codes JS Codes

$(function() { var wh = ($(window).outerWidth()+200), $radar = $('#radar-svg'), $radGradient = $('#radar-gradient'), $radBeam = $('#radar-beam'), deg = -90, rad = (wh/2); // = 621/2 $radar.attr('width', wh).attr('height', wh); $radGradient.attr('y1', rad).attr('y2', rad); $radBeam.attr('points','750,0 450,0 ' + rad + ',' + rad); $radar.css({transform: 'rotate('+ deg +'deg)'}); (function rotate() { $radar.css({transform: 'rotate('+ deg +'deg)'}); $('[data-atDeg='+deg+']').stop().fadeTo(0,1).fadeTo(1700,0.2); // LOOP setTimeout(function() { deg = ++deg%360; rotate(); }, 30); })();
});
function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:10, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
SVG Radar Animation with Radio Waves Alert - Script Codes
SVG Radar Animation with Radio Waves Alert - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 3
Size 2,753 Kb
Views 159,896
Do you need developer help for SVG Radar Animation with Radio Waves Alert?

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!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
Animated Progress Donut
Full Calendar - Isotope
Bootstrap Modal Example
Responsive Layout with Flexbox
One page responsive website By Ahsan Khurshid
Password Strength
SVG Radio Wave Alerts Animation
JQCap - jQuery Captcha Widget
Responsive Mega Menu - CSS3
Shopping Cart - Angular JS
Create amazing Facebook ads 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!