Layer 1 person Text

Steps to use this design pattern (10min)


  1. Use webAsOne integrated svg-editor
  2. Upload the background image (3min) 
    • Decrease brightness if necessary  and Compress  the image
  3. Upload, crop, and resize the woman's image (3min)
    • Compress the image and 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 are included.