Basic Snap.svg JS Animation

Developer
Jon Christensen
Size
5,622 Kb
Views
36,432
  1. Basic Snap.svg JS Animation Previews
  2. Basic Snap.svg JS Animation HTML Codes
  3. Basic Snap.svg JS Animation CSS Codes
  4. Basic Snap.svg JS Animation JS Codes

How do I make an basic snap.svg js animation?

Just a quick example of what can be done with Snap.svg JS library.Icons slightly modified from the Meteocons icon set: http://www.alessioatzeni.com/meteocons/. What is a basic snap.svg js animation? How do you make a basic snap.svg js animation? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Basic Snap.svg JS Animation Previews
IQ Test

Basic Snap.svg JS Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Snap.svg JS Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .svg-container { display: block; width: 100px; height: 100px;
}
.svg-container svg { max-width: 100%; max-height: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="svg-container"> <svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve">
<path id="circle" fill="#1D1D1B" d="M256,144c-61.75,0-112,50.25-112,112s50.25,112,112,112s112-50.25,112-112S317.75,144,256,144z M256,336	c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c44.188,0,80,35.812,80,80C336,300.188,300.188,336,256,336z"/>
<path id="rays" fill="#1D1D1B" d="M256,112c8.833,0,16-7.167,16-16V64c0-8.833-7.167-16-16-16s-16,7.167-16,16v32	C240,104.833,247.167,112,256,112z M256,400c-8.833,0-16,7.167-16,16v32c0,8.833,7.167,16,16,16s16-7.167,16-16v-32	C272,407.167,264.833,400,256,400z M380.438,154.167l22.625-22.625c6.25-6.25,6.25-16.375,0-22.625s-16.375-6.25-22.625,0	l-22.625,22.625c-6.25,6.25-6.25,16.375,0,22.625S374.188,160.417,380.438,154.167z M131.562,357.834l-22.625,22.625	c-6.25,6.249-6.25,16.374,0,22.624s16.375,6.25,22.625,0l22.625-22.624c6.25-6.271,6.25-16.376,0-22.625	C147.938,351.583,137.812,351.562,131.562,357.834z M112,256c0-8.833-7.167-16-16-16H64c-8.833,0-16,7.167-16,16s7.167,16,16,16h32	C104.833,272,112,264.833,112,256z M448,240h-32c-8.833,0-16,7.167-16,16s7.167,16,16,16h32c8.833,0,16-7.167,16-16	S456.833,240,448,240z M131.541,154.167c6.251,6.25,16.376,6.25,22.625,0c6.251-6.25,6.251-16.375,0-22.625l-22.625-22.625	c-6.25-6.25-16.374-6.25-22.625,0c-6.25,6.25-6.25,16.375,0,22.625L131.541,154.167z M380.459,357.812	c-6.271-6.25-16.376-6.25-22.625,0c-6.251,6.25-6.271,16.375,0,22.625l22.625,22.625c6.249,6.25,16.374,6.25,22.624,0 s6.25-16.374,0-22.625L380.459,357.812z"/>
</svg>
</div>
<div class="svg-container"> <svg version="1.1" id="cloud_snow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512" height="512" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="flake-1" data-translate-origin="0,-200" fill="#1D1D1B" d="M326.042,443.688l-18-10.376c0.542-3.124,0.958-6.311,0.958-9.624c0-3.312-0.416-6.5-1-9.625l18.042-10.396	c8.417-4.917,11.291-15.729,6.458-24.104c-4.876-8.479-15.667-11.375-24.125-6.5l-18.188,10.5c-4.877-4.146-10.375-7.396-16.5-9.604	v-20.896c0-9.771-7.938-17.688-17.688-17.688s-17.666,7.917-17.666,17.688v20.875c-6.126,2.188-11.646,5.479-16.521,9.625	l-18.146-10.5c-8.479-4.875-19.292-2-24.167,6.479c-4.875,8.417-1.938,19.25,6.5,24.126l17.959,10.375	c-0.584,3.146-0.959,6.334-0.959,9.646s0.375,6.5,0.959,9.623L186,443.688c-8.459,4.875-11.375,15.75-6.5,24.188	s15.688,11.312,24.125,6.438l18.167-10.438c4.874,4.125,10.396,7.375,16.542,9.562v20.938c0,9.749,7.916,17.624,17.666,17.624	s17.688-7.875,17.688-17.624v-20.938c6.125-2.188,11.688-5.438,16.521-9.625l18.167,10.5c8.458,4.875,19.249,2,24.125-6.438	C337.375,459.438,334.5,448.625,326.042,443.688z M256,441.375c-9.75,0-17.688-7.938-17.688-17.688s7.938-17.646,17.688-17.646	s17.667,7.896,17.667,17.646S265.75,441.375,256,441.375z"/>
<path id="flake-2" fill="#1D1D1B" d="M474.166,396.25l-12.083-3.208c-0.291-3.833-1.208-7.479-2.896-10.979l8.771-8.771	c4.125-4.125,4.104-10.792,0-14.854c-4.083-4.104-10.708-4.125-14.833,0l-8.791,8.75c-3.459-1.625-7.146-2.562-10.959-2.875	l-3.209-12.062c-1.499-5.583-7.25-8.938-12.874-7.438c-5.604,1.521-8.875,7.271-7.417,12.875l3.209,11.896	c-1.584,1.084-3.084,2.292-4.5,3.667c-1.375,1.417-2.542,2.916-3.626,4.459l-11.896-3.209c-5.604-1.499-11.396,1.876-12.896,7.438	c-1.499,5.625,1.876,11.354,7.417,12.875l12,3.229c0.334,3.771,1.292,7.458,2.979,10.959l-8.812,8.812	c-4.083,4.104-4.062,10.729,0.042,14.812c4.083,4.083,10.708,4.125,14.792,0.042l8.832-8.833c3.459,1.707,7.168,2.666,11.001,2.957	l3.166,12.021c1.542,5.604,7.25,8.938,12.876,7.438c5.583-1.5,8.957-7.249,7.458-12.917l-3.209-11.896	c1.5-1.062,3.042-2.25,4.459-3.625c1.375-1.396,2.542-2.938,3.624-4.479l11.917,3.209c5.604,1.5,11.375-1.854,12.854-7.417	C483.062,403.541,479.75,397.792,474.166,396.25z M438.312,402.938c-4.125,4.125-10.771,4.104-14.875,0 c-4.062-4.062-4.104-10.729,0-14.854c4.104-4.083,10.771-4.083,14.875,0C442.375,392.188,442.375,398.875,438.312,402.938z"/>
<path id="flake-3" fill="#1D1D1B" d="M131.835,349.936c-1.501-5.56-7.251-8.894-12.897-7.436l-11.875,3.188c-1.104-1.5-2.25-3.021-3.646-4.438	c-1.416-1.375-2.916-2.562-4.479-3.625l3.188-11.938c1.5-5.604-1.834-11.375-7.375-12.854c-5.625-1.5-11.375,1.834-12.875,7.417	l-3.25,12.062c-3.812,0.312-7.458,1.25-10.938,2.896l-8.812-8.771c-4.125-4.125-10.75-4.104-14.834,0	c-4.104,4.104-4.104,10.75,0,14.854l8.771,8.771c-1.646,3.5-2.604,7.188-2.896,10.979l-12.042,3.208	c-5.625,1.542-8.959,7.25-7.458,12.875c1.521,5.583,7.271,8.875,12.896,7.417l11.875-3.23c1.062,1.604,2.25,3.105,3.688,4.502	c1.375,1.375,2.875,2.604,4.438,3.625l-3.188,11.896c-1.5,5.625,1.834,11.417,7.416,12.917c5.626,1.5,11.334-1.833,12.834-7.438	l3.25-12c3.812-0.312,7.5-1.271,11-2.938l8.791,8.792c4.084,4.124,10.709,4.041,14.834-0.042c4.062-4.062,4.125-10.708,0-14.812	L109.439,377c1.688-3.46,2.688-7.188,2.938-11.001l12.062-3.188C130.001,361.29,133.335,355.561,131.835,349.936z M88.562,370.958	c-4.104,4.104-10.75,4.104-14.875,0c-4.062-4.083-4.062-10.771,0-14.833c4.125-4.083,10.771-4.083,14.875,0	S92.625,366.875,88.562,370.958z"/>
<path id="cloud-outline" fill="#1D1D1B" d="M512,176c0-61.75-50.25-112-112-112c-5.312,0-10.562,0.375-15.792,1.125C354.334,24.417,307.188,0,256,0	c-51.188,0-98.312,24.417-128.208,65.125C122.562,64.375,117.312,64,112,64C50.25,64,0,114.25,0,176s50.25,112,112,112	c13.688,0,27.084-2.5,39.709-7.333C180.666,305.917,217.5,320,256,320c38.542,0,75.333-14.083,104.291-39.333	C372.916,285.5,386.312,288,400,288C461.75,288,512,237.75,512,176z"/>
<path id="cloud-interior" fill="#FFFFFF" d="M354.062,241.333C330.584,269.625,295.624,288,256,288c-39.625,0-74.584-18.375-98.062-46.667	C144.938,250.5,129.125,256,112,256c-44.188,0-80-35.812-80-80s35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083	C163.667,60.667,206.291,32,256,32s92.334,28.667,113.541,70.083C378.938,98.208,389.209,96,400,96c44.188,0,80,35.812,80,80	s-35.812,80-80,80C382.875,256,367.084,250.5,354.062,241.333z"/>
</svg>
</div>
<div class="svg-container"> <svg id="cloud_lightning" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<polygon id="lightning-bolt" opacity="0" fill="#1D1D1B" points="192,352 224,384 192,480 288,384 256,352 288,256 "/>
<path id="cloud-outline" fill="#1D1D1B" d="M512,176c0-61.75-50.25-112-112-112c-5.312,0-10.562,0.375-15.792,1.125C354.334,24.417,307.188,0,256,0	c-51.188,0-98.312,24.417-128.208,65.125C122.562,64.375,117.312,64,112,64C50.25,64,0,114.25,0,176s50.25,112,112,112	c13.688,0,27.084-2.5,39.709-7.333C180.666,305.917,217.5,320,256,320c38.542,0,75.333-14.083,104.291-39.333	C372.916,285.5,386.312,288,400,288C461.75,288,512,237.75,512,176z"/>
<path id="cloud-interior" fill="#FFFFFF" d="M354.062,241.333C330.584,269.625,295.624,288,256,288c-39.625,0-74.584-18.375-98.062-46.667	C144.938,250.5,129.125,256,112,256c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083	C163.667,60.667,206.291,32,256,32s92.334,28.667,113.541,70.083C378.938,98.208,389.209,96,400,96c44.188,0,80,35.812,80,80	c0,44.188-35.812,80-80,80C382.875,256,367.084,250.5,354.062,241.333z"/>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://snapsvg.io/assets/js/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic Snap.svg JS Animation - Script Codes CSS Codes

.svg-container { display: block; width: 100px; height: 100px;
}
.svg-container svg { max-width: 100%; max-height: 100%;
}

Basic Snap.svg JS Animation - Script Codes JS Codes

$(document).ready(function(){	// Sun vars // Idealy, load sun via external file to keep HTML clean	var sun = Snap.select('#sun');	var sunCircle = sun.select('#circle');	var sunRays = sun.select('#rays');	// Sun events	raysAnimation();	// Infinite animation for the sun rays	function raysAnimation(){	sunRays.stop().animate(	{ transform: 'r90,256,256'}, // Basic rotation around a point. No frills.	10000, // Nice slow turning rays	function(){	sunRays.attr({ transform: 'rotate(0 256 256)'}); // Reset the position of the rays.	raysAnimation(); // Repeat this animation so it appears infinite.	}	);	}	var cloud_snow = Snap.select('#cloud_snow');	var flakes = ['flake-1','flake-2','flake-3']; // Setup our snow. Matches IDs in SVG.	snow();	function snow(){	for (var i=0; i<flakes.length; i++){	var flakeId = flakes[i];	var flake = cloud_snow.select('#'+flakeId); // Select each individual flake from our list	var cx = flake.getBBox().cx; // Get its initial coordinates	var cy = flake.getBBox().cy;	animateFlake(flake, cx, cy); // Send it to be infinitely animated	}	}	function animateFlake(flake, cx, cy){	flake.attr({ transform: 't0 -200'}); // Reset the flake's position to behind the cloud	var timing = getRandomArbitrary(2000,10000); // Random transition time between times we specify var deg = getRandomArbitrary(-360,360); // Random rotation (allows it to go either direction) // Animate the flake and do a new animation for it when it's done (repeat this function)	flake.stop().animate({ transform: 't0 200 r'+deg+' '+cx+' '+cy}, timing, function(){ animateFlake(flake, cx, cy);});	} var cloud_lightning = Snap.select('#cloud_lightning'); var strikeCount = 0; function strike(){ var bolt = cloud_lightning.select('#lightning-bolt'); if (strikeCount < 4){ var opacity = parseInt(bolt.attr('opacity')); var newOpacity = (opacity === 1) ? 0 : 1; bolt.stop().animate({ opacity: newOpacity}, 100, strike); strikeCount++; } else { strikeCount = 0; setTimeout(strike, getRandomArbitrary(1000,5000)); var x = getRandomArbitrary(-200,200); bolt.attr({ transform: 't'+x+',0'}); } }
strike(); // Lets us get random numbers from within a range we specify. From MDN docs.
function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min;
}
});
Basic Snap.svg JS Animation - Script Codes
Basic Snap.svg JS Animation - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 4.5
Size 5,622 Kb
Views 36,432
Do you need developer help for Basic Snap.svg JS 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!

Jon Christensen (JMChristensen) Script Codes
Name
Animated gradient text
Raphael SVG Circle Timer
SVG Text Masking
Velocity Example
CSS Banners
CSS Transition End Sequence
Section Diagonal Areas
SVG Animated Stroke Dash
SVG Button Animation
Google Button Ripple
Create amazing video scripts 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!