Techniques for SVG Animation and Development

Learn SVG animation techniques including transforming an element on an x- and y-axis, blinking, hover states, clipping paths and scrolling backgrounds.

<?php echo file_get_contents("illustration.svg"); ?>

PREPARING YOUR FILES

  • Field (background)
  • Stars
  • Rocket
<svg id="space">
<g id="field">
<!-- Grouped shapes and paths -->
</g>
<g id="stars">
<!-- Grouped shapes and paths -->
</g>
<g id="rocket">
<!-- Grouped shapes and paths -->
</g>
</svg>

ANIMATE ALONG THE X- AND Y-AXIS

@keyframes hover_y {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(10%);
}
}
#rocket {
animation-name: hover_y;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#rocket {
-webkit-animation: hover_y 7s ease-in-out infinite;
-moz-animation: hover_y 7s ease-in-out infinite;
-o-animation: hover_y 7s ease-in-out infinite;
animation: hover_y 7s ease-in-out infinite;
}
@keyframes hover_x {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(5%);
}
}
#stars {
animation: hover_x 25s ease-in-out infinite;
}

ANIMATE ON HOVER

<svg>
<g id="background">
</g>
<g id="launchpad">
</g>
<g id="rockets">
<g id="rocket1"></g>
<g id="rocket2"></g>
<g id="rocket3"></g>
<g id="rocket4">
<g id="takeoff"></g>
<g id="flame1"></g>
<g id="flame2"></g>
<g id="body"></g>
</g>
</g>
</svg>
@keyframes hideshow {
0% { opacity: 1; }
10% { opacity: 1; }
15% { opacity: 0; }
100% { opacity: 0; }
}
#flame1 {
animation: hideshow 5s 1.5s ease-in-out infinite;
}
#flame2 {
animation: hideshow 5s 0.5s ease-in-out infinite;
}
@keyframes hover_y {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-150%);
}
}
#rocket3 {
transform: translateY(0);
}
#rocket3:hover {
animation: hover_y 7s ease-in-out;
}
@keyframes takeoff {
0% { opacity: 1; }
10% { opacity: 1; }
15% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}
#takeoff {
opacity:0;
}
#rocket3:hover #takeoff {
animation: takeoff 7s 0.5s ease-in-out infinite;
}

SVG CLIP PATHS AND BACKGROUND SCROLLING

<svg>
<g id=”background”></g>
<g id=”texture”></g>
<g id=”overlay”></g>
</svg>
<defs>
<clipPath id="planet" width="465" height="465">
<circle id="clip" fill="none" stroke="#010101" stroke-width="5.5" stroke-miterlimit="10" cx="772.529" cy="261.992" r="232.637"/>
</clipPath>
</defs>
<g id="clip">
<g id="texture"></g>
</g>
#clip {
clip-path: url(#planet);
}
@keyframes rotate { 
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
#texture {
animation:rotate 25s linear infinite;
}

--

--

--

Senior Developer by day, Fun Professional by night

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Intermediate: How to Integrating the Huawei Game Service in Unity Game

Protocol in Swift

Laissez-Faire Art, the comeback Full-stack project.

Learning from SCRUM

Need Linux but can’t give up Windows?

Global Legal Hackathon team creates tool to help clear Californians’ marijuana convictions

5 Common Microsoft Outlook Issues and Their Solution

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Heidi Olsen

Heidi Olsen

Senior Developer by day, Fun Professional by night

More from Medium

Useful Style-related Features Of Browser Developer Tools to Explore in 2021

Getting Started With CSS Flex-Box(How To Create Boxes with Equal widths In a Container)

Considerations for writing React Components — Part 02: Function vs. Class components

How to style dl, dt, and dd HTML tags