1. svgのフラクタルck

    ・svg_fractal_ck.svgでフラクタルのパラメータとサイズを確認する

    slimウィンドウはここをクリック

    フラクタルのパラメータを指定して描画を確認する

  2. svgの泡

    ・svg内にJavaScriptを持ったsvg

    ・svgアニメーションをJavaScriptで生成する

    slimウィンドウはここをクリック

    slimウィンドウはここをクリック(フラット版)

  3. 備忘録

    【背景画像でアニメーション】

    ・jsのsvgは背景で動かない

    ・svgのcssアニメーションはok!

    ・jsで生成してF12デベロッパーツールでグループごとcopyする

    ・それをflatファイルに貼り付けてbeautifyで成型する

    【背景画像の透明化のつもりが半透明のベールを掛けるだけの手法】

    ・Headerのiframeに背景画像を設定

    ・半透明のベール化は2種

    ・1.background-imageにlinner-gradientとURLを設定する

    ・  linner-gradientにはrpga()を設定、透過率は初期値と終値が同じでも良い

    ・2.htmlにiframeに重ねるbackground用のdivを設け、この2つを上位divで括る

    ・  上位divにはrelativeを設定し、background用のdivにはabsoluteを設定する

    ・上の方法では背景画像は不透明のまま

    ・背景画像の透明化は画像の透明化(Aiでpng化が最良かも)

    ・hederの時計の背景画像はAiでpngで透明化したもの(2021/7/2)