Steps to use this design pattern (10min)


  1. Use webAsOne integrated svg-editor
  2. Upload the background image (3min) 
    • Decrease brightness if necessary 
    • Compress  the image
  3. Upload, crop, and resize the woman's image (3min)
    • Compress the image
    • Feather edge the image
  4. Use boxy-svg editor to format text and then convert to SVG path (3min)
    • Copy and paste the SVG codes
  5. Adust the locations (1 min)
  6. Use GSAP3 to animate. 3 lines of codes included.
Layer 1 person Text