Skip to content

Instantly share code, notes, and snippets.

@gferreira

gferreira/svg-test.html

Last active February 3, 2020 20:42
Show Gist options
  • Save gferreira/97e15760bd7c80c413d1c0e7f88dd641 to your computer and use it in GitHub Desktop.
Save gferreira/97e15760bd7c80c413d1c0e7f88dd641 to your computer and use it in GitHub Desktop.
Download ZIP
SVG + HTML + CSS + JS example
Raw
svg-test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG test</title>
<style>
@keyframes colorChange { from { background-color: yellow; } to { background-color: red; } }
svg { animation: colorChange 3s infinite alternate; }
#circle { fill: grey; } /* cursor: move; */
#circle:hover { stroke: magenta; }
#square { stroke: red; stroke-width: 20px; }
.shape:hover { fill: black !important; }
</style>
</head>
<body>
<svg height="800" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="makeDraggable(evt)">
<a xlink:href="https://drawbot.com/">
<path id='square' class='shape' d="M100,100 l400,0 l0,400 l-400,0 Z M100,100" fill="rgb(0,0,255)" transform="matrix(1,0,0,-1,0,800)"/>
</a>
<path id='circle' class='shape' d="M641.42,358.58 c78.1,78.1,78.1,204.74,0,282.84 c-78.1,78.1,-204.74,78.1,-282.84,0 c-78.1,-78.1,-78.1,-204.74,0,-282.84 c78.1,-78.1,204.74,-78.1,282.84,0 Z M641.42,358.58" fill="rgb(255,0,0)" stroke="rgb(0,255,0)" stroke-width="20" transform="matrix(1,0,0,-1,0,800)"/>
</svg>
</body>
<!-- http://greensock.com/draggable/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script>
Draggable.create("#circle", { bounds:"svg" });
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment