Get started with picnic CDN
MIT licensed
Lightweight JS tool: Picnic manipulates images, PDFs for web apps.
Tags:- css
- semantic
- html5
- framework
Stable version
Copied!
How to start using picnic CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.cdnhub.io/picnic/7.1.0/picnic.min.css">
<title>Get started with picnic CDN - cdnhub.io</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/picnic.min.js"></script>
<script>
const scene = new PICNIC.Scene();
const ground = new PICNIC.Rectangle({
width: 800,
height: 600,
x: 0,
y: 0,
fillStyle: 'brown'
});
scene.add(ground);
const basket = new PICNIC.Rectangle({
width: 100,
height: 100,
x: 400,
y: 500,
fillStyle: 'brown',
strokeStyle: 'beige',
strokeWidth: 5
});
scene.add(basket);
const blanket = new PICNIC.Rectangle({
width: 200,
height: 200,
x: 350,
y: 450,
fillStyle: 'grey'
});
scene.add(blanket);
const apple = new PICNIC.Circle({
radius: 10,
x: 420,
y: 480,
fillStyle: 'red'
});
scene.add(apple);
const banana = new PICNIC.Circle({
radius: 10,
x: 440,
y: 480,
fillStyle: 'yellow'
});
scene.add(banana);
const picnicBasket = new PICNIC.Text('Picnic Basket', {
x: 415,
y: 510,
fontSize: 20,
fontFamily: 'Arial',
fillStyle: 'beige'
});
scene.add(picnicBasket);
scene.render();
</script>
</body>
</html>
Copied!
Copied!