Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
Octo.svelte
<script>
import Octo from "./Octo.svelte";
</script>
<h1>What is an Octahedron?</h1>

<div class="scene-container">
<Octo></Octo>
</div>

<p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>

<style>
.scene-container {
/* position relative let's the canvas position itself relative to this container */
position: relative;
width: 75%;
max-width: 400px;
height: 400px;
margin: 0 auto;
}
</style>
fetching https://unpkg.com/svelte@5.20.5/src/internal/client/index.js
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Octo from "./Octo.svelte";

var root = $.template(`<h1>What is an Octahedron?</h1> <div class="scene-container svelte-1wq6r9e"><!></div> <p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>`, 1);

export default function App($$anchor) {
var fragment = root();
var div = $.sibling($.first_child(fragment), 2);
var node = $.child(div);

Octo(node, {});
$.reset(div);
$.next(2);
$.append($$anchor, fragment);
}
result = svelte.compile(source, {
generate: ,
});

.scene-container.svelte-1wq6r9e {
/* position relative let's the canvas position itself relative to this container */
position: relative;
width: 75%;
max-width: 400px;
height: 400px;
margin: 0 auto;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 287
      • end: 504
      • attributes: []
      • children: [...] (1)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 296
            • end: 312
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 296
                • end: 312
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "scene-container"
                        • start: 296
                        • end: 312
                        }
                      ]
                    • start: 296
                    • end: 312
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 313
            • end: 495
            • children: [...] (5)
              • Declaration {...}
                • type: "Declaration"
                • start: 403
                • end: 421
                • property: "position"
                • value: "relative"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 426
                • end: 436
                • property: "width"
                • value: "75%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 440
                • end: 456
                • property: "max-width"
                • value: "400px"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 460
                • end: 473
                • property: "height"
                • value: "400px"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 477
                • end: 491
                • property: "margin"
                • value: "0 auto"
                }
              ]
            }
          • start: 296
          • end: 495
          }
        ]
      • content: {...}
        • start: 294
        • end: 496
        • styles: "\n\t.scene-container {\n\t\t/* position relative let's the canvas position itself relative to this container */\n\t\tposition: relative; \n\t\twidth: 75%;\n\t\tmax-width: 400px;\n\t\theight: 400px;\n\t\tmargin: 0 auto;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 55
    • end: 285
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (7)
        • Text {...}
          • type: "Text"
          • start: 54
          • end: 55
          • raw: "\n"
          • data: "\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 55
          • end: 86
          • name: "h1"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 59
                • end: 81
                • raw: "What is an Octahedron?"
                • data: "What is an Octahedron?"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 86
          • end: 88
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 88
          • end: 139
          • name: "div"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 93
              • end: 116
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • start: 100
                  • end: 115
                  • type: "Text"
                  • raw: "scene-container"
                  • data: "scene-container"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 117
                • end: 119
                • raw: "\n\t"
                • data: "\n\t"
                }
              • Component {...}
                • type: "Component"
                • start: 119
                • end: 132
                • name: "Octo"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 132
                • end: 133
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 139
          • end: 141
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 141
          • end: 285
          • name: "p"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 144
                • end: 281
                • raw: "An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces."
                • data: "An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces."
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 285
          • end: 287
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 54
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 45
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 3
            • column: 0
            }
          }
        • body: [...] (1)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 11
            • end: 44
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 2
                }
              • end: {...}
                • line: 2
                • column: 35
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 18
                • end: 22
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 9
                    }
                  • end: {...}
                    • line: 2
                    • column: 13
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 18
                  • end: 22
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 9
                      }
                    • end: {...}
                      • line: 2
                      • column: 13
                      }
                    }
                  • name: "Octo"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 28
              • end: 43
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 19
                  }
                • end: {...}
                  • line: 2
                  • column: 34
                  }
                }
              • value: "./Octo.svelte"
              • raw: "\"./Octo.svelte\""
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
PART-ONE_Svelte-Cubed: An Introduction to 3D in the Browser • Playground • Svelte