Skip to content

Commit 8f80244

Browse files
shamashama
committed
drawing animating with svgs
1 parent 467b192 commit 8f80244

4 files changed

Lines changed: 78 additions & 0 deletions

File tree

‎drawing-animating-svgs/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Drawing & Animating SVGs
2+
3+
> [https://www.youtube.com/watch?v=Nnnx9ytFqK4](https://www.youtube.com/watch?v=Nnnx9ytFqK4)
4+
5+
Install [Node.js](https://nodejs.org/).
6+
7+
Within this folder run the terminal command `npm install` to install the
8+
`dependencies` and `devDependencies`.
9+
10+
Then run `npm start` to run the app viewable on `http://localhost:9966`.

‎drawing-animating-svgs/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Obligatory Bear Inclusion</title>
6+
</head>
7+
<body>
8+
9+
<svg width="200" viewBox="0 0 100 100" style="border: 1px solid #ddd;">
10+
<!-- <rect width="50" height="50" x="0" y="0" fill="none" stroke="red" /> -->
11+
<!-- <path d="M 20 20 L 30 0 L 30 30 L 0 30 L 0 0" /> -->
12+
<!-- <path d="M 10 10 h 30 v 30 h -30 z" stroke="red" fill="none" /> -->
13+
<!-- <path id="percent" fill="none" stroke="red" /> -->
14+
15+
<g transform="translate(20,100) scale(1) rotate(-90)" id="chart" stroke="red" stroke-width="9"></g>
16+
</svg>
17+
18+
<style>
19+
path {
20+
animation: grow 5s;
21+
}
22+
@keyframes grow {
23+
0% {
24+
transform: scaleX(0);
25+
}
26+
100% {
27+
transform: scaleX(1);
28+
}
29+
}
30+
</style>
31+
32+
<script>
33+
//const svg = document.querySelector('svg')
34+
const chart = document.querySelector('#chart')
35+
const data = [10, 30, 20, 60]
36+
data.forEach(function (num, index) {
37+
const bar = document.createElementNS('http://www.w3.org/2000/svg', 'path')
38+
bar.setAttribute('d', `M 0 ${index * 10 + 10} l ${num} 0 z`)
39+
// bar.style.stroke = 'black'
40+
// bar.style.strokeWidth = 5
41+
chart.appendChild(bar)
42+
})
43+
44+
// const element = document.getElementById('percent')
45+
// let percent = 0
46+
// setInterval(function () {
47+
// percent += 10
48+
// element.setAttribute('d', 'M 0 10 h ' + percent)
49+
// }, 1000)
50+
</script>
51+
52+
</body>
53+
</html>

‎drawing-animating-svgs/index.js‎

Whitespace-only changes.

‎drawing-animating-svgs/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "drawing-animating-svgs",
3+
"version": "0.1.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "budo index.js --live",
8+
"test": "node test.js"
9+
},
10+
"author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
11+
"license": "MIT",
12+
"devDependencies": {
13+
"budo": "^11.2.0"
14+
}
15+
}

0 commit comments

Comments
 (0)