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 Octohedron?</h1>

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

<p>An octohedron 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>
resolving https://unpkg.com/svelte@5.20.5/src/version.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 Octohedron?</h1> <div class="scene-container svelte-1wq6r9e"><!></div> <p>An octohedron 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 Octohedron?"
                • data: "What is an Octohedron?"
                }
              ]
            }
          }
        • 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 octohedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces."
                • data: "An octohedron 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-TWO_Svelte-Cubed: Basic Patterns for Adding Motion to 3D Scenes • Playground • Svelte