Get started with vanta CDN

MIT licensed

Vanta is a continuous security monitoring and compliance platform for infrastructure as code.

Tags:
  • animation
  • 3d
  • three
  • threejs
  • background
  • canvas
  • javascript
  • webgl

Stable version

Copied!

How to start using vanta CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with vanta CDN - cdnhub.io</title>
  <style>
    body { margin: 0; }
    canvas { display: block; width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.121.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.121.0/examples/js/Detector.js"></script>
  <script src="https://cdn.cdnhub.io/vanta/0.5.24/vanta.birds.min.js"></script>
  <script>
    if (!Detector.webgl) {
      document.body.innerHTML = Detector.noWebGL();
      return;
    }

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const vanta = new VANTA.BIRDS({
      el: renderer.domElement,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      maxHeight: 400.0,
    });

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      vanta.update();
    }

    animate();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions