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!

All versions