SVG Radar

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>SVG Radar</title>
  <link href="style.css" rel="stylesheet" />
  <link href="radar-svg.css" rel="stylesheet" />
</head>

<body>
  <h3>object embed</h3>
  <p>(no animation in IE)</p>
  <object class="radar" type="image/svg+xml" data="radar.svg"></object>
  <h3>svg use embed</h3>
  <p>(not working in Chrome or IE)</p>
  <svg class="radar svg" viewBox="0 0 34 34">
    <use xlink:href="radar.svg#radar"></use>
  </svg>
</body>

</html>

body {
  text-align:center;
}

.radar {
  transform: rotate(-70deg);
  width: 25%;
  height: 14em;
}

h3 + p {
  margin-top: -1em;
  margin-bottom: 1.3em;
}

SVG Radar

Demonstrates the embedding of complex SVGs using:

* <object> embed (no animation in IE)
* <svg><use> embed (not working in Chrome or IE)

SMIL animations avoided, CSS animations used instead.
This approach avoids Chrome deprecation warning.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="radar-object.css" type="text/css"?>
<!-- The stylesheet only works for object embed -->
<!-- viewBox attribute only required for object embed -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="radar" viewBox="0 0 34 34">

    <defs>
        <linearGradient id="base-circle-grad" y2="100%">
            <stop offset="0%" style="stop-color:#41B5BA"/>
            <stop offset="100%" style="stop-color:#41969D"/>
        </linearGradient>
        <pattern id="conical-grad-image" width="17" height="17" patternUnits="userSpaceOnUse">
            <image width="17" height="17" xlink:href="https://i.imgur.com/EJHwQ8Z.png"/>
        </pattern>
        <clipPath id="scan-scissors">
            <polygon points="0 0, 17 0, 17 17, -17 17, -17 0"/>
        </clipPath>
        <clipPath id="scan-fade-scissors">
            <polygon points="0 0, -17 0, -17 -17, 0 -17"/>
        </clipPath>
    </defs>

    <g transform="translate(17, 17)">
        <circle fill="url(#base-circle-grad)" r="16"/>
        <circle class="ring filled" r="2"/>
        <circle class="ring" r="7.1"/>
        <circle class="ring" r="12.2"/>
        <circle class="blip filled" r="1.5" cx="4.60" transform="rotate(50)"/>
        <circle class="blip" r="1.5" cx="9.75" transform="rotate(78)"/>
        <circle class="blip" r="1.5" cx="9.75" transform="rotate(154)"/>
        <circle class="blip" r="1.5" cx="14.90" transform="rotate(332)"/>
        <circle class="blip" r="1.5" cx="14.90" transform="rotate(188)"/>
        <circle class="blip filled" r="1.5" cx="14.90" transform="rotate(21)"/>

        <g class="cover">
            <g clip-path="url(#scan-scissors)">
                <circle class="scan" r="17"/>
                <circle class="ring filled" r="2"/>
                <circle class="ring" r="7.1"/>
                <circle class="ring" r="12.2"/>
            </g>
            <g clip-path="url(#scan-fade-scissors)">
                <circle class="scan-fade" r="17" fill="url(#conical-grad-image)"/>
                <circle class="ring filled" r="2"/>
                <circle class="ring" r="7.1"/>
                <circle class="ring" r="12.2"/>
            </g>
        </g>

        <line class="radar-line" x2="16"/>
    </g>
</svg>

.radar.svg .ring {
  stroke: #FFF;
  stroke-width: 2.8;
  /* change for interesting effect */
  fill: none;
}

.radar.svg .ring.filled {
  fill: #FFF;
}

.radar.svg .radar-line {
  stroke: #41969D;
}

.radar.svg .blip {
  stroke: #41969D;
  stroke-width: 0.65;
  fill: #FFF;
  cursor: pointer;
}

.radar.svg .blip:hover {
  stroke: #035158;
}

.radar.svg .blip.filled {
  fill: #41969D;
}

.radar.svg .blip.filled:hover {
  fill: #035158;
}

.radar.svg .scan {
  fill: #B2B2B2;
  stroke-width: 2;
  stroke: #FFF;
}

.radar.svg .scan-fade {
  pointer-events: none;
  stroke-width: 2;
  stroke: #FFF;
}

.radar.svg .cover,
.radar.svg .radar-line {
  animation: 4s linear infinite spin;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ring {
  stroke: #FFF;
  stroke-width: 2.8;
  /* change for interesting effect */
  fill: none;
}

.ring.filled {
  fill: #FFF;
}

.radar-line {
  stroke: #41969D;
}

.blip {
  stroke: #41969D;
  stroke-width: 0.65;
  fill: #FFF;
  cursor: pointer;
}

.blip:hover {
  stroke: #035158;
}

.blip.filled {
  fill: #41969D;
}

.blip.filled:hover {
  fill: #035158;
}

.scan {
  fill: #B2B2B2;
  stroke-width: 2;
  stroke: #FFF;
}

.scan-fade {
  pointer-events: none;
  stroke-width: 2;
  stroke: #FFF;
}

.cover, .radar-line {
  animation: 4s linear infinite spin;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}