Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div class="outer">

  <div class="inner">
    <div id="container1" class="container">
    </div>
  </div>

</div>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

div {
  display: inline-block;
}

.outer {
  background-color: dimgray;
  width: 100vw;
  height: 100vh;
}

.inner {
  width: 100%;
  height: 100%;
  padding: 1%;
}

.container {
  width: 100%;
  height: 100%;
  border-radius: 1em;
  overflow: hidden;
}
              
            
!

JS

              
                const md = molDraw;
// You can load molecules by parsing them from V3000 MDL .mol
// file contents. Don't worry though, you can also create molecules
// programmatically, as shown in a later example.
const eg1 = md.maybeParseV3000(`
  0  0  0  0  0  0  0  0  0  0999 V3000
M  V30 BEGIN CTAB
M  V30 COUNTS 34 35 0 0 0
M  V30 BEGIN ATOM
M  V30 1 Br -5.1011 -0.0920 -0.0713 0
M  V30 2 C -3.2187 -0.0580 -0.0450 0
M  V30 3 C -2.0138 -0.0363 -0.0281 0
M  V30 4 C -0.6025 -0.0109 -0.0084 0
M  V30 5 C 0.6025 0.0109 0.0084 0
M  V30 6 C 2.0138 0.0363 0.0281 0
M  V30 7 C 3.2187 0.0580 0.0450 0
M  V30 8 Br 5.1011 0.0920 0.0713 0
M  V30 9 C 0.4057 1.9425 -0.2577 0
M  V30 10 C -0.8040 1.5319 -0.8275 0
M  V30 11 C -0.8019 0.4330 -1.6813 0
M  V30 12 F -1.9712 -0.1411 -2.0004 0
M  V30 13 C 0.4008 -0.2048 -1.9802 0
M  V30 14 C 1.6177 0.4210 -1.6947 0
M  V30 15 C 1.6134 1.5220 -0.8326 0
M  V30 16 H -1.7478 1.8966 -0.4331 0
M  V30 17 H 2.5614 -0.0604 -1.9391 0
M  V30 18 H 2.5538 1.8970 -0.4352 0
M  V30 19 C 0.4057 -1.9425 0.2577 0
M  V30 20 C -0.8040 -1.5319 0.8274 0
M  V30 21 C -0.8019 -0.4330 1.6813 0
M  V30 22 F -1.9712 0.1411 2.0004 0
M  V30 23 C 0.4008 0.2048 1.9802 0
M  V30 24 C 1.6177 -0.4210 1.6947 0
M  V30 25 C 1.6134 -1.5220 0.8327 0
M  V30 26 H -1.7479 -1.8965 0.4331 0
M  V30 27 H 2.5613 0.0604 1.9391 0
M  V30 28 H 2.5538 -1.8971 0.4352 0
M  V30 29 C 0.3892 1.6926 2.0661 0
M  V30 30 N 0.4102 2.5146 1.0384 0
M  V30 31 H 0.3734 2.1218 3.0817 0
M  V30 32 C 0.3892 -1.6926 -2.0660 0
M  V30 33 N 0.4102 -2.5146 -1.0384 0
M  V30 34 H 0.3734 -2.1218 -3.0816 0
M  V30 END ATOM
M  V30 BEGIN BOND
M  V30 1 1 1 2
M  V30 2 3 2 3
M  V30 3 3 4 5
M  V30 4 3 6 7
M  V30 5 1 7 8
M  V30 6 1 3 4
M  V30 7 1 5 6
M  V30 8 2 9 10
M  V30 9 1 10 11
M  V30 10 1 11 12
M  V30 11 2 11 13
M  V30 12 1 13 14
M  V30 13 2 14 15
M  V30 14 1 15 9
M  V30 15 1 10 16
M  V30 16 1 14 17
M  V30 17 1 15 18
M  V30 18 2 19 20
M  V30 19 1 20 21
M  V30 20 1 21 22
M  V30 21 2 21 23
M  V30 22 1 23 24
M  V30 23 2 24 25
M  V30 24 1 25 19
M  V30 25 1 20 26
M  V30 26 1 24 27
M  V30 27 1 25 28
M  V30 28 2 29 30
M  V30 29 1 29 31
M  V30 30 2 32 33
M  V30 31 1 32 34
M  V30 32 1 9 30
M  V30 33 1 23 29
M  V30 34 1 19 33
M  V30 35 1 13 32
M  V30 END BOND
M  V30 END CTAB
M  END
`);

// If isLeft(eg1) returns True - it means parsing the molecule
// failed, allowing you to gracefully handle the error.
if (md.isLeft(eg1))
{
    console.log('There was an issue with your V3000 file content.');
    // You can use md.fromLeft()(eg1) to extract the error message.
    console.log(md.fromLeft()(eg1));
}
else
{
    // If the parse was successful, you can use
    // md.fromRight()(eg1) to extract the molecule.
    const molecule = md.fromRight()(eg1);
    
    // If you want to customize the drawing you can use an options
    // object with scene() and meshes().
    const scene = md.scene({
        backgroundColor: 0xA14411,
        outline: false,
        containerId: 'container1'
    });
  
    const meshes = md.meshes({
        // atomSize is a function, which takes a molDraw.GeometryAtom
        // instance and returns the desired size (before scaling).
        atomSize: atom => {
            // Make the atom with an id of 1 really big.
            if (md.id(atom) === 1)
            {
                return 2;
            }
            // Make hydrogen atoms really small.
            if (md.show(md.chemicalSymbol(atom)) === 'H')
            {
                return 0.15;
            }
            // Use the default element sizes for everything else.
            return md.size(md.chemicalSymbol(atom));
        },
        // atomColor is a function, which takes a molDraw.GeometryAtom
        // instance and returns the desired color for that atom.
        atomColor: atom => {
            // Make the atom with id of 3 red.
            if (md.id(atom) === 3)
            {
                return 0xFF0000;
            }
            // Make carbon atoms purple.
            if (md.show(md.chemicalSymbol(atom)) === 'C')
            {
                return 0x800080;
            }
            // Use the default element colors for everything else.
            return md.color(md.chemicalSymbol(atom));
        },
        atomScale: 1,
        // You can change the quality of the atoms and bonds by
        // changing the number of segments.
        atomWidthSegments: 25,
        atomHeightSegments: 25,
        bondRadialSegments: 10,
        bondHeightSegments: 1,
        // You can change the material of the rendered molecule.
        // See the Three.js documentation for a complete list of
        // possible materials and their options.
        // Some materials include MeshPhysicalMaterial,
        // MeshStandardMaterial, MeshNormalMaterial,
        // MeshLambertMaterial etc ...
        material: (color) => new THREE.MeshPhongMaterial({
            color: color
        })

    });
    md.drawMol(scene(meshes(molecule)));
}
              
            
!
999px

Console