A Pen by KyleDavidE

Developer
KyleDavidE
Size
4,166 Kb
Views
28,336
  1. A Pen by KyleDavidE Previews
  2. A Pen by KyleDavidE HTML Codes
  3. A Pen by KyleDavidE CSS Codes
  4. A Pen by KyleDavidE JS Codes

How do I make an a pen by kyledavide?

(it saves). What is a a pen by kyledavide? How do you make a a pen by kyledavide? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.

A Pen by KyleDavidE Previews
IQ Test

A Pen by KyleDavidE - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by KyleDavidE</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ svg { width: 10000px; height: 10000px; position: absolute; top: 0; left: 0;
}
.lineDone:hover { stroke: red !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg>
<defs> <pattern id="paperGrid" x="0" y="0" width="86.6025" height="50" patternUnits="userSpaceOnUse"> <rect x="-5" y="-5" width="10" height="10" fill="lightgray" /> <rect x="-5" y="45" width="10" height="10" fill="lightgray" /> <rect x="38.3012" y="20" width="10" height="10" fill="lightgray" /> <rect x="81.6025" y="45" width="10" height="10" fill="lightgray" /> <rect x="81.6025" y="-5" width="10" height="10" fill="lightgray" /> </pattern> </defs> <rect width="100%" height="100%" x="0" y="0" fill="url(#paperGrid)" id="paper"/>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by KyleDavidE - Script Codes CSS Codes

svg { width: 10000px; height: 10000px; position: absolute; top: 0; left: 0;
}
.lineDone:hover { stroke: red !important;
}

A Pen by KyleDavidE - Script Codes JS Codes

'use strict';
var currentSp = [0, 0];
var currentEp = [0, 0];
var svg = d3.select('svg');
var cursor = svg.append('circle');
var paper = d3.select('#paper');
var linesGroup = svg.append('g');
var mousePoint = [0, 0];
cursor.attr({ r: 10, cx: 0, cy: 0
}).style({ transition: 'transform 0.05s'
});
var linesStyle = { 'stroke': 'black', 'stroke-width': '10px', 'stroke-linecap': 'round'
};
var cp = [0, 0];
var gridSize = 50;
var sqrt3 = Math.sqrt(3);
var gh = gridSize, gw = sqrt3 * gridSize;
var currentLine = false;
function getClostestGridPoint(point, w, h, xo, yo) { var np = [point[0] - xo, point[1] - yo]; function gp(a, b) { var p = [a(np[0] / w) * w + xo, b(np[1] / h) * h + yo]; p.dist = Math.sqrt(Math.pow(p[0] - point[0], 2) + Math.pow(p[1] - point[1], 2)); return p; } var f = Math.floor; var c = Math.ceil; var points = [gp(f, f), gp(f, c), gp(c, c), gp(c, f)]; return points.min('dist');
}
function getClostestIsoPoint(point) { var pointsToTry = [getClostestGridPoint(point, gw, gh, 0, 0), getClostestGridPoint(point, gw, gh, gw / 2, gh / 2)]; return pointsToTry.min('dist');
}
function load() { var data = JSON.parse(localStorage['isoDraw'] || '[]'); data.forEach(function (data) { console.log(data); try { linesGroup.append('line').attr({ 'x1': data.start[0], 'y1': data.start[1], 'x2': data.end[0], 'y2': data.end[1], 'class': 'line oldLine lineDone' }).style(linesStyle).data([data]); } catch (e) {} }); d3.selectAll('.oldLine').on('contextmenu', function () { d3.event.preventDefault(); d3.select(this).remove(); save(); });
}
function save() { localStorage['isoDraw'] = JSON.stringify(d3.selectAll('.lineDone').data()); console.log(d3.selectAll('.lineDone').data());
}
load();
svg.on('mousemove', function (e) { mousePoint = d3.mouse(svg.node()); cp = getClostestIsoPoint(mousePoint); cursor.style({ transform: 'translate(' + cp[0] + 'px, ' + cp[1] + 'px)' }); if (currentLine) { currentLine.attr({ x2: cp[0], y2: cp[1] }); }
}).on('click', function () { if (currentLine) { var oldLine = currentLine; oldLine.attr({ 'class': 'line lineDone' }).on('contextmenu', function () { d3.event.preventDefault(); d3.select(this).remove(); save(); }); oldLine.data()[0].end = cp.clone(); currentLine = false; save(); } else { currentLine = linesGroup.append('line').attr({ 'x1': cp[0], 'y1': cp[1], 'class': 'line' }).style(linesStyle); currentLine.data([{ start: cp.clone() }]); }
}).on('mouseout', function () { paper.style({ opacity: 0 });
}).on('mouseover', function () { paper.style({ opacity: 1 });
}).on('contextmenu', function () { d3.event.preventDefault();
});
A Pen by KyleDavidE - Script Codes
A Pen by KyleDavidE - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 3.5
Size 4,166 Kb
Views 28,336
Do you need developer help for A Pen by KyleDavidE?

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!

KyleDavidE (KyleDavidE) Script Codes
Name
Abstract shape 3d
Flexbox Dna Helix by Joe Ski
SCSS function graphing
Surface
A Pen by KyleDavidE
Web animations material ripple
A lonely rectangle
A cube
Stars
XKCD 1608 Hoverboard zoomable
Create amazing web content 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!