;; This file:
;;   https://anggtwu.net/elisp/esvg-demos.el.html
;;   https://anggtwu.net/elisp/esvg-demos.el
;;           (find-angg "elisp/esvg-demos.el")
;;                 (find-esvg "esvg-demos.el")
;; Author: Eduardo Ochs <eduardoochs@gmail.com>
;; Version: 2026aug14
;;
;; This file contains some advanced demos that use
;; functions from all these files:
;;   (find-esvg "esvg-append.el")
;;   (find-esvg "esvg-show.el")
;;   (find-esvg "esvg-eepitch.el")
;;   (find-esvg "esvg-build.el")
;;
;; Index:
;; «.demo-group-1»	(to "demo-group-1")
;; «.demo-clippath-1»	(to "demo-clippath-1")



;; «demo-group-1»  (to ".demo-group-1")
;; This is the demo called "A first way of using groups", in:
;;   https://anggtwu.net/2026-eepitch-svg.html#demo-groups-1
;;   https://anggtwu.net/IMAGES/2026-eepitch-svg-2.png
;;   https://anggtwu.net/eev-videos/2026-eepitch-svg-2.mp4
;;
'("This is a test block for `eepitch-svg'! Use <f9>s!"

* (load-esvg)  ; (find-angg ".emacs" "load-esvg")

  ;; Basic definitions and a basic test: 
  (setq svg (svg-create 400 400 :stroke "orange" :stroke-width 5))
  (setq svg-a svg)
  (defun f (o) (esvg-append svg-a o) (show-svg-pp-xml))

  (f (esvg-rectangle  40  40 200 100 :fill "red"))
  (f (esvg-rectangle  60  60 200 100 :fill "yellow"))
  (f (esvg-rectangle  80  80 200 100 :fill "green"))
  (f (esvg-rectangle 100 100 200 100 :fill "blue"))
  (f (esvg-rectangle 120 120 200 100 :fill "violet"))

  (setq rect1 (esvg-rectangle  40  40 200 100 :fill "red"))
  (setq rect2 (esvg-rectangle  60  60 200 100 :fill "yellow"))
  (setq rect3 (esvg-rectangle  80  80 200 100 :fill "green"))
  (setq rect4 (esvg-rectangle 100 100 200 100 :fill "blue"))
  (setq rect5 (esvg-rectangle 120 120 200 100 :fill "violet"))

  ;; Draw four rectangles, but now invoke them as `rect1'..`rect4':
  (setq svg (svg-create 400 400 :stroke "orange" :stroke-width 3))
  (setq svg-a svg)

  (f rect1)
  (f rect2)
  (f rect3)
  (f rect4)

  ;; A first way of using groups.
  ;; Here `rect2' and `rect3' are drawn with white borders,
  ;; but they appear in the SVG window at the same time.
  (setq svg (svg-create 400 400 :stroke "orange" :stroke-width 3))
  (setq svg-a svg)

  (f rect1)
  (f (esvg-g :stroke "white"
	     rect2
	     rect3))
  (f rect4)

  ;; Same drawing as before, but here we alternate between
  ;; appending objects to the (top-level) svg and to group1.
  (setq svg (svg-create 400 400 :stroke "orange" :stroke-width 3))
  (setq svg-a svg)
  (setq group1 (esvg-g :stroke "white"))

  (f rect1)
  (f group1)
  (f rect4)
  (setq svg-a group1)
  (f rect2)
  (setq svg-a svg)
  (f rect5)
  (setq svg-a group1)
  (f rect3)

"--")



;; «demo-clippath-1»  (to ".demo-clippath-1")
;; This demo shows how use `clipPath's.
;; It was based on: https://www.fffuel.co/sssvg/#clippath
;;
'("This is a test block for `eepitch-svg'! Use <f9>s!"

* (load-esvg)  ; (find-angg ".emacs" "load-esvg")

  ;; First test:
  ;; Draw the circles and the rectangle that we will use.
  ;; This initial version of the rectangle doesn't have a clipPath.
  (setq svg (svg-create 500 500 :stroke "orange" :stroke-width 5))
  (setq svg-a svg)
  (defun f (o) (esvg-append svg-a o) (show-svg-pp))

  (f (esvg-circle 100 100 10 :id "circle-nw"))
  (f (esvg-circle 200 100 20 :id "circle-ne"))
  (f (esvg-circle 200 200 30 :id "circle-se"))
  (f (esvg-circle 100 200 40 :id "circle-sw"))
  (f (esvg-rectangle 100 100 100 100 :fill "brown" :id "rect1"))


  ;; Second test:
  ;; Here the circles are put in variables,
  ;; and `rect1' is both a variable and a function.
  ;; Here the SVG renderer will ignore the attribute `clip-path'
  ;; of `rect1' because the clipPath "clip1" is undefined.
  (setq svg (svg-create 500 500 :stroke "orange" :stroke-width 5))
  (setq svg-a svg)

  (setq circle-nw (esvg-circle 100 100 10 :id "circle-nw"))
  (setq circle-ne (esvg-circle 200 100 20 :id "circle-ne"))
  (setq circle-se (esvg-circle 200 200 30 :id "circle-se"))
  (setq circle-sw (esvg-circle 100 200 40 :id "circle-sw"))
  (defun rect1 (x y width height)
    (esvg-rectangle x y width height :fill "brown" :id "rect1"
		    :clip-path "url(#clip1)"))
  (setq rect1 (rect1 100 100 100 100))

  (f circle-nw)
  (f circle-ne)
  (f circle-se)
  (f circle-sw)
  (f rect1)


  ;; Third test.
  ;; Here the clipPath "clip1" exists, is initially empty,
  ;; and we add circular holes to it one by one.
  (setq svg (svg-create 500 500 :stroke "orange" :stroke-width 5))
  (setq svg-a svg)

  (setq clip1 (esvg-clippath :id "clip1"))
  (f clip1)    ; The clipPath "clip1" initially doesn't have any holes,
  (f rect1)    ; and so we won't see anything of `rect1'

  (setq svg-a clip1)
    (f circle-nw)
    (f circle-ne)
    (f circle-se)
    (f circle-sw)

  (setq svg-a svg)
  (f (rect1 105 100 100 100))
  (f (rect1 100 100 100 100))

  (show-svg-pp-xml)
  (show-svg-pp)

"--")




;; Local Variables:
;; coding:  utf-8-unix
;; End: