A Pen by Joshua Orozco

Thumbnail
This awesome code was written by borozky, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright borozky ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Joshua Orozco</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/npm/svg.select.js@2.1.2/dist/svg.select.css'>

  
  
</head>

<body>

  <svg width="720" height="960" style="border: 1px solid #ddd" id="AppSVG"></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.8.0/JsBarcode.all.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/svg.draggable.js@2.2.1/dist/svg.draggable.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/svg.select.js@2.1.2/dist/svg.select.js'></script>
<script src='https://cdn.jsdelivr.net/npm/svg.resize.js@1.4.1/dist/svg.resize.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/borozky/a-pen-by-joshua-orozco-JMXVem */
var draw = SVG("AppSVG");
var rect = draw.rect(100, 100).attr({
	fill: "#ddd",
	strokeWidth: 2,
	stroke: "#000",
	x: 50, y: 50
});

var ellipse = draw.ellipse(100, 50).attr({
	fill: "#ddd",
	strokeWidth: 2,
	stroke: "#000",
	cx: 200, cy: 100
});

var line = draw.line(10, 10, 100, 200).stroke({ width: 4, color: "red" })

var text = draw.text("Hello World");
var textbox = draw.text("Lorem ipsum dolor site amet consectetur").attr({
	
});

var barcode = draw.nested();
JsBarcode("#" + barcode.node.id, "0000000");
barcode.attr({
	x: 0, y: 300,
	renderer: "canvas"
});

var path = draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85').attr({
	fill: "#ddd",
	stroke: "#000",
	strokeWidth: 2
});



text.draggable();
textbox.draggable();
rect.draggable();
ellipse.draggable();
line.draggable();
barcode.draggable();
path.draggable();

// SELECTIZE & resize
rect.on("click", function(){
	rect.selectize().resize();
});

line.on("click", function() {
	line.selectize().resize();
});

path.on("click", function() {
	path.selectize().resize();
});

barcode.on("click", function() {
	barcode.selectize().resize();
});

rect.on("dragstart.namespace", function() {
	rect.selectize().resize();
});

Comments