Animated radial gradient

Developer
Size
2,303 Kb
Views
30,360

How do I make an animated radial gradient?

Simple test of background animation. kind of a follow up to my previous experiment with globe in d3.js and animated gradient in form of svg. What is a animated radial gradient? How do you make a animated radial gradient? This script and codes were developed by Rafszul on 14 September 2022, Wednesday.

Animated radial gradient Previews

Animated radial gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animated radial gradient</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
</div>
<svg width="100%" height="100%" viewBox="0 0 200 200"> <defs> <radialGradient id="rgA" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="200" spreadMethod="repeat"> <stop offset="0" stop-color="orange"> <animate id="anim" attributeName="stop-opacity" calcMode="linear" begin="107s" dur="0.8s" values="0;1;0" keitimes="0;0.5;1" repeatCount="indefinite"/> </stop> <stop stop-color="red"> <animate attributeName="offset" calcMode="linear" begin="107s" dur="1s" values="0;0;1" keitimes="0;1;2" repeatCount="indefinite"/> <animate attributeName="stop-opacity" calcMode="linear" begin="107s" dur="2s" values="0;1;1" keitimes="0;1;2" repeatCount="indefinite"/> </stop> <stop stop-color="yellow" stop-opacity="0"> <animate attributeName="offset" calcMode="linear" begin="107s" dur="2s" values="0;1" keitimes="0;1" repeatCount="indefinite"/> </stop> <stop stop-color="purple"> <animate attributeName="offset" calcMode="linear" begin="107s" dur="2s" values="1;1;1" keitimes="0;1;1" repeatCount="indefinite"/> <animate attributeName="stop-opacity" calcMode="linear" begin="107s" dur="2s" values="1;1;0" keitimes="0;1;1" repeatCount="indefinite"/> </stop> <stop offset="1" stop-color="blue"> <animate attributeName="stop-opacity" calcMode="linear" begin="107s" dur="2s" values="0;1;0" keitimes="0;1;1" repeatCount="indefinite"/> </stop> </radialGradient> <radialGradient id="rgB" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="200"> <stop offset="50%" stop-opacity="0.2"/> <stop offset="150%" stop-opacity="0.6"/> </radialGradient> </defs> <circle id="circ" cx="100" cy="100" r="200" fill="url(#rgA)"/> <circle id="circ2" cx="100" cy="100" r="200" fill="url(#rgB)"/>
</svg>
</body>
</html>

Animated radial gradient - Script Codes CSS Codes

/* this needs cleaning up and prefixes for the hearts to scroll in chrome
.test body { background:#000;
}
*/
.container { background-size:100%; opacity:1; z-index:-1; position:fixed; animation: animatedBackground 60s alternate ease-in-out	infinite; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/sweet_hearts_vectorized.png); width:100%; height:100%; top:0; left:0;
}
@keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; }
}
svg { position:absolute; opacity:0.6;
}
html, body, svg {
margin: 0;
width: 100%;
height: 100%;
}
/*
.texto-tittle {
font-family: 'Playball', cursive;
font-size: 40px;
fill: snow;
}
.texto-by {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 12px;
fill: snow;
letter-spacing: 1px;
opacity: .8;
}
*/
Animated radial gradient - Script Codes
Animated radial gradient - Script Codes
Home Page Home
Developer Rafszul
Username rafszul
Uploaded September 14, 2022
Rating 3.5
Size 2,303 Kb
Views 30,360
Do you need developer help for Animated radial gradient?

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!

Rafszul (rafszul) Script Codes
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!