mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update website for the unified document graph release

Browse source 
Closes #1394
This commit is contained in:
Keavon Chambers 2023-12-13 19:22:18 -08:00
parent d5b161e7d1
commit 4d9e76063d
17 changed files with 296 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -8,14 +8,14 @@
// Web: save on format
"[javascript][typescript][svelte]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[scss]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
// Configured in `.prettierrc`

2
README.md
View file

@ -18,7 +18,7 @@ Launch the latest alpha release of the [Graphite editor](https://editor.graphite
⭐ Please remember to star this project here on GitHub! ⭐
[![Vector artwork: "Valley of Spires"](https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.png)](https://editor.graphite.rs/#demo/valley-of-spires)
[![Vector artwork: "Valley of Spires"](https://static.graphite.rs/content/index/gui-demo-valley-of-spires__3.png)](https://editor.graphite.rs/#demo/valley-of-spires)
*[Click here](https://editor.graphite.rs/#demo/valley-of-spires) to open this artwork and explore it yourself.*

1
demo-artwork/just-a-potted-cactus-v2.graphite
View file

File diff suppressed because one or more lines are too long

2
demo-artwork/just-a-potted-cactus.graphite
View file

File diff suppressed because one or more lines are too long

1
demo-artwork/valley-of-spires-v2.graphite
View file

File diff suppressed because one or more lines are too long

3
demo-artwork/valley-of-spires.graphite
View file

File diff suppressed because one or more lines are too long

22
editor/src/application.rs
View file

File diff suppressed because one or more lines are too long

2
editor/src/consts.rs
View file

@ -79,7 +79,7 @@ pub const DEFAULT_FONT_FAMILY: &str = "Merriweather";
pub const DEFAULT_FONT_STYLE: &str = "Normal (400)";
// Document
pub const GRAPHITE_DOCUMENT_VERSION: &str = "0.0.19"; // Remember to update the demo artwork in /demos with both this version number and the contents so it remains editable
pub const GRAPHITE_DOCUMENT_VERSION: &str = "0.1.0"; // Remember to update the demo artwork in /demos with both this version number and the contents so it remains editable
pub const DEFAULT_DOCUMENT_NAME: &str = "Untitled Document";
pub const FILE_SAVE_SUFFIX: &str = ".graphite";
pub const MAX_UNDO_HISTORY_LEN: usize = 100; // TODO: Add this to user preferences

4
editor/src/dispatcher.rs
View file

@ -520,8 +520,8 @@ mod test {
let mut editor = Editor::create();
let test_files = [
("Just a Potted Cactus", include_str!("../../demo-artwork/just-a-potted-cactus-v2.graphite")),
("Valley of Spires", include_str!("../../demo-artwork/valley-of-spires-v2.graphite")),
("Just a Potted Cactus", include_str!("../../demo-artwork/just-a-potted-cactus.graphite")),
("Valley of Spires", include_str!("../../demo-artwork/valley-of-spires.graphite")),
];
for (document_name, document_serialized_content) in test_files {

4
editor/src/messages/dialog/simple_dialogs/demo_artwork_dialog.rs
View file

@ -6,8 +6,8 @@ pub struct DemoArtworkDialog;
/// `(name, thumbnail, filename)`
const ARTWORK: [(&str, &str, &str); 2] = [
("Valley of Spires", "ThumbnailValleyOfSpires", "valley-of-spires-v2.graphite"),
("Just a Potted Cactus", "ThumbnailJustAPottedCactus", "just-a-potted-cactus-v2.graphite"),
("Valley of Spires", "ThumbnailValleyOfSpires", "valley-of-spires.graphite"),
("Just a Potted Cactus", "ThumbnailJustAPottedCactus", "just-a-potted-cactus.graphite"),
];
impl DialogLayoutHolder for DemoArtworkDialog {

1
editor/src/messages/input_mapper/default_mapping.rs
View file

@ -265,6 +265,7 @@ pub fn default_mapping() -> Mapping {
entry!(KeyDown(Backspace); action_dispatch=DocumentMessage::DeleteSelectedLayers),
entry!(KeyDown(KeyP); modifiers=[Alt], action_dispatch=DocumentMessage::DebugPrintDocument),
entry!(KeyDown(KeyZ); modifiers=[Accel, Shift], action_dispatch=DocumentMessage::Redo),
entry!(KeyDown(KeyY); modifiers=[Accel], action_dispatch=DocumentMessage::Redo),
entry!(KeyDown(KeyZ); modifiers=[Accel], action_dispatch=DocumentMessage::Undo),
entry!(KeyDown(KeyA); modifiers=[Accel, Shift], action_dispatch=DocumentMessage::DeselectAllLayers),
entry!(KeyDown(KeyA); modifiers=[Accel], action_dispatch=DocumentMessage::SelectAllLayers),

354
website/content/_index.md
View file

@ -66,19 +66,19 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
<!-- ▛ SCREENSHOTS ▜ -->
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
<div class="carousel-slide">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
</div>
<div class="carousel-slide torn left">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
</div>
<div class="carousel-slide torn right">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
</div>
<div class="screenshot-details">
<div class="carousel-controls">
@ -103,10 +103,10 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
<em>Valley of Spires</em> — <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
</p>
<p data-carousel-description>
Design mockup for the work-in-progress node graph raster editing pipeline. Some UI concepts and raster nodes shown here are not implemented yet.
Design mockup for the work-in-progress raster editing pipeline. Some nodes shown here are not implemented yet, but will be soon!
</p>
<p data-carousel-description>
Design mockup for the work-in-progress viewport raster editing workflow. Some features shown here are not implemented yet.
Design mockup for the work-in-progress raster editing workflow. Some viewport features shown here are not implemented yet, but will be soon!
</p>
</div>
</div>
@ -125,11 +125,11 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
<div class="informational-group features">
<div class="informational">
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span>Vector editing</span>
<span>Vector graphics editing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span>Node graph image effects</span>
<span>Node-based layers</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
@ -141,7 +141,7 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
</div>
</div>
Graphite is a lightweight vector graphics editor that runs in your browser. Its node-based compositor lets you apply image effects and co-create art with generative AI.
Graphite is a lightweight vector graphics editor that runs offline in your browser (no sign up required) and offers the unique feature of a node-driven procedural vector workflow.
</div>
<div class="section">
@ -249,165 +249,13 @@ You'll receive your first newsletter email with the next major Graphite news.
</section>
<!-- ▙ COMMUNITY ▟ -->
<!-- -->
<!-- ▛ VECTOR ART ▜ -->
<section id="vector-art">
<div class="section">
# Art takes shape
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
<div class="video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
</video>
</div>
<div class="demo-artwork">
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">
<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Just of Potted Cactus" />
</a>
<p>
<span class="balance-text">
<em>Just a Potted Cactus</em>
</span>
<br />
<span class="balance-text">
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">Open this artwork</a> to explore it yourself.
</span>
</p>
</div>
</div>
</section>
<!-- ▙ VECTOR ART ▟ -->
<!-- -->
<!-- ▛ IMAGINATE ▜ -->
<section id="imaginate">
<div class="section">
<h1><span class="alternating-text"><span>Co-create</span><span>Ideate</span><span>Illustrate</span><span>Generate</span><span>Iterate</span></span> with Imaginate</h1>
**Imaginate** is a node powered by <a href="https://en.wikipedia.org/wiki/Stable_Diffusion" target="_blank">Stable Diffusion</a> that makes AI-assisted art creation an easy, nondestructive process.
<!-- [Learn how](/learn/node-graph/imaginate) it works. -->
</div>
<div class="diptych">
<div class="section">
<h2 class="balance-text">Make it stylish</h2>
**Magically reimagine your vector drawings** in a fresh new style. Just place an Imaginate frame over your layers and describe how it should end up looking.
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/light-bulb-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector illustration of a light bulb" />
</div>
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/light-bulb-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Watercolor painting of a light bulb" />
</div>
<div class="slide-bar">
<div class="arrows">
<div></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
</div>
</div>
</div>
<blockquote class="balance-text require-polyfill"><strong>Watercolor painting</strong> of a light bulb gleaming with an exclamation mark inside</blockquote>
</div>
<div class="section">
## Work fast, be sloppy
**Doodle a rough draft** without stressing over the details. Let Imaginate add the finishing touches to your artistic vision. Iterate with more passes until you're happy.
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/california-poppies-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Sloppy poppy: vector doodle of California poppy flowers wrapped around a circle" />
</div>
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/california-poppies-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Polished poppy: artistic, high-quality illustration of California poppy flowers wrapped around a circle" />
</div>
<div class="slide-bar">
<div class="arrows">
<div></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
</div>
</div>
</div>
<blockquote class="balance-text require-polyfill"><strong>Botanical illustration</strong> of California poppies wrapped around a circle</blockquote>
</div>
</div>
</section>
<!-- ▙ IMAGINATE ▟ -->
<!-- -->
<!-- ▛ FUNDRAISING ▜ -->
<section id="fundraising" class="feature-box">
<div class="box">
<div>
<div class="section">
# Support the mission
<p class="balance-text">
You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
Graphite is built by a small, dedicated crew of volunteers in need of resources to grow.
</p>
<!-- ### Summer 2023 fundraising goal:
<div class="fundraising loading" data-fundraising>
<div class="fundraising-bar" data-fundraising-bar style="--fundraising-percent: 0%">
<div class="fundraising-bar-progress"></div>
</div>
<div class="goal-metrics">
<span data-fundraising-percent>Progress: <span data-dynamic>0</span>%</span>
<span data-fundraising-goal>Goal: $<span data-dynamic>0</span>/month</span>
</div>
</div>
[Become a monthly supporter](https://github.com/sponsors/GraphiteEditor) this summer to collect an exclusive 💚 badge. Each season you support, a new heart design is yours to keep. In the future, they'll be shown on Graphite account profiles and community areas like forums and in-app collaboration. -->
<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
</div>
<!-- <div class="graphic">
<a href="https://github.com/sponsors/GraphiteEditor"><img src="https://files.keavon.com/-/OtherDroopyBoto/Spring_Heart.png" /></a>
</div> -->
</div>
</div>
</section>
<!-- ▙ FUNDRAISING ▟ -->
<!-- -->
<!-- ▛ PROCEDURALISM ▜ -->
<section id="proceduralism">
<div class="section">
# Powerful proceduralism
The data-driven approach to design affords unique capabilities that are presently in-development.
Graphite's data-driven approach to graphic design affords some unique capabilities (while in alpha, these remain a work in progress):
<div class="informational-group features four-wide">
<div class="informational">
@ -471,13 +319,173 @@ Stop jumping between programs. Planned features will make Graphite a first-class
</section>
<!-- ▙ DISCIPLINES ▟ -->
<!-- -->
<!-- ▛ DEMO VIDEO ▜ -->
<section id="demo-video">
<div class="section">
<div class="video-embed aspect-16x9">
<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" />
<!-- ▛ FUNDRAISING ▜ -->
<section id="fundraising" class="feature-box">
<div class="box">
<div>
<div class="section">
# Support the mission
<p class="balance-text">
You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
Graphite is built by a small, dedicated crew of volunteers in need of resources to grow.
</p>
<!-- ### Summer 2023 fundraising goal:
<div class="fundraising loading" data-fundraising>
<div class="fundraising-bar" data-fundraising-bar style="--fundraising-percent: 0%">
<div class="fundraising-bar-progress"></div>
</div>
<div class="goal-metrics">
<span data-fundraising-percent>Progress: <span data-dynamic>0</span>%</span>
<span data-fundraising-goal>Goal: $<span data-dynamic>0</span>/month</span>
</div>
</div>
[Become a monthly supporter](https://github.com/sponsors/GraphiteEditor) this summer to collect an exclusive 💚 badge. Each season you support, a new heart design is yours to keep. In the future, they'll be shown on Graphite account profiles and community areas like forums and in-app collaboration. -->
<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
</div>
<!-- <div class="graphic">
<a href="https://github.com/sponsors/GraphiteEditor"><img src="https://files.keavon.com/-/OtherDroopyBoto/Spring_Heart.png" /></a>
</div> -->
</div>
</div>
</section>
<!-- ▙ FUNDRAISING ▟ -->
<!-- -->
<!-- ▛ VECTOR ART ▜ -->
<section id="vector-art">
<div class="section">
# Art takes shape
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
<div class="video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
</video>
</div>
<div class="demo-artwork">
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">
<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Just of Potted Cactus" />
</a>
<p>
<span class="balance-text">
<em>Just a Potted Cactus</em>
</span>
<br />
<span class="balance-text">
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">Open this artwork</a> to explore it yourself.
</span>
</p>
</div>
</div>
</section>
<!-- ▙ VECTOR ART ▟ -->
<!-- -->
<!-- ▛ IMAGINATE ▜ -->
<section id="imaginate">
<div class="section">
<h1><span class="alternating-text"><span>Co-create</span><span>Ideate</span><span>Illustrate</span><span>Generate</span><span>Iterate</span></span> with Imaginate</h1>
**Imaginate** is a node powered by <a href="https://en.wikipedia.org/wiki/Stable_Diffusion" target="_blank">Stable Diffusion</a> that makes AI-assisted art creation an easy, nondestructive process.
<!-- [Learn how](/learn/node-graph/imaginate) it works. -->
</div>
<div class="diptych">
<div class="section">
<h2 class="balance-text">Add a touch of style</h2>
**Magically reimagine your vector drawings** in a fresh new style. Just place an Imaginate node between your layers and describe how it should end up looking.
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/light-bulb-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector illustration of a light bulb" />
</div>
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/light-bulb-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Watercolor painting of a light bulb" />
</div>
<div class="slide-bar">
<div class="arrows">
<div></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
</div>
</div>
</div>
<blockquote class="balance-text require-polyfill"><strong>Watercolor painting</strong> of a light bulb gleaming with an exclamation mark inside</blockquote>
</div>
<div class="section">
## Work fast and sloppy
**Doodle a rough draft** without stressing over the details. Let Imaginate add the finishing touches to your artistic vision. Iterate with more passes until you're happy.
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/california-poppies-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Sloppy poppy: vector doodle of California poppy flowers wrapped around a circle" />
</div>
<div class="crop-container">
<img src="https://static.graphite.rs/content/index/california-poppies-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Polished poppy: artistic, high-quality illustration of California poppy flowers wrapped around a circle" />
</div>
<div class="slide-bar">
<div class="arrows">
<div></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 22">
<path d="M12.71 1.71 11.29.29.59 11l10.7 10.71 1.42-1.42L3.41 11Z" />
</svg>
</div>
</div>
</div>
<blockquote class="balance-text require-polyfill"><strong>Botanical illustration</strong> of California poppies wrapped around a circle</blockquote>
</div>
</div>
</section>
<!-- ▙ IMAGINATE ▟ -->
<!-- -->
<!-- ▛ DEMO VIDEO ▜ -->
<section id="demo-video">
<div class="section">
Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
<div class="video-embed aspect-16x9">
<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" />
</div>
(Recorded in an older version of Graphite from early 2023.)
</div>
</section>
<!-- ▙ DEMO VIDEO ▟ -->
<!-- -->
@ -490,7 +498,7 @@ Stop jumping between programs. Planned features will make Graphite a first-class
# Get involved
<p class="balance-text">The Graphite project could not exist without its community. Building its ambitious and versatile feature set will require contributions from developers, designers, technical experts, creative professionals, and eagle-eyed bug hunters. Help build the future of digital art.</p>
<p class="balance-text">The Graphite project could not exist without its community. Building its ambitious and versatile feature set will require contributions from artists, designers, developers, technical experts, and eagle-eyed bug hunters. Help build the future of digital art.</p>
<a href="/volunteer" class="button arrow">Volunteer</a>

6
website/content/donate.md
View file

@ -13,10 +13,14 @@ js = ["/fundraising.js"]
**Safeguard the sustainable, independent future of Graphite.**
Your monthly support (or one-off contribution) will help provide the resources needed to grow Graphite into the ultimate 2D creative tool.
Your monthly support (or one-off contribution) helps provide the resources needed to grow Graphite into the ultimate 2D creative tool.
<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">&hearts; Give now</a>
<br />
(Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is helpful if you already have spare Nitro boosts!)
</div>
</section>

40
website/content/features.md
View file

@ -10,7 +10,7 @@ css = ["/features.css"]
# Graphite features
The current version of Graphite provides tools for vector art and graphic design conforming to the ubiquitous SVG format. It also supports some experimental, rudimentary raster editing that is improving rapidly. This page covers where the project is at and where it's heading next.
The current alpha version of Graphite provides tools for vector art and graphic design conforming to the ubiquitous SVG format. It also supports some experimental, rudimentary raster editing that is evolving with each release. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—non-destructive editing and procedural design workflow which is unique for a vector editor. This page explains where the project is at and where it's heading next.
</div>
</section>
@ -21,7 +21,7 @@ The current version of Graphite provides tools for vector art and graphic design
<div class="section">
## Layers & nodes: hybrid compositing<br /><span style="white-space: nowrap; background: var(--color-flamingo); color: white; font-size: 0.5em; padding: 0.2em 0.4em">work-in-progress</span>
## Layers & nodes: hybrid compositing
Graphite combines the best ideas from multiple categories of digital content creation software to redefine the workflows of 2D graphics editing. It is influenced by the core editing experience of traditional layer-based raster and vector apps, the nondestructive approaches of VFX compositing programs used by film studios, and the boundless creative possibilities of procedural production tools daily-driven by the 3D industry.
@ -32,7 +32,7 @@ The hybrid workflow of Graphite offers a classic tool-centric, layer-based editi
</div>
<div class="section">
## Raster & vector: sharp at all sizes<br /><span style="white-space: nowrap; background: var(--color-flamingo); color: white; font-size: 0.5em; padding: 0.2em 0.4em">work-in-progress</span>
## Raster & vector: sharp at all sizes <span class="status-flag">not fully implemented yet</span>
Digital 2D art commonly takes two forms. Raster artwork is made out of pixels which means it can look like anything imaginable, but it becomes blurry or pixelated when upscaling to a higher resolution. Vector artwork is made out of curved shapes which is perfect for some art styles but limiting to others. The magic of vector is that its mathematically-described curves can be enlarged to any size and remain crisp.
@ -84,7 +84,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<div class="roadmap">
<div class="informational-group features">
<!-- Pre-Alpha -->
<div class="informational complete heading" title="Development Complete">
<div class="informational complete heading" title="Began February 2021" data-year="2021">
<h3>— Pre-Alpha —</h3>
</div>
<div class="informational complete" title="Development Complete">
@ -92,7 +92,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<span>Editor systems; basic vector art tools</span>
</div>
<!-- Alpha Milestone 1 -->
<div class="informational complete heading" title="Development Complete">
<div class="informational complete heading" title="Began February 2022" data-year="2022">
<h3>— Alpha Milestone 1 —</h3>
</div>
<div class="informational complete" title="Development Complete">
@ -100,7 +100,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<span>Better tools; node graph prototyping</span>
</div>
<!-- Alpha Milestone 2 -->
<div class="informational ongoing heading" title="Development Ongoing">
<div class="informational ongoing heading" title="Began February 2023" data-year="2023">
<h3>— Alpha Milestone 2 —</h3>
</div>
<div class="informational complete" title="Development Complete">
@ -127,14 +127,22 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>New viewport overlays system</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Snapping between layers</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Desktop app with built-in AI models</span>
</div>
<!-- Alpha Milestone 3 -->
<div class="informational heading">
<div class="informational heading" title="Expected to begin February 2024" data-year="2024">
<h3>— Alpha Milestone 3 —</h3>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Rust-based vector renderer</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Select Mode: marquee masking</span>
@ -143,10 +151,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Custom subgraph nodes</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Outliner panel: node graph tree view</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Graph data attributes</span>
@ -159,26 +163,22 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Imported SVG file editing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Rust-based vector renderer</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Timeline and renderer for animation</span>
</div>
<!-- Alpha Milestone 4 -->
<div class="informational heading">
<div class="informational heading" title="Expected to begin February 2025" data-year="2025">
<h3>— Alpha Milestone 4 —</h3>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Outliner panel: node graph tree view</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Imported RAW photo processing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Grid system and improved snapping</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
<span>Guide Mode: construction geometry</span>

12
website/sass/base.scss
View file

@ -12,11 +12,11 @@
--color-lemon: #efe2b2;
--color-ale: #cd8f7a;
--color-flamingo: #d2697c;
--color-seaside: #a5d5c8;
--color-cove: #60b3ae;
--color-seaside: #b0d6cb;
--color-seaside-rgb: 176, 214, 203;
--color-cove: #83c0b9;
--color-storm: #627088;
--color-sage: #739c7e;
--color-seaside-rgb: 165, 213, 200;
--color-sage: #91b99a;
--font-size-intro-heading: calc(var(--font-size-heading-h1) * 1.25);
--font-size-intro-body: 22px;
@ -841,8 +841,8 @@ hr,
@media screen and (max-width: 1000px) {
&.feature-box.feature-box {
margin-left: -40px;
margin-right: -40px;
margin-left: calc(-1 * var(--page-edge-padding));
margin-right: calc(-1 * var(--page-edge-padding));
}
}

39
website/sass/features.scss
View file

@ -1,3 +1,14 @@
.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;
@ -42,28 +53,36 @@
left: calc((24px - 4px) / -2);
width: 24px;
height: 24px;
border-radius: 50%;
border-radius: 24px;
}
&:not(.complete, .ongoing)::after {
background: white;
border: 4px solid #ddd;
width: 16px;
height: 16px;
&[data-year]::after {
content: attr(data-year);
width: auto;
line-height: 1.4;
text-indent: 28px;
padding-right: 12px;
}
&.complete::after {
background: var(--color-seaside);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><polygon points="6.69 14.57 0 9 1.8 6.84 6.32 10.61 13.83 1.43 16 3.2 6.69 14.57" /></svg>');
background-repeat: no-repeat;
background-position: center;
background-position: 4px center;
}
&.ongoing::after {
background: var(--color-lemon);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><path d="m8,2c3.31,0,6,2.69,6,6s-2.69,6-6,6-6-2.69-6-6,2.69-6,6-6m0-2C3.58,0,0,3.58,0,8s3.58,8,8,8,8-3.58,8-8S12.42,0,8,0h0Zm2.83,9.41l-1.83-1.83v-2.59c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.13.03.26.08.38.05.12.12.23.22.33l2.12,2.12c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41Z" /></svg>');
background-repeat: no-repeat;
background-position: center;
background-position: 4px center;
}
&:not(.complete, .ongoing)::after {
background: #ddd;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%23fff"><circle cx="8" cy="8" r="8" /></svg>');
background-repeat: no-repeat;
background-position: 4px center;
}
&.heading {
@ -73,6 +92,10 @@
width: 100%;
text-align: center;
}
&[data-year] h3 {
margin-left: 2em;
}
}
}
}

62
website/sass/index.scss
View file

@ -105,7 +105,7 @@
//
// ▛ COMMUNITY ▜
#community {
background-color: var(--color-lime);
background-color: var(--color-mustard);
#newsletter {
#newsletter-success {
@ -253,6 +253,32 @@
}
// ▙ COMMUNITY ▟
// ▛ PROCEDURALISM ▜
#proceduralism .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);
.graphic {
max-width: 400px;
}
}
// ▙ FUNDRAISING ▟
// ▛ VECTOR ART ▜
#vector-art {
.section {
@ -353,33 +379,6 @@
}
// ▙ IMAGINATE ▟
// ▛ FUNDRAISING ▜
#fundraising {
background-color: var(--color-seaside);
color: rgba(0, 0, 0, 0.9);
.graphic {
max-width: 400px;
}
}
// ▙ FUNDRAISING ▟
// ▛ PROCEDURALISM ▜
#proceduralism .section {
align-items: center;
}
// ▙ PROCEDURALISM ▟
// ▛ DISCIPLINES ▜
#disciplines .section {
align-items: center;
.informational-group .informational {
margin-top: 40px;
}
}
// ▙ DISCIPLINES ▟
// ▛ DEMO VIDEO ▜
#demo-video {
max-width: 1000px;
@ -388,7 +387,10 @@
// ▛ GET INVOLVED ▜
#get-involved-box {
background-color: var(--color-lemon);
background-blend-mode: color-burn;
background-color: var(--color-sage);
.graphic img {
mix-blend-mode: hard-light;
}
}
// ▙ GET INVOLVED ▟