SVG Animation

Developer
Size
4,793 Kb
Views
62,744

How do I make an svg animation?

Now with simplex noise.. What is a svg animation? How do you make a svg animation? This script and codes were developed by Thepheer on 13 September 2022, Tuesday.

SVG Animation Previews

SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 411.438 74.257" xml:space="preserve" height="74.257px" width="411.44px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewbox="0 0 411.438 74.257"><metadata><rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:work></rdf:rdf></metadata><defs></defs><path d="m25.857,18.232c4.618,0,8.85,1.67,12.14,4.429l4.472-5.33c-4.496-3.779-10.29-6.061-16.61-6.061-14.259,0-25.859,11.6-25.859,25.858,0,14.26,11.6,25.86,25.86,25.856,6.32,0,12.114-2.282,16.61-6.061l-4.472-5.33c-3.286,2.761-7.521,4.429-12.139,4.429-10.419,0-18.896-8.476-18.896-18.894-0.001-10.418,8.477-18.898,18.897-18.896z"/><path d="M168.99,12.763h-13.92c-1.922,0-3.48,1.559-3.48,3.48v41.769c0,1.92,1.56,3.48,3.48,3.48h13.923c13.436,0,24.365-10.93,24.365-24.365,0-13.437-10.928-24.367-24.368-24.364z"/><path d="M168.99,54.532h-10.439v-34.807h10.442c9.597,0,17.4,7.81,17.4,17.404,0.004,9.601-7.803,17.401-17.403,17.403z"/><path d="m212.21,16.244v41.769c0,1.92,1.56,3.48,3.48,3.48h29.007v-6.961h-25.532v-13.924h16.243v-6.961h-16.242v-13.922h25.525v-6.961h-29.007c-1.921-0.004-3.476,1.556-3.476,3.48z"/><path d="m317.57,16.244v41.769c0,1.92,1.56,3.48,3.48,3.48h29.006v-6.961h-25.53v-13.924h16.244v-6.961h-16.24v-13.922h25.525v-6.961h-29.01c-1.922-0.004-3.48,1.556-3.48,3.48z"/><path d="m284.44,12.763h-15.084c-1.922,0-3.48,1.559-3.48,3.48v45.25h6.962v-20.885h11.603c7.677,0,13.923-6.246,13.923-13.922,0.01-7.676-6.24-13.926-13.92-13.923z"/><path d="M284.44,33.647h-11.6v-13.922h11.603c3.839,0,6.96,3.12,6.96,6.961s-3.121,6.964-6.963,6.961z"/><path d="M404.48,12.763v35.636l-28.66-34.384c-0.938-1.127-2.481-1.545-3.859-1.045s-2.296,1.808-2.296,3.273v45.25h6.962v-35.635l28.652,34.383c0.675,0.81,1.66,1.25,2.67,1.25,0.396,0,0.797-0.066,1.185-0.207,1.378-0.5,2.296-1.808,2.296-3.273v-45.25h-6.958z"/><path d="m131.82,25.261c-0.017-0.09-0.032-0.18-0.056-0.268-0.015-0.053-0.033-0.103-0.05-0.155-0.025-0.078-0.051-0.156-0.082-0.232-0.022-0.053-0.047-0.104-0.071-0.155-0.034-0.072-0.069-0.143-0.109-0.212-0.028-0.051-0.06-0.099-0.091-0.148-0.043-0.066-0.087-0.131-0.135-0.194-0.035-0.047-0.071-0.092-0.109-0.137-0.05-0.06-0.104-0.117-0.158-0.173-0.042-0.042-0.084-0.084-0.128-0.125-0.058-0.053-0.118-0.103-0.181-0.151-0.048-0.037-0.095-0.075-0.145-0.109-0.018-0.013-0.034-0.028-0.053-0.04l-33.939-22.626c-1.071-0.715-2.468-0.715-3.539,0l-33.938,22.625c-0.019,0.012-0.034,0.027-0.053,0.04-0.05,0.035-0.097,0.072-0.145,0.109-0.062,0.049-0.123,0.099-0.181,0.15-0.044,0.04-0.086,0.082-0.127,0.125-0.056,0.056-0.108,0.113-0.159,0.173-0.038,0.045-0.074,0.09-0.109,0.14-0.048,0.063-0.092,0.127-0.135,0.194-0.031,0.049-0.062,0.097-0.091,0.148-0.04,0.069-0.075,0.14-0.108,0.21-0.024,0.051-0.05,0.103-0.071,0.155-0.031,0.076-0.058,0.154-0.083,0.232-0.017,0.052-0.035,0.103-0.049,0.15-0.023,0.088-0.04,0.177-0.056,0.268-0.009,0.046-0.02,0.091-0.026,0.138-0.018,0.138-0.028,0.276-0.028,0.417v22.63c0,0.14,0.01,0.28,0.03,0.417,0.007,0.05,0.02,0.09,0.03,0.138,0.016,0.09,0.03,0.18,0.06,0.27,0.014,0.05,0.03,0.1,0.05,0.155,0.025,0.08,0.05,0.16,0.08,0.233,0.021,0.05,0.05,0.1,0.07,0.15,0.033,0.07,0.07,0.14,0.11,0.213,0.028,0.05,0.06,0.1,0.09,0.146,0.043,0.07,0.09,0.13,0.14,0.19,0.035,0.05,0.07,0.09,0.11,0.138,0.051,0.06,0.1,0.12,0.16,0.173,0.041,0.04,0.08,0.09,0.13,0.12,0.058,0.05,0.12,0.1,0.18,0.152,0.048,0.04,0.1,0.07,0.14,0.109,0.019,0.01,0.03,0.03,0.05,0.039l33.929,22.637c0.536,0.36,1.15,0.54,1.77,0.537s1.234-0.18,1.77-0.537l33.938-22.625c0.019-0.012,0.035-0.026,0.053-0.039,0.05-0.035,0.097-0.072,0.145-0.109,0.062-0.049,0.123-0.1,0.181-0.152,0.044-0.039,0.086-0.082,0.128-0.124,0.055-0.056,0.108-0.113,0.158-0.173,0.038-0.045,0.074-0.09,0.109-0.138,0.048-0.063,0.092-0.128,0.135-0.194,0.031-0.048,0.062-0.097,0.091-0.146,0.04-0.07,0.075-0.141,0.109-0.213,0.024-0.051,0.049-0.102,0.071-0.154,0.031-0.077,0.057-0.155,0.082-0.233,0.017-0.052,0.035-0.103,0.05-0.155,0.023-0.088,0.039-0.178,0.056-0.268,0.008-0.046,0.02-0.091,0.025-0.138,0.018-0.138,0.028-0.276,0.028-0.417v-22.626c0-0.141-0.011-0.279-0.028-0.417-0.008-0.049-0.023-0.089-0.033-0.138z"/><path d="M94.741,44.677,83.456,37.129,94.741,29.58,106.03,37.129,94.741,44.677z"/><path d="M91.551,24.037,77.717,33.29,66.55,25.82,91.551,9.153v14.884z"/><path d="m71.978,37.128-7.982,5.339v-10.678l7.982,5.339z"/><path d="m77.717,40.97,13.834,9.252v14.884l-25.001-16.669,11.167-7.469z"/><path d="m97.932,50.22,13.834-9.252,11.168,7.469-25.002,16.667v-14.884z"/><path d="m117.5,37.13,7.983-5.34v10.679l-7.983-5.341z"/><path d="M111.77,33.29,97.932,24.038v-14.885l25.002,16.667-11.168,7.47z"/></svg> <script src='https://cdn.rawgit.com/jwagner/simplex-noise.js/master/simplex-noise.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Animation - Script Codes CSS Codes

html { display: table; width: 100%; height: 100%;
}
body { display: table-cell; vertical-align: middle; text-align: center; background: -webkit-radial-gradient(#211d30, #0b0a10); background: radial-gradient(#211d30, #0b0a10);
}
svg { -webkit-transform: scale(2); transform: scale(2); padding: 10px;
}
path { fill: none; stroke: #70609f; stroke-width: 1;
}

SVG Animation - Script Codes JS Codes

(function() { 'use strict'; var $; $ = document.querySelectorAll.bind(document); $.each = function(el, cb) { return Array.prototype.forEach.call($(el), cb); }; $.loop = function(cb) { var fn; return (fn = function() { return requestAnimationFrame((cb(), fn)); })(); }; this.addEventListener('load', function() { var simplex; simplex = new SimplexNoise; $.each('path', function(p) { p.style.strokeDasharray = p.getTotalLength() / 2; return p.style.strokeDashoffset = 0; }); return $.loop(function() { return $.each('path', function(p) { var n, r, x, y; r = p.getBoundingClientRect(); x = r.left + r.width / 2; y = r.top + r.height / 2; n = 2 * simplex.noise3D(0.2 * x, 0.2 * y, 0.0001 * Date.now()); return p.style.strokeDashoffset = n + parseFloat(p.style.strokeDashoffset); }); }); });
}).call(this);
SVG Animation - Script Codes
SVG Animation - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded September 13, 2022
Rating 3
Size 4,793 Kb
Views 62,744
Do you need developer help for SVG Animation?

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!

Thepheer (thepheer) Script Codes
Create amazing captions 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!