Skip to content

Instantly share code, notes, and snippets.

@OrionReed
OrionReed / dom3d.js
Last active May 20, 2025 11:54
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
const SHOW_SIDES = false; // color sides of DOM nodes?
const COLOR_SURFACE = true; // color tops of DOM nodes?
const COLOR_RANDOM = false; // randomise color?
const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
const MAX_ROTATION = 180; // set to 360 to rotate all the way round
const THICKNESS = 20; // thickness of layers
const DISTANCE = 10000; // ¯\\_(ツ)_/¯
<scheme name="Light - Minimal Color" version="142" parent_scheme="Default">
<option name="FONT_SCALE" value="1.0" />
<metaInfo>
<property name="created">2022-04-18T10:59:54</property>
<property name="ide">PhpStorm</property>
<property name="ideVersion">2022.1.0.0</property>
<property name="modified">2022-04-18T11:00:13</property>
<property name="originalScheme">Light - Minimal Color</property>
</metaInfo>
<console-font>
// On PhpStorm, when ussing with laravel mix, for Alias path resolving in components you have to:
// - create a webpack.config.js file separately like:
const path = require('path')
const webpack = require('webpack')
module.exports = {
...
resolve: {
extensions: ['.js', '.json', '.vue'],