Simple Snap.svg Example

Developer
Rob Levin
Size
2,299 Kb
Views
34,408
  1. Simple Snap.svg Example Previews
  2. Simple Snap.svg Example HTML Codes
  3. Simple Snap.svg Example CSS Codes
  4. Simple Snap.svg Example JS Codes

How do I make an simple snap.svg example?

This is about the simplest example of using Snap.svg to animate "pre-existing" inline SVG by hooking in to the SVG's elements via their ID attributes. Snap.select is the power-horse there. Snap.animate is the power-horse for doing the actual animation.. What is a simple snap.svg example? How do you make a simple snap.svg example? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

Simple Snap.svg Example Previews
IQ Test

Simple Snap.svg Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Snap.svg Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg id="rocket-ship" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"> <g> <path id="exhaust" fill="#FFFFFF" d="M49.2,48.3l4.9,3.3c-0.5,0.8-1,1.5-1.5,2.4c-2,3.1-7.2,10.3-9.9,13.3L39.3,65 c2.3-4.4,7.3-12.8,8.3-14.4C48.2,49.8,48.7,49.1,49.2,48.3z M39.3,65C36.5,70.3,33,80,33,80s5.7-7.8,9.8-12.6c0,0,0.1-0.1,0.1-0.1 L39.3,65"/> <path id="ship" fill="#FFFFFF" d="M42.7,48.1c3.7-5.6,7.6-10.3,11.3-13.7L65,41.7c-1.7,4.7-4.5,10.2-8.2,15.7 c-2.4,3.6-4.9,6.8-7.3,9.6l0.2,13.2l-9.1,13.7l0-19c-0.4,0.3-0.9,0.5-1.3,0.7l-6.7-4.5c0-0.6,0.1-1.2,0.3-1.9L15,77l9.1-13.7 l12.8-5.2C38.4,54.9,40.4,51.5,42.7,48.1z M65,41.7l8.2-24.7L53.9,34.4l0,0"/> </g> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Snap.svg Example - Script Codes CSS Codes

body { background-color: orange;
}
.container { width: 200px; height: 200px; margin: 0 auto;
}

Simple Snap.svg Example - Script Codes JS Codes

var rocketShip = Snap.select('#rocket-ship');
var exhaust = rocketShip.select('#exhaust');
var ship = rocketShip.select('#ship');
rocketShip.stop().animate({ opacity: .7}, 200, mina.easeout, function() { exhaust.stop().animate({opacity: 0, transform: 't-20,34 s4'}, 2500, mina.easeout); ship.stop().animate({transform: 't60,-100'}, 5000, mina.easeout);
});
Simple Snap.svg Example - Script Codes
Simple Snap.svg Example - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3
Size 2,299 Kb
Views 34,408
Do you need developer help for Simple Snap.svg Example?

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!

Rob Levin (roblevin) Script Codes
Name
Code-reviewed
A Pen by Rob Levin
Vertical Formatting
Absolute fixed header footer with scrolling main content
SVG Frontend Masters Study Notes
Starter SVG
Centering
Pricing Plan Experiment
Backed by UXR
Linear Step Keyframe Animation
Create amazing blog posts 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!