@@ -128,12 +128,15 @@ js = ["image-interaction.js", "video-embed.js"]
Vector graphics editing
- 
+
Node-based layers
+
Node-based layers
-
- AI-assisted art creation
+
+
+
+
+ Procedural design workflow
- AI-assisted art creation
+
+
+
+
+ Procedural design workflow
@@ -175,6 +178,45 @@ Graphite is a lightweight vector graphics editor that runs offline in your brows
+
+
+
+# One app to rule them all
+
+**Stop jumping between programs. Planned features will make Graphite a first-class design tool for all these disciplines** *(listed by priority)*.
+
+
+
+
+
+
+
+ Graphic Design
+
+
+ Graphic Design
+
+
+ Image Editing
+
+
+ Image Editing
+
+
+ Digital Painting
+
+
+ Digital Painting
+
+
+ Motion Graphics
+
+
+ Motion Graphics
+
+
+ VFX Compositing
+
+
+ VFX Compositing
+
+
+ Desktop Publishing
+
+
+ Desktop Publishing
+
@@ -248,18 +290,58 @@ You'll receive your first newsletter email with the next major Graphite news.
+
+# Jump right in
+
+**Get started with Graphite by following along to a hands-on quickstart tutorial.**
+
+
+
+ 
+
+
+
+
# Powerful proceduralism
-Graphite's data-driven approach to graphic design affords some unique capabilities (while in alpha, these remain a work in progress):
+**Graphite is the first and only graphic design app to offer procedural vector editing.**
+
+This new capability has just recently shown its potential. Now, expanding Graphite's procedural powers is the focus of development in 2024.
+
+
+
+
+Proceduralism lets you create sophisticated design elements that are easy to edit and reuse. The holiday string lights shown below are built from a simple group of nodes, allowing you to effortlessly reshape the wire and update the bulb appearance and spacing. Click here to explore this demo and try dragging the wire layer's points with the Path tool ().
+
+
+
+
+
+
+
+
+Graphite's data-driven approach to graphic design affords unique capabilities (while in alpha, these remain a work in progress):
-
+
Fully nondestructive editing with node-driven layers
+
Fully nondestructive editing with node-driven layers
@@ -267,7 +349,8 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti
Infinitely scalable raster content with no pixelation
-
+
+
Integrated generative AI models and graphics algorithms
+
+
Integrated generative AI models and graphics algorithms
@@ -280,45 +363,6 @@ Graphite's data-driven approach to graphic design affords some unique capabiliti
-
-
-
-
-
-
-# One app to rule them all
-
-Stop jumping between programs. Planned features will make Graphite a first-class design tool for these disciplines (listed by priority):
-
-
-
-
-
-
-
- Graphic Design
-
-
- Graphic Design
-
-
- Image Editing
-
-
- Image Editing
-
-
- Digital Painting
-
-
- Digital Painting
-
-
- Desktop Publishing
-
-
- Desktop Publishing
-
-
- VFX Compositing
-
-
- VFX Compositing
-
-
- Motion Graphics
-
-
- Motion Graphics
-
@@ -368,9 +412,14 @@ Graphite is built by a small, dedicated crew of volunteers in need of resources
# Art takes shape
-Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
+**All you've come to expect from a professional vector graphics editor. Now readily accessible in your browser.**
-Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
+
+Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
+
+Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.
+
+
- Resolution-agnostic raster rendering
+ Adaptive resolution raster rendering
WebGPU accelerated rendering
-
+
Rust-based vector renderer
+
Select Mode: marquee masking
@@ -164,8 +168,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
Imported SVG file editing
- Procedural paint brush styling
-
-
@@ -285,7 +285,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
- SVG animation
+ SVG animation authorship
diff --git a/website/content/learn/_index.md b/website/content/learn/_index.md
index 29d52a48..f10b4adc 100644
--- a/website/content/learn/_index.md
+++ b/website/content/learn/_index.md
@@ -21,7 +21,13 @@ Additional manual chapters are being added over time. Check back often!
## Jump right in
-If you're eager to skip the reading, head straight to the [hands-on quickstart video](./introduction) in the next chapter for a beginner project walkthrough you can follow along with.
+
+
+The fastest way to get started is to watch and follow along with the steps in the hands-on quickstart video:
+
+
+### Video 2
+
+*Coming soon.*
+
diff --git a/website/content/volunteer/guide/product-design/product-outline.md b/website/content/volunteer/guide/product-design/product-outline.md
index 54c8bd04..a0ee9b3b 100644
--- a/website/content/volunteer/guide/product-design/product-outline.md
+++ b/website/content/volunteer/guide/product-design/product-outline.md
@@ -77,7 +77,7 @@ order = 1 # Page number after chapter intro
- Data flow
- Rasterization
- Raster editing
- - Resolution-agnostic sampling
+ - Adaptive resolution sampling
- Compositing and data flow
- Caching
- Predictive caching
diff --git a/website/sass/base.scss b/website/sass/base.scss
index 7acbe13d..85b8fd4c 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -414,6 +414,21 @@ summary {
}
}
+.status-flag {
+ background: var(--color-crimson);
+ white-space: nowrap;
+ color: white;
+ font-size: 0.4em;
+ padding: 0.2em 0.4em;
+ padding-top: 0.1em;
+ position: relative;
+ top: -0.2em;
+ font-family: "EB Garamond", Garamond, serif;
+ font-feature-settings: "lnum";
+ line-height: 1.2;
+ font-weight: 500;
+}
+
.video-embed {
position: relative;
width: 100%;
diff --git a/website/sass/features.scss b/website/sass/features.scss
index 8cefcba5..492eacaa 100644
--- a/website/sass/features.scss
+++ b/website/sass/features.scss
@@ -1,14 +1,3 @@
-.section h2 .status-flag {
- white-space: nowrap;
- background: var(--color-flamingo);
- color: white;
- font-size: 0.4em;
- padding: 0.2em 0.4em;
- padding-top: 0.1em;
- position: relative;
- top: -0.2em;
-}
-
#roadmap {
width: 100%;
text-align: center;
diff --git a/website/sass/index.scss b/website/sass/index.scss
index 05e9340c..e49c3020 100644
--- a/website/sass/index.scss
+++ b/website/sass/index.scss
@@ -104,7 +104,17 @@
// ▛ TODAY AND TOMORROW ▜
// ▙ TODAY AND TOMORROW ▟
-//
+
+// ▛ DISCIPLINES ▜
+#disciplines .section {
+ align-items: center;
+
+ .informational-group .informational {
+ margin-top: 40px;
+ }
+}
+// ▙ DISCIPLINES ▟
+
// ▛ COMMUNITY ▜
#community {
background-color: var(--color-mustard);
@@ -255,22 +265,24 @@
}
// ▙ COMMUNITY ▟
+// ▛ JUMP RIGHT IN ▜
+#jump-right-in {
+ max-width: 1000px;
+
+ .section {
+ align-items: center;
+ }
+}
+// ▙ JUMP RIGHT IN ▟
+
// ▛ PROCEDURALISM ▜
-#proceduralism .section {
+#proceduralism .section,
+#proceduralism-demo .section,
+#proceduralism-features .section {
align-items: center;
}
// ▙ PROCEDURALISM ▟
-// ▛ DISCIPLINES ▜
-#disciplines .section {
- align-items: center;
-
- .informational-group .informational {
- margin-top: 40px;
- }
-}
-// ▙ DISCIPLINES ▟
-
// ▛ FUNDRAISING ▜
#fundraising {
background-color: var(--color-cove);
@@ -312,73 +324,73 @@
// ▙ VECTOR ART ▟
// ▛ IMAGINATE ▜
-#imaginate {
- > .section {
- align-items: center;
+// #imaginate {
+// > .section {
+// align-items: center;
- h1 {
- text-align: center;
+// h1 {
+// text-align: center;
- .alternating-text {
- position: relative;
+// .alternating-text {
+// position: relative;
- span {
- // Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
- margin-left: calc(-1.54em / 2 / 2);
- opacity: 0;
- $alternate-duration: 15s;
- $alternate-words: 5;
- animation: $alternate-duration infinite linear 0s fade-word;
+// span {
+// // Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
+// margin-left: calc(-1.54em / 2 / 2);
+// opacity: 0;
+// $alternate-duration: 15s;
+// $alternate-words: 5;
+// animation: $alternate-duration infinite linear 0s fade-word;
- // The 1st child is the widest
- &:not(:nth-child(1)) {
- position: absolute;
- right: 0;
- }
+// // The 1st child is the widest
+// &:not(:nth-child(1)) {
+// position: absolute;
+// right: 0;
+// }
- @for $i from 1 through $alternate-words {
- &:nth-child(#{$i}) {
- animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
- }
- }
+// @for $i from 1 through $alternate-words {
+// &:nth-child(#{$i}) {
+// animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
+// }
+// }
- @keyframes fade-word {
- // Fade in at the start (which begins staggered on each item by `animation-delay`)
- #{0.0%} { opacity: 0; }
- #{2.5%} { opacity: 1; }
- // Remain visible for this item's slice of time, then fade out
- #{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
- #{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
- }
- }
- }
- }
- }
+// @keyframes fade-word {
+// // Fade in at the start (which begins staggered on each item by `animation-delay`)
+// #{0.0%} { opacity: 0; }
+// #{2.5%} { opacity: 1; }
+// // Remain visible for this item's slice of time, then fade out
+// #{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
+// #{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
+// }
+// }
+// }
+// }
+// }
- > .diptych {
- margin-top: calc(80 * var(--variable-px));
+// > .diptych {
+// margin-top: calc(80 * var(--variable-px));
- .section {
- align-items: center;
+// .section {
+// align-items: center;
- h2 {
- text-align: center;
- }
- }
- }
+// h2 {
+// text-align: center;
+// }
+// }
+// }
- // #imaginate-creative-concepts-carousel {
- // margin-top: 20px;
+// // #imaginate-creative-concepts-carousel {
+// // margin-top: 20px;
- // .screenshot-details {
- // justify-content: center;
- // }
+// // .screenshot-details {
+// // justify-content: center;
+// // }
- // + blockquote {
- // margin-top: 0;
- // }
- // }
-}
+// // + blockquote {
+// // margin-top: 0;
+// // }
+// // }
+// }
// ▙ IMAGINATE ▟
// ▛ DEMO VIDEO ▜
diff --git a/website/static/js/image-interaction.js b/website/static/js/image-interaction.js
index f0a2b4c1..80ece5ad 100644
--- a/website/static/js/image-interaction.js
+++ b/website/static/js/image-interaction.js
@@ -305,19 +305,21 @@ window.addEventListener("DOMContentLoaded", initializeVideoAutoPlay);
function initializeVideoAutoPlay() {
const VISIBILITY_COVERAGE_FRACTION = 0.25;
- let loaded = false;
+ const players = document.querySelectorAll("[data-auto-play]");
+ players.forEach((player) => {
+ if (!(player instanceof HTMLVideoElement)) return;
- const player = document.querySelector("[data-auto-play]");
- if (!(player instanceof HTMLVideoElement)) return;
-
- new IntersectionObserver((entries) => {
- entries.forEach((entry) => {
- if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
- player.play();
-
- loaded = true;
- };
- });
- }, { threshold: VISIBILITY_COVERAGE_FRACTION })
+ let loaded = false;
+
+ new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
+ player.play();
+
+ loaded = true;
+ };
+ });
+ }, { threshold: VISIBILITY_COVERAGE_FRACTION })
.observe(player);
+ });
}
+
+Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.
+
+ Layer and grid snapping
+
+ Layer and grid snapping
+
- Resolution-agnostic raster rendering
+ Adaptive resolution raster rendering
WebGPU accelerated rendering
-
- Snapping between layers
-
-
- Snapping between layers
-
-
- Desktop app with built-in AI models
-
- Desktop app with built-in AI models
- — Alpha Milestone 3 —
+
+ Desktop app with built-in AI models
+
+ Desktop app with built-in AI models
+
Rust-based vector renderer
+
+ Timeline and animation curves
+
+ Timeline and animation curves
+
Select Mode: marquee masking
@@ -164,8 +168,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
Imported SVG file editing
-
- Timeline and renderer for animation
+
+ CAD-like constraint relationships
- Timeline and renderer for animation
+
+ CAD-like constraint relationships
@@ -245,11 +249,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
- Procedural paint brush styling
-
-
- CAD-like constraint solver
+ Procedural styling of paint brushes
- CAD-like constraint solver
+ Procedural styling of paint brushes
@@ -285,7 +285,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
- SVG animation
+ SVG animation authorship
diff --git a/website/content/learn/_index.md b/website/content/learn/_index.md
index 29d52a48..f10b4adc 100644
--- a/website/content/learn/_index.md
+++ b/website/content/learn/_index.md
@@ -21,7 +21,13 @@ Additional manual chapters are being added over time. Check back often!
## Jump right in
-If you're eager to skip the reading, head straight to the [hands-on quickstart video](./introduction) in the next chapter for a beginner project walkthrough you can follow along with.
+
+
+The fastest way to get started is to watch and follow along with the steps in the hands-on quickstart video:
+
+
+
+
## Need help?
diff --git a/website/content/learn/introduction/_index.md b/website/content/learn/introduction/_index.md
index febe86df..fe7a4afd 100644
--- a/website/content/learn/introduction/_index.md
+++ b/website/content/learn/introduction/_index.md
@@ -8,9 +8,15 @@ order = 1
js = ["video-embed.js"]
+++
-Before taking the time to read the coming chapters, let's build some context by jumping straight into a small project that you can follow along with. That way you will have a mental framework for the topics explained in the rest of this manual.
+
-## A hands-on quickstart
+Begin learning Graphite by watching the introductory tutorial videos below.
+
+One is available now, and more will be released on a regular basis throughout early 2024.
+
+## Tutorial series
+
+### Video 1
@@ -18,6 +24,10 @@ Before taking the time to read the coming chapters, let's build some context by
+