Skip to content

Instantly share code, notes, and snippets.

@winniehell

winniehell/index.html

Last active March 9, 2016 17:48
Show Gist options
  • Save winniehell/68aa53d26860e27a2e55 to your computer and use it in GitHub Desktop.
Save winniehell/68aa53d26860e27a2e55 to your computer and use it in GitHub Desktop.
Download ZIP
SVG: Grow and Shrink and Colors
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grow and Shrink</title>
</head>
<body>
<svg width="100%" height="100%">
<animate id="shrink"
attributeName="viewBox"
attributeType="XML"
from="0 0 60 60" to="0 0 200 200"
begin="0s; grow.end" dur="2s"
></animate>
<animate id="grow"
attributeName="viewBox"
attributeType="XML"
from="0 0 200 200" to="0 0 60 60"
begin="shrink.end" dur="2s"
></animate>
<circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
<animate id="makeGreen"
attributeName="fill"
attributeType="CSS"
from="#0000ff" to="#00ff00"
begin="0s; makeBlue.end" dur="1s"
></animate>
<animate id="makePink"
attributeName="fill"
attributeType="CSS"
from="#00ff00" to="#ff00ff"
begin="makeGreen.end" dur="1s"
></animate>
<animate id="makeRed"
attributeName="fill"
attributeType="CSS"
from="#ff00ff" to="#ff0000"
begin="makePink.end" dur="1s"
></animate>
<animate id="makeBlue"
attributeName="fill"
attributeType="CSS"
from="#ff0000" to="#0000ff"
begin="makeRed.end" dur="1s"
></animate>
</circle>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment