Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <canvas id="canvas"></canvas>
<svg 
 id="logo"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="423px" height="506px">
<path fill-rule="evenodd"  fill="rgb(237, 160, 58)"
 d="M206.0,0.0 C207.999,0.0 210.0,0.0 211.999,0.0 C224.731,22.361 252.920,62.440 246.999,97.0 C243.666,112.665 240.333,128.334 237.0,144.0 C249.90,145.235 265.944,150.182 274.999,150.0 C285.490,93.130 314.420,75.588 348.999,60.999 C364.453,54.480 381.476,36.241 399.0,32.999 C399.666,33.666 400.333,34.333 401.0,35.0 C411.331,62.564 383.321,123.239 357.0,142.0 C348.550,148.22 319.177,162.304 309.999,166.0 C349.369,191.925 355.644,300.741 317.0,326.0 C275.203,304.950 229.802,336.16 215.999,354.0 C204.667,352.333 193.332,350.666 181.999,349.0 C166.211,308.114 128.211,288.795 96.0,287.999 C96.635,257.790 113.917,249.24 117.0,243.999 C117.746,236.255 139.273,168.516 189.999,152.999 C179.972,134.392 167.181,47.720 206.0,0.0 ZM153.0,498.999 C48.695,466.997 -40.158,344.428 18.999,208.999 C37.798,165.965 71.867,132.930 110.999,110.0 C123.665,104.667 140.169,96.729 149.0,93.999 C151.621,100.357 151.290,122.853 154.999,139.999 C119.113,152.879 92.857,221.229 92.0,229.999 C82.920,237.812 75.366,247.417 70.999,259.999 C66.747,272.252 68.618,287.809 69.999,300.999 C66.0,305.332 61.999,309.667 57.999,314.0 C46.941,310.97 41.356,301.460 28.0,299.999 C25.666,301.333 21.333,304.666 18.999,305.999 C8.490,342.167 60.372,367.122 65.999,367.999 C72.296,377.832 89.278,389.332 105.999,395.999 C128.734,405.64 153.956,399.983 159.999,395.999 C176.557,399.905 195.335,400.666 212.999,402.999 C227.137,430.68 280.413,429.957 308.0,413.999 C315.737,409.524 320.846,403.890 327.999,395.999 C337.46,394.797 352.1,389.333 364.0,385.999 C378.135,380.451 411.978,369.189 401.999,344.999 C400.0,342.666 401.961,342.30 396.0,338.0 C390.38,333.969 360.769,349.276 338.0,353.0 C337.666,352.0 337.333,350.999 336.999,349.999 C336.666,349.0 336.333,347.999 335.999,347.0 C364.753,324.111 380.828,266.480 367.999,214.999 C363.667,201.668 359.332,188.332 355.0,174.999 C366.765,170.577 369.332,167.699 375.999,163.999 C381.578,170.784 392.0,186.667 397.999,195.999 C411.78,218.299 420.663,257.968 422.0,275.999 C423.336,294.31 420.890,345.208 408.0,371.0 M93.999,309.0 C118.486,297.242 189.879,351.3 154.999,377.0 C122.44,401.562 30.584,339.440 93.999,309.0 ZM286.0,337.0 C310.603,336.844 329.293,356.231 317.0,381.0 C309.75,396.966 291.677,400.883 271.0,405.0 C258.798,407.428 242.861,407.327 233.999,400.999 C229.546,397.819 226.112,390.453 225.999,383.0 C225.494,349.662 276.761,337.864 286.0,337.0 Z"/>
<path fill-rule="evenodd"  fill="rgb(138, 179, 57)"
 d="M149.0,93.999 C151.621,100.357 151.290,122.853 154.999,140.0 C119.113,152.879 92.857,221.229 92.0,229.999 C82.920,237.812 75.366,247.417 70.999,259.999 C66.747,272.252 68.618,287.809 69.999,301.0 C66.0,305.332 61.999,309.667 57.999,313.999 C46.941,310.97 41.356,301.460 28.0,300.0 C25.666,301.333 21.333,304.666 19.0,306.0 C8.490,342.167 60.372,367.122 65.999,367.999 C72.296,377.832 89.278,389.332 105.999,395.999 C128.734,405.64 153.956,399.983 159.999,395.999 C176.557,399.905 195.335,400.666 212.999,403.0 C227.137,430.68 280.413,429.957 308.0,414.0 C315.737,409.524 320.846,403.890 327.999,395.999 C337.46,394.797 352.1,389.333 363.999,385.999 C378.135,380.451 411.978,369.189 401.999,345.0 C400.0,342.666 401.961,342.30 396.0,338.0 C390.38,333.969 360.769,349.276 338.0,352.999 C337.666,352.0 337.333,350.999 336.999,350.0 C336.666,349.0 336.333,347.999 335.999,346.999 C364.753,324.111 380.828,266.480 367.999,214.999 C363.667,201.668 359.332,188.331 354.999,174.999 C366.765,170.577 369.332,167.699 375.999,163.999 C381.578,170.784 392.0,186.667 397.999,196.0 C411.78,218.299 420.663,257.968 422.0,275.999 C423.336,294.31 420.890,345.208 407.999,371.0 C376.826,453.299 285.501,529.803 153.0,499.0 C48.695,466.997 -40.158,344.428 19.0,208.999 C37.798,165.965 71.867,132.930 110.999,109.999 C123.665,104.667 140.169,96.729 149.0,93.999 Z"/>
</svg>

              
            
!

CSS

              
                body {
  margin: 0;
}
svg {
  display: none;
}
              
            
!

JS

              
                const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas')
});
const loader = new THREE.SVGLoader();

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
camera.position.set(0, 0, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));

const svgMarkup = document.querySelector('#logo').outerHTML;
const svgData = loader.parse(svgMarkup);

const svgGroup = new THREE.Group();
svgData.paths.forEach((path, i) => {
  const shapes = path.toShapes(true);

  shapes.forEach((shape, j) => {

    const material = new THREE.MeshBasicMaterial({
      color: path.color,
      side: THREE.DoubleSide,
		  depthWrite: false
    });
    const geometry = new THREE.ExtrudeGeometry(shape, {
      depth: 30,
      bevelEnabled: false
    });

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

    svgGroup.add(mesh);
  });
});

const box = new THREE.Box3().setFromObject(svgGroup);
const size = new THREE.Vector3();
box.getSize(size);

const yOffset = size.y / -2;
const xOffset = size.x / -2;

svgGroup.children.forEach(item => {
  item.position.x = xOffset;
  item.position.y = yOffset;
});
svgGroup.rotation.x = 9.5;
scene.add(svgGroup);
renderer.render(scene, camera);
              
            
!
999px

Console