Skip to main content
100%

Gist 07d372884fec99f6d8785ba677d2fa2d

✓ Published0🌍 Public
Aandybak
Last edited Jul 28, 2024
Created on Jul 27, 2024

This example shows a Unity scene converting SVG path data into spline-based curves for use in a SplineContainer. It parses an SVG file using `RuntimeSVGImporter` and `SVGParser.SceneInfo`, then iterates through the scene’s shape contours, converting each Bézier segment into a `BezierKnot` within a new `Spline`. The code applies translation, rotation, and scaling transforms to the points before adding them, and it supports extracting a single node by ID or child index. The result is a set of splines representing the original vector graphics, ready for manipulation in Unity’s spline system.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 1b1c584b62bbf80f4e95935d9654a5c9

This example demonstrates a virtual-reality drawing tool where users can create and manipulate 3D paths, strokes, and shapes in a spatial environment. The code uses the Tilt Brush API, including functions like `draw.path`, `strokes.select`, and `headset.pastPosition`, to render SVG-derived geometry and apply transformations such as translation, rotation, and scaling. It also supports symmetry modes, camera-path recording, and layer management, with turtle-style drawing commands and Unity Mathf utilities for calculations. The visualization shows how procedural and imported paths can be interactively positioned and edited within a VR scene.

Aandybak
66% match
Loading thumbnail…

Point-Along-Path Interpolation

Two closed Catmull–Rom splines form two nested loops, and clicking anywhere on the SVG adds a circle that animates along the outer path. The example demonstrates SVG’s `getTotalLength` and `getPointAtLength` methods to compute positions along the path, driving each circle’s transform via a `transition.attrTween` that loops indefinitely. The code uses D3 v3, with `d3.svg.line` and a cardinal-closed interpolation to define the splines, and renders the animation as SVG circles and paths.

Aantonyross
64% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational SVG graphics with nested circles forming a target-like shape and two animated curved paths. It shows how basic geometric primitives combine to create a visual hierarchy, with the outer circle acting as a frame and inner circles layered by size and fill color. The paths use quadratic Bezier curves and animate their opacity through SVG’s native `<animate>` element, specifying keyTimes and values over a ten-second loop. The code relies on raw SVG markup and a small JavaScript console log, with no external libraries or data binding.

Tthedatacurious
63% match
Loading thumbnail…

Gist 9f1866b3965ddc7be2705538ed72f3c9

This visualization renders a raymarched shader scene in Unity, showing two intersecting spheres whose sizes and positions are modulated by a repeating sine wave. The code in `spheres.cginc` defines a distance function that combines a static sphere with a second sphere whose radius oscillates via `_SinTime`, using a smooth maximum operation to merge their shapes. The scene is generated entirely on the GPU through the shader, with no external data source, and the repeating pattern is created by applying a modulo operation to the position coordinates.

Aandybak
62% match
Loading thumbnail…

Gist 4bad9d7e5912f181148d97187d299368

This example demonstrates an attempt to create a stroke geometry in a virtual reality sketching tool using the Tilt Brush-style API. It shows how a new `Stroke` object is instantiated with control points, brush settings, and a seed, then passed to `stroke.Recreate()` for rendering on the active canvas. The code uses `InputManager`, `PointerManager`, and `App.Scene.ActiveCanvas` from the Tilt Brush framework, along with Unity’s `Transform` and `Vector3` for positioning. However, the stroke remains invisible in the scene, as noted in the file comment, indicating a likely issue with the recreation or rendering pipeline. The data source is procedural control points generated from the tool’s attach point.

Aandybak
61% match
Loading thumbnail…

Point-Along-Path Interpolation

Two closed Catmull–Rom spline paths appear as black outlines on a white SVG canvas. Clicking anywhere on the canvas spawns a colored circle that animates along the path, moving at a constant speed. This is achieved by leveraging the SVG path methods `getTotalLength()` and `getPointAtLength()` to compute the circle’s position at each animation frame. The motion loops continuously, with each circle retaining its own velocity, acceleration, and top-speed properties, producing an organic, independent movement around the spline.

Aantonyross
61% match
Loading thumbnail…

SVG Fundamentas lgarcia278

This example demonstrates the creation of an SVG path element, rendering a smooth cubic Bézier curve on a blank canvas. The visualization shows a single black curved line with transparent fill, constructed through the SVG `<path>` element using standard path data commands like `M`, `C`, and `S`. It relies on basic HTML, CSS, and JavaScript fundamentals, with the SVG markup embedded directly in the HTML document. The rendering approach is purely declarative, using SVG’s built-in geometry without any additional data or visualization libraries.

Llgarcia278
61% match
Loading thumbnail…

learn svg through 24 examples

This example demonstrates how to build a series of SVG scenes by hand, progressing from a simple bauble ornament to a branching snowflake design. It shows how to apply clip paths, reuse elements with the `<use>` tag, and apply transformations like rotation and scaling to compose complex shapes. The code uses raw SVG elements such as `<circle>`, `<polygon>`, and `<path>`, along with `viewBox` coordinates centered on (0,0) and a radial gradient for shading. The examples are purely illustrative, with no data source or external library.

Ddmr
61% match