mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 05:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Revamp the website

Browse source
This commit is contained in:
Keavon Chambers 2024-08-17 18:53:25 -07:00
parent d7546fb183
commit 5d74178f5f
11 changed files with 368 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.github/workflows/website.yml vendored
View file

@ -13,7 +13,7 @@ on:
- website/** - website/**
env: env:
CARGO_TERM_COLOR: always CARGO_TERM_COLOR: always
INDEX_HTML_HEAD_REPLACEMENT: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script> INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script>
jobs: jobs:
build: build:
@ -34,9 +34,8 @@ jobs:
- name: ✂ Replace template in <head> of index.html - name: ✂ Replace template in <head> of index.html
run: | run: |
# Remove the INDEX_HTML_HEAD_REPLACEMENT environment variable for build links (not master deploys) # Remove the INDEX_HTML_HEAD_INCLUSION environment variable for build links (not master deploys)
git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_REPLACEMENT="" git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_INCLUSION=""
sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$INDEX_HTML_HEAD_REPLACEMENT|" website/templates/base.html
- name: 🌐 Build Graphite website with Zola - name: 🌐 Build Graphite website with Zola
run: | run: |

210
website/content/_index.md
View file

@ -19,9 +19,9 @@ js = ["image-interaction.js", "video-embed.js"]
<section id="tagline"> <section id="tagline">
<div class="block"> <div class="block">
<h1 class="balance-text">Redefining state&#8209;of&#8209;the&#8209;art graphics editing</h1> <h1 class="balance-text">Your <span>procedural</span> toolbox for 2D content creation</h1>
<p class="balance-text"><strong>Graphite</strong> is an in-development vector and raster graphics editor that's free and open source. It is powered by a node graph compositor that fuses layers with nodes and brings a unique procedural approach to your 2D design workflow.</p> <p class="balance-text">Graphite is a free, open source vector and raster graphics engine, available now in alpha. Get creative with a nondestructive editing workflow that combines layer-based compositing with node-based generative design.</p>
</div> </div>
</section> </section>
@ -85,13 +85,12 @@ js = ["image-interaction.js", "video-embed.js"]
<!-- ▛ SCREENSHOTS ▜ --> <!-- ▛ SCREENSHOTS ▜ -->
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint> <section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
<div class="carousel-slide" data-carousel-slide> <div class="carousel-slide" data-carousel-slide>
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image /> <!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-red-dress.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" style="transform: translateX(-100%)" data-carousel-image /> <img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" style="transform: translateX(-100%)" data-carousel-image /> <img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-procedural-string-lights.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" style="transform: translateX(-100%)" data-carousel-image /> <img src="https://static.graphite.rs/content/index/gui-demo-fractal.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #4" style="transform: translateX(-100%)" data-carousel-image /> <img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #5" style="transform: translateX(-100%)" data-carousel-image /> <!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-red-dress.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
</div> </div>
<div class="carousel-slide torn left" data-carousel-slide-torn-left></div> <div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
<div class="carousel-slide torn right" data-carousel-slide-torn-right></div> <div class="carousel-slide torn right" data-carousel-slide-torn-right></div>
@ -107,7 +106,6 @@ js = ["image-interaction.js", "video-embed.js"]
<button class="dot" data-carousel-dot></button> <button class="dot" data-carousel-dot></button>
<button class="dot" data-carousel-dot></button> <button class="dot" data-carousel-dot></button>
<button class="dot" data-carousel-dot></button> <button class="dot" data-carousel-dot></button>
<button class="dot" data-carousel-dot></button>
<button class="direction next" data-carousel-next> <button class="direction next" data-carousel-next>
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" /> <path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
@ -116,20 +114,17 @@ js = ["image-interaction.js", "video-embed.js"]
</button> </button>
</div> </div>
<div class="screenshot-description"> <div class="screenshot-description">
<p class="active" data-carousel-description> <p data-carousel-description class="active">
<a href="https://editor.graphite.rs/#demo/red-dress"><em>Red Dress</em></a> — Illustration made with the help of procedurally placing hundreds of circles. <a href="https://editor.graphite.rs/#demo/painted-dreams"><em>Painted Dreams</em></a> — Made using nondestructive boolean operations and procedural dot patterns
</p> </p>
<p data-carousel-description> <p data-carousel-description>
<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — Vector art made with the Pen and Gradient tools without touching the node graph. <a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — The layer stack is represented, under the hood, by a node graph (shown fully expanded)
</p> </p>
<p data-carousel-description> <p data-carousel-description>
<a href="https://editor.graphite.rs/#demo/procedural-string-lights"><em>Procedural String Lights</em></a> — Drawing of a tree adorned by reusable, auto-placed light bulbs along the wire path made using this node graph. Mandelbrot fractal filled with a noise pattern, procedurally generated and infinitely scalable
</p> </p>
<p data-carousel-description> <p data-carousel-description>
Design mockup for the work-in-progress raster editing pipeline. Some of these raster-specific nodes are not implemented yet, but will be soon! Coming soon: mockup for the actively in-development raster workflow with new nodes for photo editing
</p>
<p data-carousel-description>
Design mockup for the work-in-progress raster editing workflow. Some of the features shown here are not implemented yet, but will be soon!
</p> </p>
</div> </div>
</div> </div>
@ -143,26 +138,26 @@ js = ["image-interaction.js", "video-embed.js"]
<div class="block"> <div class="block">
# Graphite today <span class="status-flag">public alpha</span> # Graphite today <span>public alpha</span>
<div class="feature-icons"> <div class="feature-icons">
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Vector art editing</span> <span>Vector editing tools</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Node-based layers</span> <span>Node-based layers</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<!-- TODO: Reenable when Imaginate is properly working again --> <!-- TODO: Reenable when Imaginate is properly working again -->
<!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> --> <!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" /> -->
<!-- <span>AI-assisted art creation</span> --> <!-- <span>AI-assisted art creation</span> -->
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Procedural graphic design workflow</span> <span>Procedural graphic design workflow</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Forever free and open source</span> <span>Forever free and open source</span>
</div> </div>
</div> </div>
@ -177,19 +172,19 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
<div class="feature-icons"> <div class="feature-icons">
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>All-in-one creative tool for all things 2D</span> <span>All-in-one creative tool for all things 2D</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Clean, familiar, designer-centric UI</span> <span>Fully-featured raster manipulation</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Multiplatform app for desktop + iPad</span> <span>Windows/Mac/Linux native apps + web</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Live collaborative editing</span> <span>Live collaborative editing</span>
</div> </div>
</div> </div>
@ -208,31 +203,31 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
# One app to rule them all # One app to rule them all
**Stop jumping between programs. Planned features will make Graphite a first-class design tool for all these disciplines.** <small>*(Listed by priority.)*</small> **Stop jumping between programs— planned features will make Graphite a first-class content creation tool for all these disciplines.**
<div class="feature-icons stacked no-background"> <div class="feature-icons stacked no-background">
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Graphic Design</span> <span>Graphic Design</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Image Editing</span> <span>Image Editing</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Motion Graphics</span> <span>Motion Graphics</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Digital Painting</span> <span>Digital Painting</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>VFX Compositing</span> <span>VFX Compositing</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Desktop Publishing</span> <span>Desktop Publishing</span>
</div> </div>
</div> </div>
@ -310,57 +305,66 @@ You'll receive your first newsletter email with the next major Graphite news.
</section> </section>
<!-- ▙ NEWSLETTER ▟ --> <!-- ▙ NEWSLETTER ▟ -->
<!-- --> <!-- -->
<!-- ▛ JUMP RIGHT IN ▜ -->
<!-- <section id="jump-right-in">
<div class="block"> -->
<!-- # Jump right in -->
<!-- **Get started with Graphite by following along to a hands-on quickstart tutorial.** -->
<!-- <div class="video-embed aspect-16x9">
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
</div> -->
<!-- </div>
</section> -->
<!-- ▙ JUMP RIGHT IN ▟ -->
<!-- -->
<!-- ▛ PROCEDURALISM ▜ --> <!-- ▛ PROCEDURALISM ▜ -->
<section id="proceduralism"> <section id="proceduralism">
<div class="block"> <div class="block">
# Powerful proceduralism # The power of proceduralism
**Graphite is the first and only graphic design package to offer procedural vector editing.** **Graphite is the first and only graphic design package built for procedural editing — where everything is nondestructive.**
</div> </div>
</section> </section>
<section id="proceduralism-demo"> <section id="proceduralism-red-dress">
<div class="block"> <div class="diptych">
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. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Click here to explore this demo</a> and try dragging the wire layer's points with the Path tool <span style="white-space: nowrap">(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="vertical-align: middle"><polygon fill="#aaa" points="5,0 5,17 10,12 17,12" /><path fill="#78bae5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" /></svg>).</span> <div class="block video-background">
<div class="video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play> <video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.webm" type="video/webm" /> <source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.mp4" type="video/mp4" /> <source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<div class="demo-artwork">
<a href="https://editor.graphite.rs/#demo/procedural-string-lights"> <div class="block description">
<img src="https://static.graphite.rs/content/index/procedural-string-lights-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Procedural String Lights" />
</a> <h1 class="feature-box-header balance-text">Explore creative possibilities (without the grunt work)</h1>
<p>
<span> ---
<em>Procedural String Lights</em>
</span> Save hours on tedious alterations and make better creative choices. Graphite lets you iterate rapidly by adjusting node parameters instead of individual elements.
<br />
<span> Scatter circles with just a couple nodes...
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> to<br />explore it yourself. Want them denser? Bigger? Those are sliders.
</span> Want a different placement area? Just tweak the path.
</p>
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> and give it a try yourself.
</div>
</div>
</section>
<section id="proceduralism-leaves">
<div class="diptych">
<div class="block description">
<h1 class="feature-box-header balance-text">Mix and morph parameters</h1>
---
Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging sliders.
Blend across color schemes. Morph shapes before they're scattered around the canvas. The possibilities are endless.
</div>
<div class="block video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
</video>
</div> </div>
</div> </div>
@ -373,19 +377,19 @@ Graphite's procedural, data-driven approach to graphic design affords unique cap
<div class="feature-icons four-wide"> <div class="feature-icons four-wide">
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Infinitely scalable raster content with no pixelation</span> <span class="balance-text">Infinitely scalable raster content with no pixelation</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span class="balance-text">Versatile modularity of node-based generative AI models</span> <span class="balance-text">Modular node-based pipelines for generative AI</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> <img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span class="balance-text">Procedural pipelines for studio production environments</span> <span class="balance-text">Procedural pipelines for studio production environments</span>
</div> </div>
</div> </div>
@ -416,33 +420,29 @@ Graphite is built by a small, dedicated crew of volunteers in need of the resour
</div> </div>
</section> </section>
<!-- ▙ DONATE ▟ --> <!-- ▙ DONATE ▟ -->
<!-- --> <!-- -->
<!-- ▛ VECTOR ART ▜ --> <!-- ▛ DIVE IN ▜ -->
<section id="vector-art"> <section id="dive-in">
<div class="block"> <div class="block">
# Taking shape # Ready to dive in?
**All you've come to expect from a professional vector graphics editor. Now readily accessible in your browser.** **Get started with Graphite by following along to a hands-on quickstart tutorial.**
<p> <div class="video-container">
<center> <div class="video-embed aspect-16x9">
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves. <img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
<br />
Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.</center>
</p>
<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.webm" type="video/webm" />
<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
</video>
</div> </div>
</div>
Then keep learning with the Graphite manual:
<a href="/learn" class="button arrow">Keep learning</a>
</div> </div>
</section> </section>
<!-- ▙ VECTOR ART ▟ --> <!-- ▙ DIVE IN ▟ -->
<!-- --> <!-- -->
<!-- ▛ IMAGINATE ▜ --> <!-- ▛ IMAGINATE ▜ -->
<!-- TODO: Reenable when Imaginate is properly working again --> <!-- TODO: Reenable when Imaginate is properly working again -->
@ -529,7 +529,7 @@ Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Th
<!-- ▙ IMAGINATE ▟ --> <!-- ▙ IMAGINATE ▟ -->
<!-- --> <!-- -->
<!-- ▛ DEMO VIDEO ▜ --> <!-- ▛ DEMO VIDEO ▜ -->
<section id="demo-video"> <!-- <section id="demo-video">
<div class="block"> <div class="block">
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). 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).
@ -541,7 +541,7 @@ Watch this timelapse showing the process of mixing traditional vector art (traci
(Recorded in an older version of Graphite from early 2023.) (Recorded in an older version of Graphite from early 2023.)
</div> </div>
</section> </section> -->
<!-- ▙ DEMO VIDEO ▟ --> <!-- ▙ DEMO VIDEO ▟ -->
<!-- --> <!-- -->
<!-- ▛ RECENT NEWS ▜ --> <!-- ▛ RECENT NEWS ▜ -->

2
website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md
View file

@ -18,7 +18,7 @@ Overall, editor functionality has been shaping up and becoming an all around use
This is the second of our quarterly progress report blog posts. If you missed the [first one](../graphite-progress-report-q1-2024), be sure to check it out as well. If you'd like to help speed up future progress, please consider [getting involved](/volunteer) with code, QA/bug testing, or art/marketing projects. [Donations](/donate) are also valued, as are [stars of GitHub](https://github.com/GraphiteEditor/Graphite). Follow along and partake in our [Discord community](https://discord.graphite.rs), too. This is the second of our quarterly progress report blog posts. If you missed the [first one](../graphite-progress-report-q1-2024), be sure to check it out as well. If you'd like to help speed up future progress, please consider [getting involved](/volunteer) with code, QA/bug testing, or art/marketing projects. [Donations](/donate) are also valued, as are [stars of GitHub](https://github.com/GraphiteEditor/Graphite). Follow along and partake in our [Discord community](https://discord.graphite.rs), too.
All Q2 2024 commits may be [viewed in this list](https://github.com/GraphiteEditor/Graphite/commits/master/?since=2024-04-01&until=2024-06-30) and all noteworthy changes are detailed below. To showcase the much anticipated introduction of boolean path operations, the new *Painted Dreams* artwork shown here extensively utilizes non-destructive booleans. All Q2 2024 commits may be [viewed in this list](https://github.com/GraphiteEditor/Graphite/commits/master/?since=2024-04-01&until=2024-06-30) and all noteworthy changes are detailed below. To showcase the much anticipated introduction of boolean path operations, the new *Painted Dreams* artwork shown here extensively utilizes nondestructive booleans.
<div class="demo-artwork"> <div class="demo-artwork">
<a href="https://editor.graphite.rs/#demo/isometric-fountain"> <a href="https://editor.graphite.rs/#demo/isometric-fountain">

112
website/content/features.md
View file

@ -12,7 +12,7 @@ css = ["features.css"]
The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and nondestructive editing workflow which is a unique feature among vector editing software. The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and nondestructive editing workflow which is a unique feature among vector editing software.
Stay tuned for major performance uplifts, a multiplatform native desktop app, and a full suite of raster editing tools being developed throughout 2024. Stay tuned for major performance uplifts, a multiplatform desktop app with native rendering speed, and a full suite of raster editing tools being developed throughout 2024.
</div> </div>
</section> </section>
@ -107,7 +107,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Fully node graph-driven documents</span> <span>Node graph integration in documents</span>
</div> </div>
<!-- Alpha 3 --> <!-- Alpha 3 -->
<div class="feature-icon ongoing heading" title="Began February 2024" data-year="2024"> <div class="feature-icon ongoing heading" title="Began February 2024" data-year="2024">
@ -129,10 +129,14 @@ 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__2.png" alt="" /> <img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Procedurally alterable vector data</span> <span>Procedurally alterable vector data</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>New vector 2D renderer (with <a target="_blank" href="https://github.com/linebender/vello">Vello</a>)</span> <span>New vector 2D renderer (with <a target="_blank" href="https://github.com/linebender/vello">Vello</a>)</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Interactive graph auto-layout</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Imaginate (Stable Diffusion node/tool)</span> <span>Imaginate (Stable Diffusion node/tool)</span>
@ -141,21 +145,13 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>GPU-accelerated raster rendering</span> <span>GPU-accelerated raster rendering</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Imported RAW photo processing</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Interactive graph auto-layout</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Adaptive resolution system</span> <span>Infinitely zoomable/panable content</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Graph data attribute spreadsheets</span> <span>Raw photo processing</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
@ -163,19 +159,23 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Native desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span> <span>Lightweight desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Local file browser for saving/loading</span> <span>Local file browser for saving/loading</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Fully-supported brush tool</span> <span>Local fonts access</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Select mode (marquee masking)</span> <span>Graph data attribute spreadsheets</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Fully functional brush tool</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
@ -186,40 +186,40 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<h3>— Alpha 4 —</h3> <h3>— Alpha 4 —</h3>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>AI nodes and tools (e.g. magic wand)</span> <span>Variable color swatches</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Local fonts access</span> <span>Select mode (marquee masking)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Command palette and context menus</span> <span>Command palette and context menus</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Reconfigurable workspace panels</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Outliner panel (node graph tree view)</span> <span>Outliner panel (node graph tree view)</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Variable color swatches</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Mesh vector format</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Shape builder tool</span> <span>Shape builder tool</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Mesh vector format</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Guide mode (construction geometry)</span> <span>Guide mode (construction geometry)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>CAD-like constraint relationships</span> <span>AI nodes and tools (e.g. magic wand)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
@ -233,30 +233,26 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<div class="feature-icon heading"> <div class="feature-icon heading">
<h3>— Beta —</h3> <h3>— Beta —</h3>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Document history management</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Internationalization and accessibility</span> <span>Internationalization and accessibility</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Document history management</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Frozen-in-time graph references</span> <span>Frozen-in-time graph references</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Liquify and non-affine rendering</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Reconfigurable workspace panels</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Automation and batch processing</span> <span>Automation and batch processing</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Liquify and non-affine transforms</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>HDR and WCG color handling</span> <span>HDR and WCG color handling</span>
@ -270,8 +266,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<span>Asset libraries and marketplace</span> <span>Asset libraries and marketplace</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Portable, embeddable render engine</span> <span>Advanced typography and typesetting</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
@ -281,17 +277,21 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<div class="feature-icon heading"> <div class="feature-icon heading">
<h3>— 1.0 Release —</h3> <h3>— 1.0 Release —</h3>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Fully native UI rewrite (with <a target="_blank" href="https://github.com/linebender/xilem">Xilem</a>)</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Procedural styling of paint brushes</span> <span>Procedural styling of paint brushes</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Constraint models for UI layouts</span> <span>CAD-like constraint relationships</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Advanced typography and typesetting</span> <span>Responsive design constraint solvers</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
@ -301,6 +301,10 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Finer-grain control over SVG export</span> <span>Finer-grain control over SVG export</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Portable, embeddable render engine</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Distributed graph rendering</span> <span>Distributed graph rendering</span>
@ -317,10 +321,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Offline edit resolution with CRDTs</span> <span>Offline edit resolution with CRDTs</span>
</div> </div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Native UI rewrite (no HTML frontend)</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" /> <img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>SVG animation authorship</span> <span>SVG animation authorship</span>

27
website/content/volunteer/_index.md
View file

@ -19,10 +19,10 @@ css = ["volunteer.css"]
## Code contributions ## Code contributions
<div class="info-box"> <div class="feature-box-narrow">
<a href="/volunteer/guide"> <a href="/volunteer/guide">
<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" style="aspect-ratio: 3/1 auto; background: var(--color-seaside)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" /> <img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-seaside)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
</a> </a>
**Get started by reading the contributor guide:** **Get started by reading the contributor guide:**
@ -33,14 +33,14 @@ css = ["volunteer.css"]
<div class="diptych code-contributions"> <div class="diptych code-contributions">
<div class="block info-box"> <div class="block feature-box-narrow">
### EDITOR TEAM ### EDITOR TEAM
The Graphite editor is built much like a game engine, split across user interface application tooling and a renderer with nodes implementing an assortment of graphics algorithms. The Graphite editor is built much like a game engine, split across user interface application tooling and a renderer with nodes implementing an assortment of graphics algorithms.
</div> </div>
<div class="block info-box"> <div class="block feature-box-narrow">
### GRAPHENE TEAM ### GRAPHENE TEAM
@ -56,10 +56,9 @@ The Graphite editor is built much like a game engine, split across user interfac
## Creative contributions ## Creative contributions
<div class="info-box"> <div class="feature-box-narrow">
<a href="https://discord.graphite.rs"> <img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
<img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
</a> </a>
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:** **Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@ -70,14 +69,14 @@ The Graphite editor is built much like a game engine, split across user interfac
<div class="diptych creative-contributions"> <div class="diptych creative-contributions">
<div class="block info-box"> <div class="block feature-box-narrow">
### ART TEAM ### ART TEAM
Use your artistic talents to conceptualize and produce high-quality open art projects published by the Graphite project to stress-test and showcase the editor's capabilities. Use your artistic talents to conceptualize and produce high-quality open art projects published by the Graphite project to stress-test and showcase the editor's capabilities.
</div> </div>
<div class="block info-box"> <div class="block feature-box-narrow">
### MARKETING TEAM ### MARKETING TEAM
@ -93,11 +92,9 @@ Help write, edit, and design content for this website, social media, newsletters
## User contributions ## User contributions
<div class="info-box"> <div class="feature-box-narrow">
<a href="/volunteer/guide"> <img src="https://static.graphite.rs/content/volunteer/user-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a magnifying glass on the search for a software bug" />
<img src="https://files.keavon.com/-/KosherGregariousBluefish/qa_testing.png" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
</a>
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:** **Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@ -107,14 +104,14 @@ Help write, edit, and design content for this website, social media, newsletters
<div class="diptych user-contributions"> <div class="diptych user-contributions">
<div class="block info-box"> <div class="block feature-box-narrow">
### QA TEAM ### QA TEAM
Get familiar with the ins-and-outs of the editor and respond actively to developer requests on a recurring basis to test out new features and find bugs and breakages. Get familiar with the ins-and-outs of the editor and respond actively to developer requests on a recurring basis to test out new features and find bugs and breakages.
</div> </div>
<div class="block info-box"> <div class="block feature-box-narrow">
### NODES TEAM ### NODES TEAM

28
website/other/bezier-rs-demos/index.html
View file

@ -1,17 +1,15 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Bezier-rs Interactive Documentation</title> <title>Bezier-rs Interactive Documentation</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://rsms.me/"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:wght@500&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head>
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet"> <body>
</head> <noscript>JavaScript is required</noscript>
<body> <script type="module" src="src/main.ts"></script>
<noscript>JavaScript is required</noscript> </body>
<script type="module" src="src/main.ts"></script>
</body>
</html> </html>

2
website/other/bezier-rs-demos/src/main.ts
View file

@ -71,7 +71,7 @@ function renderExamples() {
window.document.body.innerHTML = ` window.document.body.innerHTML = `
<h1 class="website-header">Bezier-rs Interactive Documentation</h1> <h1 class="website-header">Bezier-rs Interactive Documentation</h1>
<p class="website-description"> <p class="website-description">
This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs"><b>Bezier-rs</b></a> library. View the This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs">Bezier-rs</a> library. View the
<a href="https://docs.rs/bezier-rs/latest/bezier_rs">crate documentation</a> <a href="https://docs.rs/bezier-rs/latest/bezier_rs">crate documentation</a>
for detailed function descriptions and API usage. Click and drag on the endpoints of the demo curves to visualize the various Bezier utilities and functions. for detailed function descriptions and API usage. Click and drag on the endpoints of the demo curves to visualize the various Bezier utilities and functions.
</p> </p>

62
website/sass/base.scss
View file

@ -372,7 +372,7 @@ body > .page {
// ===================== // =====================
:is(h1, h2, h3, h4, article > :first-child) ~ :is(p, ul, ol, ol li p, img, a:has(> img:only-child)), :is(h1, h2, h3, h4, article > :first-child) ~ :is(p, ul, ol, ol li p, img, a:has(> img:only-child)),
:is(h1, p) ~ .feature-icons, :is(h1, h2, h3, h4, p) ~ .feature-icons,
p ~ :is(h1, h2, h3, h4, details summary, blockquote, .image-comparison, .video-background, .video-embed), p ~ :is(h1, h2, h3, h4, details summary, blockquote, .image-comparison, .video-background, .video-embed),
.video-embed + :is(p, .link, .button), .video-embed + :is(p, .link, .button),
p + p > .button, p + p > .button,
@ -759,7 +759,7 @@ hr,
} }
} }
.info-box, .feature-box-narrow,
.feature-box-outer { .feature-box-outer {
padding: calc(80 * var(--variable-px)); padding: calc(80 * var(--variable-px));
background-image: url("https://static.graphite.rs/textures/noise.png"); background-image: url("https://static.graphite.rs/textures/noise.png");
@ -767,6 +767,19 @@ hr,
background-position: center; background-position: center;
} }
:where(h1, h2, h3, h4, p) + .feature-box-narrow {
margin-top: calc(40 * var(--variable-px));
}
.feature-box-full-image {
width: calc(100% + 2 * 80 * var(--variable-px));
height: auto;
margin-left: calc(-80 * var(--variable-px));
margin-top: calc(-80 * var(--variable-px));
margin-bottom: calc(40 * var(--variable-px));
display: block;
}
.feature-box-outer { .feature-box-outer {
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
&.feature-box-outer { &.feature-box-outer {
@ -784,22 +797,26 @@ hr,
.feature-box-inner { .feature-box-inner {
max-width: var(--max-width); max-width: var(--max-width);
margin: 0 auto; margin: 0 auto;
}
}
h1.feature-box-header { h1.feature-box-header.feature-box-header {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
line-height: 1.5; line-height: 1.5;
font-size: var(--font-size-link); font-size: var(--font-size-link);
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
span { span {
white-space: pre; white-space: pre;
} }
~ hr { ~ hr {
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
}
+ p {
margin-top: 0;
} }
} }
} }
@ -895,18 +912,6 @@ hr,
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
.status-flag {
background: var(--color-crimson);
white-space: nowrap;
color: white;
font-size: 1rem;
padding: 0.25em 0.5em;
vertical-align: middle;
font-family: "Bona Nova", Palatino, serif;
line-height: 1.2;
font-weight: 500;
}
.demo-artwork { .demo-artwork {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1142,8 +1147,9 @@ hr,
&:first-child, &:first-child,
&:last-child { &:last-child {
--fade-factor: Min(calc(var(--over-slide-factor, 0) / 1.5 + 0.5), 1);
// Fade to white (combining invert and brightness, see <https://stackoverflow.com/a/78478074/775283>) and desaturate // Fade to white (combining invert and brightness, see <https://stackoverflow.com/a/78478074/775283>) and desaturate
filter: Invert(calc(var(--over-slide-factor) / 2)) Brightness(calc(1 + var(--over-slide-factor))) Grayscale(var(--over-slide-factor)); filter: Invert(calc(var(--fade-factor) / 2)) Brightness(calc(1 + var(--fade-factor))) Grayscale(var(--fade-factor));
} }
&:first-child { &:first-child {

141
website/sass/index.scss
View file

@ -57,8 +57,28 @@
// ▛ TAGLINE ▜ // ▛ TAGLINE ▜
#tagline { #tagline {
h1 {
span {
position: relative;
&::after {
content: "";
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
// Dimensions: 480x40
height: 100%;
margin-top: -0.2em;
background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
background-repeat: no-repeat;
background-size: contain;
}
}}
p { p {
font-size: calc(1rem * 10 / 9); font-size: 1.2rem;
@media screen and (max-width: 1400px) { @media screen and (max-width: 1400px) {
max-width: unset; max-width: unset;
@ -131,15 +151,20 @@
// ▙ SCREENSHOTS ▟ // ▙ SCREENSHOTS ▟
// ▛ TODAY AND TOMORROW ▜ // ▛ TODAY AND TOMORROW ▜
#today-and-tomorrow h1 span {
background: var(--color-crimson);
white-space: nowrap;
color: white;
font-size: 1rem;
line-height: 1.2;
padding: 0.25em 0.5em;
vertical-align: middle;
}
// ▙ TODAY AND TOMORROW ▟ // ▙ TODAY AND TOMORROW ▟
// ▛ DISCIPLINES ▜ // ▛ DISCIPLINES ▜
#disciplines .block { #disciplines .block .feature-icons .feature-icon {
align-items: center; margin-top: 40px;
.feature-icons .feature-icon {
margin-top: 40px;
}
} }
// ▙ DISCIPLINES ▟ // ▙ DISCIPLINES ▟
@ -301,21 +326,67 @@
} }
// ▙ NEWSLETTER ▟ // ▙ NEWSLETTER ▟
// ▛ JUMP RIGHT IN ▜
// #jump-right-in {
// max-width: 1000px;
// .block {
// align-items: center;
// }
// }
// ▙ JUMP RIGHT IN ▟
// ▛ PROCEDURALISM ▜ // ▛ PROCEDURALISM ▜
#proceduralism .block, #proceduralism-red-dress .diptych,
#proceduralism-demo .block, #proceduralism-leaves .diptych {
#proceduralism-features .block { overflow: hidden; // Clip off a 1px overflow beneath the video which appears at some screen widths
align-items: center; align-items: stretch;
justify-content: center;
gap: 0;
--video-width: calc(540 * var(--variable-px));
@media screen and (max-width: 1260px) {
--video-width: calc(480 * var(--variable-px));
}
@media screen and (max-width: 1200px) {
--video-width: calc(440 * var(--variable-px));
}
@media screen and (max-width: 1160px) {
--video-width: calc(400 * var(--variable-px));
}
@media screen and (max-width: 640px) {
--video-width: 100%;
}
a {
color: var(--color-mustard);
}
.video-background {
flex: 1 0 var(--video-width);
justify-content: center;
&,
video {
max-width: var(--video-width);
}
&::after {
content: none;
}
}
.description {
margin: calc(80 * var(--variable-px));
}
}
#proceduralism-red-dress .diptych {
background: var(--color-black);
color: var(--color-fog);
}
#proceduralism-leaves {
margin-top: calc(40 * var(--variable-px));
.diptych {
background: var(--color-crimson);
color: var(--color-fog);
}
} }
// ▙ PROCEDURALISM ▟ // ▙ PROCEDURALISM ▟
@ -329,14 +400,6 @@
} }
// ▙ DONATE ▟ // ▙ DONATE ▟
// ▛ VECTOR ART ▜
#vector-art {
.block {
align-items: center;
}
}
// ▙ VECTOR ART ▟
// ▛ IMAGINATE ▜ // ▛ IMAGINATE ▜
// #imaginate { // #imaginate {
// > .block { // > .block {
@ -408,11 +471,25 @@
// ▙ IMAGINATE ▟ // ▙ IMAGINATE ▟
// ▛ DEMO VIDEO ▜ // ▛ DEMO VIDEO ▜
#demo-video { // #demo-video {
max-width: 1000px; // max-width: 1000px;
} // }
// ▙ DEMO VIDEO ▟ // ▙ DEMO VIDEO ▟
// ▛ DIVE IN ▜
#dive-in {
.video-container {
margin: calc(40 * var(--variable-px)) auto;
width: 100%;
max-width: 800px;
+ p {
margin-top: 0;
}
}
}
// ▙ DIVE IN ▟
// ▛ RECENT NEWS ▜ // ▛ RECENT NEWS ▜
#recent-news { #recent-news {
background-color: var(--color-walnut); background-color: var(--color-walnut);

45
website/sass/volunteer.scss
View file

@ -1,30 +1,21 @@
.code-contributions, .diptych {
.creative-contributions { gap: 0 calc(80 * var(--variable-px));
gap: 0 calc(80* var(--variable-px));
}
.code-contributions .info-box { .feature-box-narrow {
background-color: var(--color-seaside); margin-top: calc(40 * var(--variable-px));
} }
}
.creative-contributions .info-box {
background-color: var(--color-lemon); .feature-box-narrow {
} .code-contributions & {
background-color: var(--color-seaside);
.user-contributions .info-box { }
background-color: var(--color-lilac);
} .creative-contributions & {
background-color: var(--color-lemon);
.info-box { }
margin-top: calc(40 * var(--variable-px));
.user-contributions & {
> img:first-child, background-color: var(--color-lilac);
> a:first-child > img:only-child {
width: calc(100% + 2 * 80 * var(--variable-px));
height: auto;
margin-left: calc(-80 * var(--variable-px));
margin-top: calc(-80 * var(--variable-px));
margin-bottom: calc(40 * var(--variable-px));
display: block;
} }
} }

34
website/templates/base.html
View file

@ -4,46 +4,44 @@
<head> <head>
{%- block head -%}{%- endblock head -%} {%- block head -%}{%- endblock head -%}
{%- set page = page | default(value = section | default(value = false)) -%} {%- set page = page | default(value = section | default(value = false)) -%}
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Graphite | {{ title | safe }}</title> <title>Graphite | {{ title | safe }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
{% if current_path -%} {% if current_path -%}
<meta property="og:url" content="https://graphite.rs{{ current_path | safe }}"> <meta property="og:url" content="https://graphite.rs{{ current_path | safe }}" />
{%- endif %} {%- endif %}
{% if meta_description -%} {% if meta_description -%}
<meta name="description" content="{{ meta_description | safe }}"> <meta name="description" content="{{ meta_description | safe }}" />
<meta property="og:description" content="{{ meta_description | safe }}" /> <meta property="og:description" content="{{ meta_description | safe }}" />
<meta name="twitter:description" content="{{ meta_description | safe }}" /> <meta name="twitter:description" content="{{ meta_description | safe }}" />
{%- endif %} {%- endif %}
<meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}"> <meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
<meta name="twitter:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" /> <meta name="twitter:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
<meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}"> <meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
<meta name="twitter:title" content="{{ meta_title | default(value = title | safe) | safe }}" /> <meta name="twitter:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
<meta property="og:type" content="{% if meta_article_type %}article{% else %}website{% endif %}" /> <meta property="og:type" content="{% if meta_article_type %}article{% else %}website{% endif %}" />
<meta property="og:site_name" content="Graphite" /> <meta property="og:site_name" content="Graphite" />
<meta name="twitter:site" content="@GraphiteEditor" /> <meta name="twitter:site" content="@GraphiteEditor" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
{% block rss -%} {% block rss -%}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}"> <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}" />
{%- endblock %} {%- endblock %}
<link rel="preconnect" href="https://rsms.me/"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="/base.css" />
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/syntax-highlighting.css" />
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/syntax-highlighting.css">
{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%} {%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
{% for css_path in extra_css %} {% for css_path in extra_css %}
<link rel="stylesheet" href="/{{ css_path | safe }}"> <link rel="stylesheet" href="/{{ css_path | safe }}" />
{% endfor %} {%- endfor %}
{%- set extra_js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%} {%- set extra_js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}
{% for js_path in extra_js %} {% for js_path in extra_js %}
<script src="/js/{{ js_path | safe }}"></script> <script src="/js/{{ js_path | safe }}"></script>
{% endfor %} {%- endfor %}
<script src="/js/text-justification.js"></script> <script src="/js/text-justification.js"></script>
<script src="/js/navbar.js"></script> <script src="/js/navbar.js"></script>
<!-- INDEX_HTML_HEAD_REPLACEMENT --> {{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") }}
<style> <style>
.balance-text { .balance-text {
visibility: hidden; visibility: hidden;