let div document createElement div document body appendChild div div innerHTML svg circle style fill 69b3a2 stroke black cx 50 cy 50 r 40 circle svg const svg document createElementNS http www w3 org 2000 svg svg svg setAttribute height 200 svg setAttribute width 200 document body appendChild svg var circles document createElementNS http www w3 org 2000 svg circle circles setAttribute cx 50 circles setAttribute cy 50 circles setAttribute r 40 circles setAttribute fill 69b3a2 circles setAttribute stroke black svg appendChild circles Mix CSS and SVG Very easy to combine the CSS transition and keyframe effects with SVG for powerful animations smooth transitions shape morphing style body height 200px keyframes buttonTransition from rx 5 ry 20 stroke 0000ff fill 000000 d path M150 0 L75 200 L225 200 Z to rx 25 ry 50 stroke ff00ff fill 00ff00 d path M250 0 L75 100 L225 100 Z innerCircle animation duration 1s animation iteration count infinite animation name buttonTransition style svg class button expanded true height 100px width 100px ellipse cx 50 cy 50 ry 10 rx 35 stroke 000000 stroke width 10 fill none ellipse class innerCircle cx 50 cy 50 r 25 fill 000000 path d M150 0 L75 200 L225 200 Z svg svg height 210 width 400 path class innerCircle d M150 0 L75 200 L225 200 Z svg
keyframes buttonTransition from rx 5 ry 20 stroke 0000ff fill 000000 d path M150 0 L75 200 L225 200 Z to rx 25 ry 50 stroke ff00ff fill 00ff00 d path M250 0 L75 100 L225 100 Z innerCircle animation duration 1s animation iteration count infinite animation name buttonTransition style svg class button expanded true height 100px width 100px ellipse cx 50 cy 50 ry 10 rx 35 stroke 000000 stroke width 10 fill none ellipse class innerCircle cx 50 cy 50 r 25 fill 000000 path d M150 0 L75 200 L225 200 Z svg svg height 210 width 400 path class innerCircle d M150 0 L75 200 L225 200 Z svg