SVG play

Developer
Jim Savage
Size
3,365 Kb
Views
32,384
  1. SVG play Previews
  2. SVG play HTML Codes
  3. SVG play CSS Codes
  4. SVG play JS Codes

How do I make an svg play?

What is a svg play? How do you make a svg play? This script and codes were developed by Jim Savage on 19 November 2022, Saturday.

SVG play Previews
IQ Test

SVG play - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG play</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<svg version="1.1" width="400" height="400">	<circle class="keyline" cx="200" cy="200" r="100"/>	<circle class="circle" cx="200" cy="200" r="50" />	<text class="label" text-anchor="middle" x="200" y="206">	LOREM IPSUM	</text>	</svg>	<div id="controls">	<div id="slider"></div>	<button id="playBtn">play()</button>	<button id="pauseBtn">pause()</button>	<button id="resumeBtn">resume()</button>	<button id="reverseBtn">reverse()</button>	<button id="restartBtn">restart()</button>	<div>Speed:	<label><input type="radio" name="speed" value="0.25" id="slow"> slow</label>	<label><input type="radio" name="speed" value="1" id="normal" checked> normal</label>	<label><input type="radio" name="speed" value="2" id="fast"> fast</label>	</div>	</div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG play - Script Codes CSS Codes

body { background-color: #ddd; text-align: center; padding-top: 3rem;
}
.wrap { height: 100%;
}
svg { background-color: white;
}
svg .keyline { stroke-width: 2px; stroke: #45d0e1; fill: rgba(198, 240, 246, 0); stroke-dasharray: 628; stroke-dashoffset: 628; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
svg .circle { fill: #45d0e1;
}
svg text { fill: white; opacity: 0;
}
#controls { margin-top: 60px;
}
#slider { width: 400px; margin: auto;
}
button { padding: 4px; margin: 10px 0 10px 0;
}

SVG play - Script Codes JS Codes

var circle = $('svg .circle');
var keyline = $('svg .keyline');
var label = $('svg .label');
//instantiate a TimelineLite
var tl = new TimelineLite({onUpdate:updateSlider});
tl.to(keyline, 1, {css:{strokeDashoffset: 628*2, stroke:'#c6f0f6'}, ease:Power1.easeInOut}) .to(keyline, .5, {attr:{r: 60}, css:{fill:'rgba(198, 240, 246, 1)', strokeDashoffset: 'none', strokeDasharray: 'none'}, ease:Power4.easeOut}) .to(keyline, 1.5, {attr:{r: 150}, css:{}, ease:Elastic.easeOut}) .to(circle, 1.5, {attr:{r: 100}, css:{}, ease:Elastic.easeOut},'-=1.5')
.to(label, .3, {attr:{}, css:{opacity: 1}, ease:Power1.easeOut},'-=1.5');
tl.timeScale(1); // try 4 for super speed!
// controls
$( "#slider" ).slider({ range: false, min: 0, max: 1, step:.001, slide: function ( event, ui ) { tl.progress( ui.value ).pause(); }
});
function updateSlider() { $("#slider").slider("value", tl.progress());
}
$("#playBtn").click(function(){ //Play the timeline forward from the current position. //If tween is complete, play() will have no effect tl.play();
});
$("#pauseBtn").click(function(){ tl.pause();
});
$("#resumeBtn").click(function(){ //Resume playback in current direction. tl.resume();
});
$("#reverseBtn").click(function(){ tl.reverse();
});
$("#restartBtn").click(function(){ tl.restart();
});
$("#timeScale").change(function() { tl.timeScale(this.value)
})
$("input[name='speed']").change(function(v, val) { tl.timeScale(this.value); if (tl.progress() === 1) { tl.restart(); } else if (tl.paused()) { tl.resume(); }
});
SVG play - Script Codes
SVG play - Script Codes
Home Page Home
Developer Jim Savage
Username madebyjam
Uploaded November 19, 2022
Rating 3
Size 3,365 Kb
Views 32,384
Do you need developer help for SVG play?

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!

Jim Savage (madebyjam) Script Codes
Name
Bootstrap 3 inspired docs.
Minecraft Steve
Hover on everything but...
CSS3 background scroll
Cross-Browser image masking with SVG
3js TEST
Progression Steps
Stretch irregular shape around dynamic text.
Warhol Soup - CSS cylinder
Susy2 - mimicking the bootstrap3 grid
Create amazing love letters 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!