Animated inline SVG

Developer
Keegan Street
Size
2,560 Kb
Views
6,072
  1. Animated inline SVG Previews
  2. Animated inline SVG HTML Codes
  3. Animated inline SVG CSS Codes
  4. Animated inline SVG JS Codes

How do I make an animated inline svg?

What is a animated inline svg? How do you make a animated inline svg? This script and codes were developed by Keegan Street on 29 January 2023, Sunday.

Animated inline SVG Previews
IQ Test

Animated inline SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated inline SVG</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>POC for animated inline SVG</h1>
<p>Animated by manually changing "d" attribute on a path with JavaScript.</p>
<p id="info"></p>
<div id="svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200" id="svg2"> <g id="layer1"> <path d="M20,0 l80,0 l-20,100 l-80,0 Z" id="rect3034" style="fill:blue" /> </g>
</svg>
</div>
<h2>Notes</h2>
<p>Works on the latest Chrome, FF, Safari, Opera, IE9.</p>
<p>This demo does not work on iPhone 4 (iOS 4.0) or iPad 2 (iOS 4.3.2). Fortunately Modernizr correctly identifies that inline SVG is not supported on these devices. Works in iOS 5.</p>
<p>Works in Android 4, but not 2.3. Modernizr correctly identifies that no SVG is supported on Android 2.3.</p>
<p>P.S. Just found a way cooler demo of this type of thing at <a href="https://codepen.io/agrimsrud/pen/EmCoa">https://codepen.io/agrimsrud/pen/EmCoa</a></p> <script src="js/index.js"></script>
</body>
</html>

Animated inline SVG - Script Codes CSS Codes

@import "compass/css3";

Animated inline SVG - Script Codes JS Codes

(function() { var path = document.getElementById('rect3034'), height = 100, minHeight = 100, maxHeight = 200, increment = 1, animate; animate = function() { height += increment; if (height === maxHeight) { increment = -1; } else if (height === minHeight) { increment = 1; } path.setAttribute('d', 'M20,0 l80,0 l-20,' + height + ' l-80,0 Z'); setTimeout(animate, 20); } animate(); var info = 'Info: Modernizr says inline SVG ' + (Modernizr.inlinesvg ? 'IS' : 'IS NOT') + ' supported in your browser. '; info += 'Modernizr says basic SVG ' + (Modernizr.svg ? 'IS' : 'IS NOT') + ' supported in your browser. '; document.getElementById('info').innerHTML = info;
}());
Animated inline SVG - Script Codes
Animated inline SVG - Script Codes
Home Page Home
Developer Keegan Street
Username keeganstreet
Uploaded January 29, 2023
Rating 3
Size 2,560 Kb
Views 6,072
Do you need developer help for Animated inline SVG?

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!

Keegan Street (keeganstreet) Script Codes
Name
A Pen by Keegan Street
A Pen by Keegan Street
Create amazing web content 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!