added my art (#279)

zero-to-mastery · Jun 6, 2022 · b279ac1 · b279ac1
1 parent 3e1eb37
commit b279ac1
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 0 deletions.
diff --git a/src/art/savday/icon.png b/src/art/savday/icon.png
diff --git a/src/art/savday/index.html b/src/art/savday/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Canvas Animation</title>
+</head>
+<body>
+
+    <canvas id="myCanvas" width="500" height="500"></canvas>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/art/savday/meta.json b/src/art/savday/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Purple Rain",
+    "author_name": "savday",
+    "author_github_url": "https://github.com/savday/"
+}
diff --git a/src/art/savday/script.js b/src/art/savday/script.js
@@ -0,0 +1,20 @@
+var c = document.getElementById("myCanvas");
+var ctx = c.getContext("2d");
+
+// Create gradient
+var grd = ctx.createLinearGradient(0, 0, 400, 0);
+grd.addColorStop(0, "blue");
+grd.addColorStop(1, "white");
+
+// Fill with gradient
+ctx.fillStyle = grd;
+ctx.fillRect(0, 0, 500, 500);
+
+//Create circle
+ctx.fillStyle = 'black';
+ctx.beginPath();
+ctx.arc(250, 250, 100, 0, 2 * Math.PI);
+ctx.stroke();
+ctx.fill()
+ctx.arc(250, 250, 150, 0, 2 * Math.PI);
+ctx.stroke();
diff --git a/src/art/savday/style.css b/src/art/savday/style.css
@@ -0,0 +1,13 @@
+body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0 auto;
+    background-color: #202020;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    border: 2px solid #fff;
+}