Add formas basicas topic

willianjusten · May 17, 2016 · 4c06613 · 4c06613
1 parent 09e9556
commit 4c06613
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/formas-basicas/css/main.css b/formas-basicas/css/main.css
@@ -0,0 +1,27 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+body {
+    padding: 50px;
+}
+
+p {
+    font-size: 30px;
+    padding: 10px 0;
+}
+
+h1 {
+    margin-bottom: 50px;
+}
+
+h2 {
+    margin: 50px 0 20px;
+}
+
+svg {
+    border: 1px solid red;
+}
diff --git a/formas-basicas/index.html b/formas-basicas/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Formas Básicas</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+<h1>Formas Básicas</h1>
+
+<h2>Rect</h2>
+<svg>
+    <rect x="50" y="20" width="100" height="100"/>
+</svg>
+
+<h2>Circle</h2>
+<svg>
+    <circle r="25" cx="150" cy="70" />
+</svg>
+
+<h2>Ellipse</h2>
+<svg>
+    <ellipse rx="100" ry="50" cx="150" cy="75" />
+</svg>
+
+<h2>Line</h2>
+<svg>
+    <line x1="10" y1="10" x2="100" y2="120" stroke="#000" stroke-width="4"/>
+</svg>
+
+<h2>Polyline</h2>
+<svg>
+    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120, 120,160" fill="transparent" stroke="#000" stroke-width="4"/>
+</svg>
+
+<h2>Polygon</h2>
+<svg>
+    <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#000" stroke="red" stroke-width="4"/>
+</svg>
+
+<h2>Path</h2>
+<svg>
+    <path 
+        stroke="#000"
+        stroke-width="4"
+        fill="none"
+        d="M40,20 L40,80 A30,30 0 1,0 100,100z"
+    />
+</svg>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -31,9 +31,11 @@ Olá! Eu sou Willian. Atualmente Freelance Web Engineer, onde ajudo a criar nova
     - Inline SVG
 
 - A estrutura do SVG
+    - Plano cartesiano
     - ViewBox e ViewPort
     - preserveAspectRatio
     - Formas Básicas
+    - Elemento Path
     - Groups, defs, use e symbol
 
 - Estilizando o SVG