svg / wolfiex | Observable

wolfiex

Workspace

Public

Edited

Oct 26, 2023

<!DOCTYPE html>

<head>

<title>SVG Triangulation</title>

</head>

const svgContent = `

</svg>

const mesh = svgMesh3d(svgContent, {

delaunay: true, // Enable Delaunay triangulation

scale: 10 // Scale factor for the output geometry

});

const width = 800px;

const height = 800px;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(width, height);

// document.body.appendChild(renderer.domElement);

const container = document.getElementById('svg-container');

container.appendChild(renderer.domElement);

const geometry = new THREE.BufferGeometry();

geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(mesh.positions), 3));

const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('red'), side: THREE.DoubleSide });

const meshObject = new THREE.Mesh(geometry, material);

scene.add(meshObject);

camera.position.z = 5;

function animate() {

requestAnimationFrame(animate);

meshObject.rotation.x += 0.01;

meshObject.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

</script>

fdsklf

</html>

width = 800

height = 800

require("svg-mesh-3d")

<head>

<title>SVG Triangulation</title>

</head>

<body>

const svgContent = `

</svg>

const mesh = svgMesh3d(svgContent, {

delaunay: true, // Enable Delaunay triangulation

scale: 10 // Scale factor for the output geometry

});

const canvas = document.getElementById('svg-canvas');

const ctx = canvas.getContext('2d');

// Clear the canvas

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw triangles on the canvas

ctx.beginPath();

for (let i = 0; i < mesh.cells.length; i += 3) {

const p1 = mesh.positions[mesh.cells[i]];

const p2 = mesh.positions[mesh.cells[i + 1]];

const p3 = mesh.positions[mesh.cells[i + 2]];

ctx.moveTo(p1[0], p1[1]);

ctx.lineTo(p2[0], p2[1]);

ctx.lineTo(p3[0], p3[1]);

ctx.closePath();

}

// Set stroke and fill styles

ctx.strokeStyle = 'black';

ctx.lineWidth = 1;

ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';

// Stroke and fill the triangles

ctx.stroke();

ctx.fill();

</script>

</body>

{

var extractPath = require("extract-svg-path").parse;

// var loadSvg = require("load-svg");

var createMesh = require("../");

var drawTriangles = require("draw-triangles-2d");

var canvas = document.createElement("svg-canvas");

var context = canvas.getContext("2d");

var size = 256;

canvas.width = size;

canvas.height = size;

// loadSvg("demo/svg/entypo-social/twitter.svg", function (err, svg) {

// if (err) throw err;

var svgPath = extractPath(

`<svg role="img" viewBox="0 0 25 28" width="25" height="28" aria-label="Observable" fill="currentColor" class="near-black"><path d="M12.5 22.6667C11.3458 22.6667 10.3458 22.4153 9.5 21.9127C8.65721 21.412 7.98339 20.7027 7.55521 19.8654C7.09997 18.9942 6.76672 18.0729 6.56354 17.1239C6.34796 16.0947 6.24294 15.0483 6.25 14C6.25 13.1699 6.30417 12.3764 6.41354 11.6176C6.52188 10.8598 6.72292 10.0894 7.01563 9.30748C7.30833 8.52555 7.68542 7.84763 8.14479 7.27274C8.62304 6.68378 9.24141 6.20438 9.95208 5.87163C10.6979 5.51244 11.5458 5.33333 12.5 5.33333C13.6542 5.33333 14.6542 5.58467 15.5 6.08733C16.3428 6.588 17.0166 7.29733 17.4448 8.13459C17.8969 8.99644 18.2271 9.9103 18.4365 10.8761C18.6448 11.841 18.75 12.883 18.75 14C18.75 14.8301 18.6958 15.6236 18.5865 16.3824C18.4699 17.1702 18.2639 17.9446 17.9719 18.6925C17.6698 19.4744 17.2948 20.1524 16.8427 20.7273C16.3906 21.3021 15.7927 21.7692 15.0479 22.1284C14.3031 22.4876 13.4542 22.6667 12.5 22.6667ZM14.7063 16.2945C15.304 15.6944 15.6365 14.864 15.625 14C15.625 13.1073 15.326 12.3425 14.7292 11.7055C14.1313 11.0685 13.3885 10.75 12.5 10.75C11.6115 10.75 10.8688 11.0685 10.2708 11.7055C9.68532 12.3123 9.36198 13.1405 9.375 14C9.375 14.8927 9.67396 15.6575 10.2708 16.2945C10.8688 16.9315 11.6115 17.25 12.5 17.25C13.3885 17.25 14.124 16.9315 14.7063 16.2945ZM12.5 27C19.4031 27 25 21.1792 25 14C25 6.82075 19.4031 1 12.5 1C5.59687 1 0 6.82075 0 14C0 21.1792 5.59687 27 12.5 27Z" fill="currentColor"></path></svg>`

);

var mesh = createMesh(svgPath, {

scale: 1,

simplify: 0.01

});

render(mesh);

// });

console.log(mesh, svgPath);

function render(mesh) {

context.clearRect(0, 0, size, size);

context.save();

var scale = size / 2;

context.translate(size / 2, size / 2);

context.scale(scale, -scale);

context.beginPath();

context.lineJoin = "round";

context.lineCap = "round";

context.lineWidth = 2 / scale;

drawTriangles(context, mesh.positions, mesh.cells);

context.fillStyle = "#d86c15";

context.strokeStyle = "#3b3b3b";

context.fill();

context.stroke();

context.restore();

// }

canvas.appendChild(canvas);

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more