Visual Web Components

<img>

Code

<img 
  src="/kanade.jpg"
  alt="Yoisaki Kanade"
/>

<video>

Code

<video 
  src="/3rd_anv_title_03.mp4"
  alt="3rd Anniversary Title"
  autoplay
  muted
  loop
></video>

<svg>

Code

<svg 
  version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 66.145832 66.145835" 
>
  <!-- SVG paths and content -->
</svg>

<lottie-player>

Code

<lottie-player 
  autoplay 
  loop
  src="https://lottie.host/c404786e-2d84-4239-a092-5fa55366d5a7/DRPRrsgJH4.json"
>
</lottie-player>

<spine-viewer>

Code

<spine-viewer
  src="/kanade/sd_main.skel"
  animation-name="w_pure_idle01_f"
></spine-viewer>

<live2d-viewer>

Code

<live2d-viewer
  src="/kanade-live2d/17kanade_cloth001_3.0_f_t02.model3.json"
  motion="w-kanade-glad01"
  auto-interact="false"
  y="2.5"
></live2d-viewer>

<model-viewer>

Code

<model-viewer 
  src="/Bonsai.glb" 
  camera-controls
></model-viewer>

<a-frame>

Code

<a-scene embedded>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

<css-doodle>

:doodle { @grid: 8 / 16rem; @shape: circle; } margin: 0.3rem; background: hsla(@r(0,360), @r(50,75)%, @r(50,75)%, @r(0.8)); border-radius: @p(0 100%, 100% 0); transform: scale(@r(0.75, 1.25)); transition: 0.3s;

Code

<css-doodle onclick="(function update(e){e.target.update();})(arguments[0])">
  :doodle {
    @grid: 8 / 16rem;
    @shape: circle;
  }
  margin: 0.3rem;
  background: hsla(@r(0,360), @r(50,75)%, @r(50,75)%, @r(0.8));
  border-radius: @p(0 100%, 100% 0);
  transform: scale(@r(0.75, 1.25));
  transition: 0.3s;
</css-doodle>

<shader-toy>

Code

<shader-toy>
  <script type="frag">
    vec2 cart2polar(vec2 uv){
        float phi=atan(uv.y,uv.x);
        float r=length(uv);
        return vec2(phi,r);
    }

    void mainImage(out vec4 fragColor,in vec2 fragCoord){
        vec2 uv=fragCoord/iResolution.xy;
        uv=(uv-.5)*2.;
        uv.x*=iResolution.x/iResolution.y;

        uv=cart2polar(uv);

        float c=sin(uv.y*20.+uv.x);
        fragColor=vec4(vec3(c),1.);
    }
  </script>
</shader-toy>

<pixel-canvas>

Code

<pixel-canvas></pixel-canvas>

<div>

Code

<div class="div-draw" id="radio"></div>
<style>
  .div-draw {
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .div-draw:before,
  .div-draw:after {
    display: block;
    content: '';
    position: absolute;
  }

  #radio {/* Draw using background */}

  #radio:before {/* Draw using background */}

  #radio:after {/* Draw using background */}
</style>