Advanced Risograph Techniques

Mastering halftones, moiré patterns, color mixing, duotones, and animated effects

1. Halftone Simulation

Create authentic screen-printed dot patterns using CSS radial gradients and background-size.

Basic Halftone

Evenly Spaced Dots

Simple dot grid - the foundation of halftone printing

/* Basic halftone pattern */
.halftone-basic {
  background: radial-gradient(
    circle, 
    #0078BF 3px,
    transparent 3px
  );
  background-size: 15px 15px;
}

Variable Density

Multiple Dot Sizes

Layer different sized dots for tonal variation

/* Variable density halftone */
.halftone-variable {
  background: 
    radial-gradient(circle, #FF5C5C 2px, transparent 2px),
    radial-gradient(circle, #FF5C5C 4px, transparent 4px);
  background-size: 20px 20px, 40px 40px;
  background-position: 0 0, 10px 10px;
}

Offset Halftone

Layered Color Dots

Offset dot grids create depth and color mixing

/* Offset creates secondary color */
.halftone-offset-2 {
  background: radial-gradient(circle, #FFE800 2px, transparent 2px);
  background-size: 18px 18px;
  background-position: 9px 9px;
}

Fine Halftone

Subtle Texture

Smaller, tighter dots for delicate effects

/* Fine halftone */
.halftone-fine {
  background: radial-gradient(circle, #00A95C 1.5px, transparent 1.5px);
  background-size: 10px 10px;
}

2. Moiré Patterns

Layer diagonal repeating gradients at different angles to create interference patterns.

Basic Moiré

Three-Angle Lines

Classic 45°, -45°, and 0° combination

/* 45 degree lines */
.moire-layer-1 {
  background: repeating-linear-gradient(
    45deg,
    #0078BF,
    #0078BF 2px,
    transparent 2px,
    transparent 12px
  );
}

Complex Moiré

Custom Angles

30°, -60°, and 90° create unique interference

/* Custom angles create unique patterns */
.moire-complex-1 {
  background: repeating-linear-gradient(30deg, ...);
}
.moire-complex-2 {
  background: repeating-linear-gradient(-60deg, ...);
}

Moiré + Halftone

Combined Techniques

Mix line patterns with dot patterns

/* Combine techniques */
<div class="riso-layer layer-blue moire-layer-1"></div>
<div class="riso-layer layer-yellow halftone-basic"></div>

Subtle Moiré

Fine Lines

Thin lines with tight spacing for delicate effect

/* Subtle with fine lines */
background: repeating-linear-gradient(
  30deg,
  #0078BF,
  #0078BF 1px,
  transparent 1px,
  transparent 8px
);

3. Color Mixing

Let layers overlap naturally - mix-blend-mode: multiply does the work.

Circle Overlap

Three Primary Colors

Blue + Yellow + Red create green, purple, orange

/* Overlapping circles */
.mix-circle-blue {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #0078BF;
  position: absolute;
  top: 50px;
  left: 50px;
}

Gradient Mixing

Soft Color Transitions

Gradients create smooth color blends

/* Gradients from corners */
.mix-gradient-1 {
  background: linear-gradient(
    135deg, 
    #0078BF 0%, 
    transparent 70%
  );
}

Pattern Mixing

Halftone + Solid

Combine patterns with solids for varied density

/* Halftone + solid shape */
<div class="riso-layer layer-blue halftone-basic"></div>
<div class="riso-layer layer-red" 
     style="background: radial-gradient(...)"></div>

Complex Mixing

All Techniques Combined

Moiré + halftone + gradient

/* All techniques together */
<div class="riso-layer layer-blue moire-layer-1"></div>
<div class="riso-layer layer-yellow halftone-offset-2"></div>
<div class="riso-layer layer-red" style="..."></div>

4. Duotone Photo Effects

Apply color filters to grayscale images for authentic risograph photo look.

Blue Duotone

Single Color Overlay

Grayscale + color overlay with multiply

Your Image Here

/* Duotone structure */
<div class="duotone-wrapper">
  <img src="photo.jpg" 
       style="filter: grayscale(100%) contrast(1.2);">
  <div class="duotone-overlay" 
       style="background: linear-gradient(135deg, #0078BF, #4A9FD8);
              mix-blend-mode: multiply;">
  </div>
</div>

Red Duotone

Warm Gradient

Red to light pink creates vintage poster feel

Your Image Here

/* Red duotone */
.duotone-red {
  background: linear-gradient(
    135deg, 
    #FF5C5C,
    #FF8989
  );
}

Green Duotone

Cool Gradient

Green tones for natural, organic feeling

Your Image Here

/* Green duotone */
.duotone-green {
  background: linear-gradient(
    135deg, 
    #00A95C,
    #4AC989
  );
}

Duotone + Riso Filter

Ultimate Photo Effect

Combine duotone with grain filter

Your Image Here

/* Apply filter directly */
.duotone-riso {
  filter: 
    grayscale(100%)
    contrast(1.3)
    url(#risograph-blue);
}

5. Animated Registration Shifts

Add CSS animations to layers for dynamic registration shifts.

Basic Animation

Slow Drift

Gentle movement creates living quality

/* Define keyframes */
@keyframes registration-shift-1 {
  0%, 100% { transform: translate(1px, 0.5px); }
  50% { transform: translate(1.5px, 1px); }
}

.animated-layer-1 {
  animation: registration-shift-1 4s ease-in-out infinite;
}

Pulse Animation

Subtle Scale + Shift

Combines movement with tiny scale changes

/* Pulse with scale */
@keyframes riso-pulse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(0.8px, 0.5px) scale(1.002); }
  66% { transform: translate(-0.5px, 0.8px) scale(0.998); }
}

.pulse-animation {
  animation: riso-pulse 6s ease-in-out infinite;
}

Multi-Layer Animation

Independent Movement

Each layer moves at different speeds

/* Three independent animations */
.animated-layer-1 {
  animation: registration-shift-1 4s ease-in-out infinite;
}
.animated-layer-2 {
  animation: registration-shift-2 3.5s ease-in-out infinite;
}
.animated-layer-3 {
  animation: registration-shift-3 4.5s ease-in-out infinite;
}

Hover Animation

Interactive Shift

Trigger animation on hover

/* Hover trigger */
.riso-layer {
  transition: transform 0.3s ease;
}

.riso-layers:hover .layer-blue {
  transform: translate(2px, 1px);
}

.riso-layers:hover .layer-red {
  transform: translate(-1px, 2px);
}

🎓 Complete Technique Guide

1. Halftone Simulation

Use Case: Screen-printed look, texture, tonal variation

/* Basic formula */
background: radial-gradient(
  circle,
  [COLOR] [DOT_SIZE],
  transparent [DOT_SIZE]
);
background-size: [SPACING] [SPACING];

/* Example */
background: radial-gradient(circle, #0078BF 1.5px, transparent 1.5px);
background-size: 10px 10px;

/* Variables:
   - DOT_SIZE: 1-4px (small to large)
   - SPACING: 8-20px (tight to loose) */

2. Moiré Patterns

Use Case: Crosshatch, textile-like patterns, visual complexity

/* Basic formula */
background: repeating-linear-gradient(
  [ANGLE]deg,
  [COLOR],
  [COLOR] [LINE_THICKNESS],
  transparent [LINE_THICKNESS],
  transparent [SPACING]
);

/* Example */
background: repeating-linear-gradient(
  45deg,
  #0078BF,
  #0078BF 2px,
  transparent 2px,
  transparent 12px
);

/* Tips:
   - Use 30°, 45°, 60° for classic moiré
   - Layer 2-3 different angles
   - 1px lines = subtle, 3px = bold */

3. Color Mixing

Use Case: Creating secondary colors, depth, richness

/* Required for mixing */
.riso-layer {
  position: absolute;
  mix-blend-mode: multiply;
}

/* Color combinations:
   Blue + Yellow = Green
   Red + Blue = Purple
   Red + Yellow = Orange */

4. Duotone Photos

Use Case: Vintage posters, editorial design

/* Method 1: Direct filter */
.photo-duotone {
  filter: 
    grayscale(100%)
    contrast(1.3)
    url(#risograph-blue);
}

/* Method 2: Overlay */
<div class="duotone-wrapper">
  <img src="photo.jpg" 
       style="filter: grayscale(100%) contrast(1.2);">
  <div style="
    mix-blend-mode: multiply;
    background: linear-gradient(135deg, #0078BF, #4A9FD8);
  "></div>
</div>

5. Animated Registration

Use Case: Living designs, attention-grabbing

/* Create keyframes */
@keyframes shift {
  0%, 100% { transform: translate(1px, 0.5px); }
  50% { transform: translate(1.5px, 1px); }
}

/* Apply to layer */
.animated-layer {
  animation: shift 4s ease-in-out infinite;
}

/* Principles:
   - Small movements (0.5-2px)
   - Different durations (3-5s)
   - ease-in-out timing */

Combining Techniques

/* All techniques together */
<div class="riso-layers">
  <!-- Animated blue halftone -->
  <div class="riso-layer layer-blue 
              animated-layer-1 
              halftone-basic"></div>
  
  <!-- Red moiré -->
  <div class="riso-layer layer-red 
              animated-layer-2 
              moire-layer-2"></div>
  
  <!-- Yellow gradient -->
  <div class="riso-layer layer-yellow 
              animated-layer-3" 
       style="background: radial-gradient(...);"></div>
</div>

📋 Quick Reference

When to Use Each Technique:

Halftone: Add texture, fill large areas, tonal variation
Moiré: Crosshatch effects, visual complexity, textile patterns
Color Mixing: Create secondary colors, maximize palette
Duotone: Photo treatments, vintage posters, editorial
Animation: Premium feel, draw attention, living designs

Essential CSS Properties:

mix-blend-mode: multiply - Required for color mixing
position: absolute - Required for layer stacking
filter: url(#riso-grain) - Adds grain texture
transform: translate() - Registration shift
background-size - Controls pattern density
clip-path - Creates shapes and masks

Authentic Riso Colors:

Blue:     #0078BF
Red:      #FF5C5C
Yellow:   #FFE800
Green:    #00A95C
Purple:   #765BA7
Pink:     #FF48B0
Teal:     #00838A
Orange:   #FF7D27
Black:    #000000

Performance Tips:

Use will-change: filter on animated elements
Limit animations to 2-3 layers maximum
Test on mobile devices
Consider prefers-reduced-motion media query
Use transform for animations (GPU accelerated)

Pattern Formulas:

/* Halftone Dots */
background: radial-gradient(circle, COLOR SIZE, transparent SIZE);
background-size: SPACING SPACING;

/* Moiré Lines */
background: repeating-linear-gradient(
  ANGLE, COLOR, COLOR THICKNESS, 
  transparent THICKNESS, transparent SPACING
);

/* Offset Pattern */
background-position: X Y;  /* Shift by half for secondary layer */

/* Color Gradient Overlay */
background: linear-gradient(ANGLE, COLOR1, COLOR2);
mix-blend-mode: multiply;

Advanced Combinations:

/* Example 1: Halftone + Gradient */
<div class="riso-layer layer-blue"
     style="background: 
       radial-gradient(circle, #0078BF 2px, transparent 2px),
       linear-gradient(180deg, #0078BF, transparent);
       background-size: 15px 15px, 100% 100%;">
</div>

/* Example 2: Moiré + Color Shift */
<div class="riso-layer layer-red"
     style="background: repeating-linear-gradient(45deg, ...);
            transform: translate(-1px, 1px) rotate(0.5deg);">
</div>

/* Example 3: Animated Duotone */
<img src="photo.jpg" class="duotone-riso animated-layer-1">

Troubleshooting:

Colors not mixing: Ensure mix-blend-mode: multiply is applied
No grain visible: Check SVG filters are in DOM, verify filter IDs match
Animation stuttering: Add will-change: transform for GPU acceleration
Patterns not aligning: Use background-position to adjust offset
Too much texture: Reduce grain opacity in tableValues in SVG filter

🎨 Design Philosophy: Authentic risograph design embraces imperfection. The grain, registration shifts, and color overlaps aren't bugs—they're features. These "flaws" give risograph its distinctive, handcrafted character. Don't over-polish. Let the technique show through.

Next Steps:

Copy the SVG filter definitions to your project
Choose a technique (start with halftone or single-layer filters)
Experiment with color combinations using multiply blend mode
Add subtle animations for that premium feel
Combine techniques for unique compositions
Apply to real content (photos, text, shapes, illustrations)

All effects use pure CSS and SVG filters - no images or external dependencies. Everything renders in real-time, making it lightweight, scalable, and perfect for web use. Works on any HTML element: divs, text, images, SVG graphics, and more!