Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 16, 2015 06:32
Show Gist options
  • Save anonymous/4962b4d94ccd2e6da4c1 to your computer and use it in GitHub Desktop.
Save anonymous/4962b4d94ccd2e6da4c1 to your computer and use it in GitHub Desktop.
Download ZIP
Dart SVG Animation
Raw
readme.md

Dart SVG Animation

Created by dartpad.dartlang.org.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dart SVG Animation</title>
<link rel="stylesheet" href="styles.css">
<script type="application/dart" src="main.dart"></script>
</head>
<body>
<div id="text"></div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" x="0px" y="0px"
width="400px" height="400px" viewBox="0 0 400 400">
<path id="right-flank" fill="#0083C9" d="M249.379,226.486l-6.676,15.572L166.174,166h58.82c0,0,2.807-0.409,3.645,1.966L249.379,226.486z"/>
<path id="right-ear" fill="#00D2B8" d="M201.84,141.906L166.174,166h58.82c0,0,2.168-0.25,2.645,0.566l-2.694-8.848l-15.024-14.68
C207.555,140.329,203.578,140.744,201.84,141.906z"/>
<path id="left-flank" fill="#00D2B8" d="M242.616,241.856l-15.022,6.799l-60.493-21.429c-1.035-0.395-1.101-3.696-1.101-3.696v-57.932
L242.616,241.856z"/>
<path id="left-paw" fill="#55DECA" d="M167.003,227.098l60.636,21.558l15.064-6.799L237.224,259h-43.856c0,0-14.077-13.929-18.141-17.993
C171.162,236.943,169.162,233.989,167.003,227.098z"/>
<path id="right-paw" fill="#00A4E4" d="M227.676,166.365c0.963,1.401,1.361,2.473,1.361,2.473l20.352,57.648l-6.711,15.37L259,236.463v-44.854
c0,0-13.678-13.965-17.741-17.882C237.193,169.811,231.466,166.319,227.676,166.365z"/>
<path id="left-ear" fill="#0083C9" d="M166.769,227.098c0,0-0.769-1.104-0.769-4.355v-57.144l-23.115,34.877c-1.626,1.774-1.567,6.538,1.595,9.755
l13.636,13.892L166.769,227.098z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" x="0px" y="0px"
width="400px" height="400px" viewBox="0 0 400 400">
<path id="right-flank" fill="#0083C9" d="M249.379,226.486l-6.676,15.572L166.174,166h58.82c0,0,2.807-0.409,3.645,1.966L249.379,226.486z"/>
<path id="right-ear" fill="#00D2B8" d="M201.84,141.906L166.174,166h58.82c0,0,2.168-0.25,2.645,0.566l-2.694-8.848l-15.024-14.68
C207.555,140.329,203.578,140.744,201.84,141.906z"/>
<path id="left-flank" fill="#00D2B8" d="M242.616,241.856l-15.022,6.799l-60.493-21.429c-1.035-0.395-1.101-3.696-1.101-3.696v-57.932
L242.616,241.856z"/>
<path id="left-paw" fill="#55DECA" d="M167.003,227.098l60.636,21.558l15.064-6.799L237.224,259h-43.856c0,0-14.077-13.929-18.141-17.993
C171.162,236.943,169.162,233.989,167.003,227.098z"/>
<path id="right-paw" fill="#00A4E4" d="M227.676,166.365c0.963,1.401,1.361,2.473,1.361,2.473l20.352,57.648l-6.711,15.37L259,236.463v-44.854
c0,0-13.678-13.965-17.741-17.882C237.193,169.811,231.466,166.319,227.676,166.365z"/>
<path id="left-ear" fill="#0083C9" d="M166.769,227.098c0,0-0.769-1.104-0.769-4.355v-57.144l-23.115,34.877c-1.626,1.774-1.567,6.538,1.595,9.755
l13.636,13.892L166.769,227.098z"/>
</svg>
</body>
</html>
Raw
main.dart
import "dart:html";
void main() {
DivElement text = querySelector("#text") as DivElement;
text.innerHtml = "Hello Dart!";
}
Raw
styles.css
svg {
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
#right-flank {
fill: #0074C1;
stroke-color: #0074C1;
-webkit-animation: right-flank 8s ease infinite alternate;
animation: right-flank 8s ease infinite alternate;
}
#right-ear {
fill: #00B5AB;
stroke-color: #00B5AB;
-webkit-animation: right-ear 8s ease-in infinite alternate;
animation: right-ear 8s ease-in infinite alternate;
}
#right-paw {
fill: #00A6E4;
stroke-color: #00A6E4;
-webkit-animation: right-paw 8s ease-out infinite alternate;
animation: right-paw 8s ease-out infinite alternate;
}
#left-flank {
fill: #00B5AB;
stroke-color: #00B5AB;
-webkit-animation: left-flank 8s ease-in-out infinite alternate;
animation: left-flank 8s ease-in-out infinite alternate;
}
#left-ear {
fill: #0074C1;
stroke-color: #0074C1;
-webkit-animation: left-ear 8s linear infinite alternate;
animation: left-ear 8s linear infinite alternate;
}
#left-paw {
fill: #41C1BC;
stroke-color: #41C1BC;
-webkit-animation: left-paw 8s ease infinite alternate;
animation: left-paw 8s ease infinite alternate;
}
@-webkit-keyframes left-ear {
20% {
-webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@keyframes left-ear {
20% {
-webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@-webkit-keyframes right-ear {
20% {
-webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@keyframes right-ear {
20% {
-webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@-webkit-keyframes left-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
fill: #00B5AB;
}
50% {
-webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
fill: #00B5AB;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #41C1BC;
}
}
@keyframes left-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
fill: #00B5AB;
}
50% {
-webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
fill: #00B5AB;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #41C1BC;
}
}
@-webkit-keyframes right-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00A6E4;
}
}
@keyframes right-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00A6E4;
}
}
@-webkit-keyframes left-flank {
20% {
-webkit-transform: translate(0px, 100px) scale(0.6);
transform: translate(0px, 100px) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(0px, 100px) scale(0.4);
transform: translate(0px, 100px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@keyframes left-flank {
20% {
-webkit-transform: translate(0px, 100px) scale(0.6);
transform: translate(0px, 100px) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(0px, 100px) scale(0.4);
transform: translate(0px, 100px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@-webkit-keyframes right-flank {
20% {
-webkit-transform: translate(100px, -25px) scale(0.6);
transform: translate(100px, -25px) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(110px, 0px) scale(0.4);
transform: translate(110px, 0px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@keyframes right-flank {
20% {
-webkit-transform: translate(100px, -25px) scale(0.6);
transform: translate(100px, -25px) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(110px, 0px) scale(0.4);
transform: translate(110px, 0px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment