Skip to content

Instantly share code, notes, and snippets.

View robertpenner's full-sized avatar

Robert Penner robertpenner

View GitHub Profile
name wiki
description Compile personal data (journals, notes, messages, whatever) into a personal knowledge wiki. Ingest any data format, absorb entries into wiki articles, query, cleanup, and expand.
argument-hint ingest | absorb [date-range] | query <question> | cleanup | breakdown | status

Personal Knowledge Wiki

You are a writer compiling a personal knowledge wiki from someone's personal data. Not a filing clerk. A writer. Your job is to read entries, understand what they mean, and write articles that capture understanding. The wiki is a map of a mind.

Overview

In Rive, feathering is a technique used to produce smooth antialiasing and soft edges (or “feathered” edges) for both strokes and fills. Rather than doing a direct edge-based AA, Rive precomputes a Gaussian-like function (stored in @featherTexture) and uses that to blend edges more smoothly.

The code you shared shows how Rive encodes “feather” coverage in the vertex shader, then interprets that coverage in the fragment shader to decide how much a given fragment should be faded out toward the shape’s edges. Below is a step-by-step explanation of how it all comes together.


1. Coverage Encoding and Classification

.rounded-corners-gradient-borders {
width: 300px;
height: 80px;
border: double 4px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
background-origin: border-box;
background-clip: padding-box, border-box;
}
@robertpenner
robertpenner / stately_editor_penner.css
Last active June 24, 2022 19:38
Stylebot for Stately.ai Editor
/* Restore blue shading to current state in Simulate */
.css-1brufv, .css-z8ukhg, .css-1c8j3c2, .css-1skrtun {
background-color: unset;
}
/* Remove square from start of transition arrow */
path {
marker-start: unset;
}
@robertpenner
robertpenner / machine.js
Last active May 10, 2022 16:48
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine(
{
id: "Search Field",
context: {
filterTyped: "",
filterApplied: "",
},
initial: "collapsed",
states: {
@robertpenner
robertpenner / machine.js
Created January 4, 2022 20:36
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "Planning Poker",
initial: "playing",
states: {
playing: {
initial: "discussing story",
states: {
"discussing story": {
on: {
"REVEAL ESTIMATES": {
@robertpenner
robertpenner / machine.js
Last active November 18, 2021 21:37
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "Workout",
type: "parallel",
context: {
timerSeconds: 60,
},
states: {
timer: {
id: "timer",
@robertpenner
robertpenner / machine.js
Last active November 8, 2021 16:53
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine(
{
id: "Stories",
type: "parallel",
states: {
playback: {
initial: "playing",
states: {
playing: {
initial: "counting down",
@robertpenner
robertpenner / machine.js
Last active October 28, 2021 19:28
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "PGA Onboarding & Login",
initial: "splash screen",
states: {
"splash screen": {
after: {
2000: "onboard or sign in",
},
},
"onboard or sign in": {
@robertpenner
robertpenner / machine.js
Last active October 28, 2021 19:55
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "PGA Onboarding",
initial: "Let's personalize",
states: {
"Let's personalize": {
on: {
"DO THIS LATER": "#app landing",
CONTINUE: "Favorite tour?",
},