anad-zeal

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <circle class="animate" cx="50%" cy="50%" r="5%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="10%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="15%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="20%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="25%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="30%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="35%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="40%" fill-opacity=".3" fill="#4194b3"/>
    <circle class="animate" cx="50%" cy="50%" r="45%" fill-opacity=".3" fill="#4194b3"/>

anad-zeal

<svg width="1200" height="600" viewBox="0 0 900 350">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="20" d="
        M 150, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "/>
  
  <g id="plane" style="" transform="scale(0.05, 0.05) translate(0,20) rotate(-133 100 100)">
  <defs id="defs0" />

anad-zeal

<h1>SVG Path Circle</h1>
<p>Why two arches? – please see the <a href="https://codepen.io/jakob-e/details/bgBegJ/">comments</a></p>
<pre>

    &lt;circle cx="" cy="" r="" /&gt;

    &lt;path d="
        M cx, cy
        m -r, 0
        a r,r 0 1,0 (r * 2),0

anad-zeal

<div class="container">
  <svg width="500px" height="500px">
    <rect x="0" y="0" width="100" height="100" fill="white"/>
    <circle cx="50" cy="50" r="50"/>
  </svg>
</div>

anad-zeal

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" x="0px" y="0px" viewBox="-220 280 171 233" style="enable-background:new -220 280 171 233;" xml:space="preserve">
<style type="text/css">
	#raio{fill:none;stroke:none;}
</style>
<g>
	<path id="raio" class="st0" d="M-156.3,491.4l4.3-86.6c0.2-3.4-2.6-6.3-6-6.3h-42.9c-1.9,0-3.3-1.7-2.9-3.6l18.6-97.5c0.3-1.4,1.5-2.4,2.9-2.4
		l110.5-1.9c2,0,3.5,1.9,2.9,3.8l-23.8,88.4c-1,3.6,1.6,7.3,5.3,7.5l16.9,1.3c2.5,0.2,3.7,3.1,2,5l-82.6,94.5
		C-152.9,495.6-156.4,494.2-156.3,491.4l4.3-86.6c0.2-3.4-2.6-6.3-6-6.3h-42.9c-1.9,0-3.3-1.7-2.9-3.6l18.6-97.5
		c0.3-1.4,1.5-2.4,2.9-2.4l110.5-1.9c2,0,3.5,1.9,2.9,3.8l-23.8,88.4c-1,3.6,1.6,7.3,5.3,7.5l16.9,1.3c2.5,0.2,3.7,3.1,2,5

anad-zeal

airplane clock

A Pen by Sawa:D on CodePen.

License.

anad-zeal

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images -->

<div class="tiledBackground">
</div>

anad-zeal

CSS Grid Masonry (Step 10)

Number 10 of a series of 10 code examples supporting an article on CSS Grid Masonry layouts: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

For CSS Grid expertise: Rachel Andrew: https://gridbyexample.com/ Jen Simmons: http://labs.jensimmons.com/

A Pen by Andy Barefoot on CodePen.

anad-zeal

Awesome Portfolio demo

A very simple look at how the CSS Grid works, using some simple spans to create a mosaic type layout.

A Pen by Kevin on CodePen.

License.