From 5b9af5c1d77fe9feb853de6e0dde4581fa722889 Mon Sep 17 00:00:00 2001
From: Marla Schulz <marlaa.schulz@gmail.com>
Date: Tue, 21 Jun 2022 15:04:21 -0600
Subject: [PATCH] Add gradients, see:
 https://github.com/phetsims/mean-share-and-balance/issues/27

---
 js/intro/view/PipeNode.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/js/intro/view/PipeNode.ts b/js/intro/view/PipeNode.ts
index e8e3cb3e..6a8f9ce1 100644
--- a/js/intro/view/PipeNode.ts
+++ b/js/intro/view/PipeNode.ts
@@ -11,7 +11,7 @@ import Vector2 from '../../../../dot/js/Vector2.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import EmptyObjectType from '../../../../phet-core/js/types/EmptyObjectType.js';
-import { FireListener, Node, LinearGradient, NodeOptions, Path, Rectangle } from '../../../../scenery/js/imports.js';
+import { FireListener, Node, LinearGradient, NodeOptions, Path, Rectangle, RadialGradient } from '../../../../scenery/js/imports.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import PipeModel from '../model/PipeModel.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
@@ -78,9 +78,10 @@ export default class PipeNode extends Node {
 
 
     // Valve drawing
+    const valveGradient = new RadialGradient( 0, 0, 0, 0, 0, VALVE_RADIUS + 2 ).addColorStop( 0, 'white' ).addColorStop( 1, 'grey' );
     this.innerValve = new Path( createInnerCircle( VALVE_RADIUS, PIPE_WIDTH ),
       { fill: 'black' } );
-    this.outerValve = new Path( createOuterCircle( VALVE_RADIUS ), { fill: 'gray' } );
+    this.outerValve = new Path( createOuterCircle( VALVE_RADIUS ), { fill: valveGradient } );
 
     // Inner pipe shows water color when pipe is opened.
     this.innerPipe = new Rectangle( 0, 0, PIPE_WIDTH, VALVE_RADIUS * 2, {
@@ -88,6 +89,8 @@ export default class PipeNode extends Node {
       center: this.innerValve.center
     } );
 
+    const handleGripGradient = new LinearGradient( -2, -2, 8, 0 ).addColorStop( 0, 'red' ).addColorStop( 0.4, 'firebrick' );
+
     this.handleBase = new Rectangle( 0, 0, HANDLE_WIDTH, 3, {
       fill: pipeGradient,
       stroke: 'black',
@@ -103,7 +106,7 @@ export default class PipeNode extends Node {
       .close();
 
     this.handleGrip = new Path( handleShape, {
-      fill: 'red',
+      fill: handleGripGradient,
       stroke: 'black',
       y: this.handleBase.top + 1
     } );