Graph SVG

Developer
François Lesenne
Size
2,537 Kb
Views
42,504
  1. Graph SVG Previews
  2. Graph SVG HTML Codes
  3. Graph SVG CSS Codes
  4. Graph SVG JS Codes

How do I make an graph svg?

Graph SVG.. What is a graph svg? How do you make a graph svg? This script and codes were developed by François Lesenne on 12 August 2022, Friday.

Graph SVG Previews
IQ Test

Graph SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graph SVG</title> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Graph SVG</h1>	<div class="container">	<svg class="graph" version="1.0" xmlns="http://www.w3.org/2000/svg">	<rect x="50" y="1" width="449" height="250" class="gragh-rect"/>	<g class="graph-x">	<text x="100" y="270" class="gragh-text" style="text-anchor:middle;">2011</text>	<text x="200" y="270" class="gragh-text" style="text-anchor:middle;">2012</text>	<text x="300" y="270" class="gragh-text" style="text-anchor:middle;">2013</text>	<text x="400" y="270" class="gragh-text" style="text-anchor:middle;">2014</text>	</g>	<g class="graph-y">	<text x="40" y="250" class="gragh-text" style="text-anchor:end; baseline-shift:-.5ex;">0</text>	<text x="40" y="200" class="gragh-text" style="text-anchor:end; baseline-shift:-.5ex;">100</text>	<text x="40" y="150" class="gragh-text" style="text-anchor:end; baseline-shift:-.5ex;">200</text>	<text x="40" y="100" class="gragh-text" style="text-anchor:end; baseline-shift:-.5ex;">300</text>	<text x="40" y="50" class="gragh-text" style="text-anchor:end; baseline-shift:-.5ex;">400</text>	</g>	<path class ="graph-path" d="M 51 150 L 100 120 L 200 180 L 300 100 L 400 150 L 499 90 L 499 250 L 51 250"/>	<circle cx="100" cy="120" r="5" class="graph-circle"/>	<circle cx="200" cy="180" r="5" class="graph-circle"/>	<circle cx="300" cy="100" r="5" class="graph-circle"/>	<circle cx="400" cy="150" r="5" class="graph-circle"/>	Sorry, your browser does not support inline SVG.	</svg>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Graph SVG - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
* { position: relative; margin: 0; padding: 0; -webkit-transition: all .4s; transition: all .4s;
}
html,
body { width: 100%; height: 100%;
}
body {	padding-top: 30px;	background-color: #E0E4CC;	font-family: 'Roboto', 'sans-serif';	font-size: 16px;
}
.container {	margin: 0 auto;	padding: 2% 0; width: 800px;	height: 800px;	background-color: transparent;
}
h1 {	text-align: center;	color: #FA6900;	font-size: 4em;	font-weight: bold; letter-spacing: 0.2em;	text-shadow: -1px -1px 0 #DF5D00, 1px 1px 0 #DF5D00, 2px 2px 0 #D9772A, 3px 3px 0 #D9772A, 4px 4px 0 #D9772A;
}
.graph {	width: 500px;	height: 300px;	left: 120px;	-webkit-transition-duration: all 1s ease-in-out;	transition-duration: all 1s ease-in-out;
}
.gragh-rect {	fill:#A7DBD8;	stroke: #5DBBCE;	stroke-width:3px;
}
.gragh-text {	fill:#000;	stroke: ;	stroke-width:1px;
}
.graph-path {	fill:#69D2E7;	stroke: #5DBBCE;	stroke-width:3px;
}
.graph-circle {	fill:#DF5D00;	stroke: #FA6900;	stroke-width:2px;	cursor: pointer;
}
.graph-circle:hover {	fill:#FA6900;	stroke: #FA6900;	stroke-width:4px;
}

Graph SVG - Script Codes JS Codes

// Graph SVG
// Coding by http://francoislesenne.xyz
Graph SVG - Script Codes
Graph SVG - Script Codes
Home Page Home
Developer François Lesenne
Username francoislesenne
Uploaded August 12, 2022
Rating 3
Size 2,537 Kb
Views 42,504
Do you need developer help for Graph SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

François Lesenne (francoislesenne) Script Codes
Name
Animate button transform scale
Parent child vertical list menu
Menu parent children as a diagram...
Gelatin over button effect with Sass
Form Glass effet
Build a plan in css
SVG Line Animation background
Animated Pulse background svg
Change the background color of infinity
SVG Animate transition
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!