From b57ef301088f1f458374e72a0f830f04f4c522fa Mon Sep 17 00:00:00 2001
From: Alexis Le Baron <hello@snoweb.fr>
Date: Tue, 5 Jan 2021 23:39:15 +0100
Subject: [PATCH] base

---
 app/templates/app/base.html                   |  8 +++-
 app/templates/app/common/svg_set.html         |  7 +--
 app/templates/app/experimental.html           | 47 +++++++++++++++++++
 app/templates/app/svg_list.html               |  8 ++--
 app/urls.py                                   |  7 +++
 docs/getting-started/html.rst                 |  6 ++-
 snowebsvg/models.py                           | 46 ++++++++++++++++--
 .../collections/_layouts/article/basic.html   |  7 ---
 .../collections/_layouts/django.html          |  5 --
 .../collections/_layouts/styles.html          |  4 --
 .../collections/effect/article/_django.html   |  3 ++
 .../collections/effect/article/_preview.html  |  7 +++
 .../effect/article/_preview_article.html      | 11 +++++
 .../collections/effect/article/basic.html     | 13 +++++
 .../snowebsvg/collections/effect/styles.html  |  6 +++
 .../collections/essential/django.html         |  6 ---
 .../collections/essential/styles.html         |  3 +-
 .../snowebsvg/common/builders/effect.html     |  3 ++
 .../templates/snowebsvg/common/django.html    |  4 +-
 .../templates/snowebsvg/common/preview.html   |  4 ++
 snowebsvg/templates/snowebsvg/common/svg.html |  7 +--
 snowebsvg/templatetags/svg.py                 | 16 +++++--
 snowebsvg/tests/__init__.py                   | 11 ++++-
 .../src/scss/{common => }/builders/basic.scss |  0
 .../scss/{common => }/builders/circle.scss    |  0
 .../src/scss/{common => }/builders/line.scss  |  0
 .../src/scss/{common => }/builders/rect.scss  |  0
 .../src/scss/collections/essential/angle.scss |  0
 static/snowebsvg/src/scss/core.scss           |  2 -
 static/snowebsvg/src/scss/effect.scss         | 10 ++++
 static/snowebsvg/src/scss/essential.scss      | 12 ++---
 static/snowebsvg/src/scss/experimental.scss   | 16 +++++++
 .../src/scss/{common => }/sizer.scss          |  0
 .../src/scss/{common => }/themes.scss         |  0
 webpack.config.js                             |  5 +-
 35 files changed, 225 insertions(+), 59 deletions(-)
 create mode 100644 app/templates/app/experimental.html
 delete mode 100644 snowebsvg/templates/snowebsvg/collections/_layouts/article/basic.html
 delete mode 100644 snowebsvg/templates/snowebsvg/collections/_layouts/django.html
 delete mode 100644 snowebsvg/templates/snowebsvg/collections/_layouts/styles.html
 create mode 100644 snowebsvg/templates/snowebsvg/collections/effect/article/_django.html
 create mode 100644 snowebsvg/templates/snowebsvg/collections/effect/article/_preview.html
 create mode 100644 snowebsvg/templates/snowebsvg/collections/effect/article/_preview_article.html
 create mode 100644 snowebsvg/templates/snowebsvg/collections/effect/article/basic.html
 create mode 100644 snowebsvg/templates/snowebsvg/collections/effect/styles.html
 delete mode 100644 snowebsvg/templates/snowebsvg/collections/essential/django.html
 create mode 100644 snowebsvg/templates/snowebsvg/common/builders/effect.html
 create mode 100644 snowebsvg/templates/snowebsvg/common/preview.html
 rename static/snowebsvg/src/scss/{common => }/builders/basic.scss (100%)
 rename static/snowebsvg/src/scss/{common => }/builders/circle.scss (100%)
 rename static/snowebsvg/src/scss/{common => }/builders/line.scss (100%)
 rename static/snowebsvg/src/scss/{common => }/builders/rect.scss (100%)
 delete mode 100644 static/snowebsvg/src/scss/collections/essential/angle.scss
 delete mode 100644 static/snowebsvg/src/scss/core.scss
 create mode 100644 static/snowebsvg/src/scss/effect.scss
 create mode 100644 static/snowebsvg/src/scss/experimental.scss
 rename static/snowebsvg/src/scss/{common => }/sizer.scss (100%)
 rename static/snowebsvg/src/scss/{common => }/themes.scss (100%)

diff --git a/app/templates/app/base.html b/app/templates/app/base.html
index 3af33dbc..087d72aa 100644
--- a/app/templates/app/base.html
+++ b/app/templates/app/base.html
@@ -31,12 +31,18 @@
             {% with water_css="https://cdn.jsdelivr.net/npm/water.css@2/out/" %}
                 <link rel="stylesheet" href="{{ water_css }}{% if theme %}{{ theme }}{% else %}dark{% endif %}{% if not debug %}.min{% endif %}.css">
             {% endwith %}
-            {% with href="snowebsvg/dist/css/core-"|add:settings.VERSION|add:".css" %}
+            {% with href="snowebsvg/dist/css/themes-"|add:settings.VERSION|add:".css" %}
+                <link rel="stylesheet" href="{% static href %}">
+            {% endwith %}
+            {% with href="snowebsvg/dist/css/sizer-"|add:settings.VERSION|add:".css" %}
                 <link rel="stylesheet" href="{% static href %}">
             {% endwith %}
             {% with href="snowebsvg/dist/css/essential-"|add:settings.VERSION|add:".css" %}
                 <link rel="stylesheet" href="{% static href %}">
             {% endwith %}
+            {% with href="snowebsvg/dist/css/effect-"|add:settings.VERSION|add:".css" %}
+                <link rel="stylesheet" href="{% static href %}">
+            {% endwith %}
             <style>
                 :root {
                 {% if theme == 'light' %}
diff --git a/app/templates/app/common/svg_set.html b/app/templates/app/common/svg_set.html
index 353e0bb5..a2d32c45 100644
--- a/app/templates/app/common/svg_set.html
+++ b/app/templates/app/common/svg_set.html
@@ -2,10 +2,7 @@
 
 <div style="display: flex; flex-wrap: wrap">
     {% for svg in svg_set %}
-        <a style="text-decoration: none; text-align: center; width: 100px; padding: 10px"
-           href="{% url 'app:svg' svg.group.collection.key svg.group.key svg.key %}" class="svg-trigger">
-            {% svg_inline svg theme %}
-            <p><code>{{ svg.key_composer }}</code></p>
-        </a>
+        {% svg_preview svg theme 'x3' %}
+        {% comment %}<p><code>{{ svg.key_composer }}</code></p>{% endcomment %}
     {% endfor %}
 </div>
\ No newline at end of file
diff --git a/app/templates/app/experimental.html b/app/templates/app/experimental.html
new file mode 100644
index 00000000..f60445ea
--- /dev/null
+++ b/app/templates/app/experimental.html
@@ -0,0 +1,47 @@
+{% extends 'app/base.html' %}
+{% load svg static %}
+
+{% block css %}
+    {{ block.super }}
+    {% with href="snowebsvg/dist/css/experimental-"|add:settings.VERSION|add:".css" %}
+        <link rel="stylesheet" href="{% static href %}">
+    {% endwith %}
+{% endblock %}
+
+{% block body %}
+    {% with theme=request.session.theme svg_key='essential-angle_down-basic' %}
+        <h1>Experimental</h1>
+
+        <div class="svg-trigger" style="display: flex; align-items: center;">
+            <span>{% lorem 5 w random %}</span>
+            {% svg_inline svg_key theme 'x2' %}
+        </div>
+
+        <div class="svg-trigger" style="display: flex; align-items: center;">
+            {% svg_inline svg_key theme 'x2' %}
+            <span>{% lorem 5 w random %}</span>
+        </div>
+
+
+
+        <div style="display: flex; flex-wrap: wrap">
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 5 w random %}</h2>
+                <p>{% lorem 20 w random %}</p>
+            </article>
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 10 w random %}</h2>
+                <p>{% lorem 50 w random %}</p>
+            </article>
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 20 w random %}</h2>
+                <p>{% lorem 100 w random %}</p>
+            </article>
+        </div>
+
+
+    {% endwith %}
+{% endblock %}
diff --git a/app/templates/app/svg_list.html b/app/templates/app/svg_list.html
index 6c7839fb..0cac3dc5 100644
--- a/app/templates/app/svg_list.html
+++ b/app/templates/app/svg_list.html
@@ -11,9 +11,7 @@
     {% with theme=request.session.theme %}
         {% for svg in object_list %}
             <h1>SVG <code>{{ svg.key_composer }}</code></h1>
-            <a href="#" class="svg-trigger">
-                {% svg_inline svg theme 'x5' %}
-            </a>
+            {% svg_preview svg theme 'x5' %}
             <h2>Attributes</h2>
             <ul>
                 <li>
@@ -46,10 +44,10 @@ <h3>CSS</h3>
             <textarea id="code-styles-{{ svg.key_composer }}">{% collection_styles svg.group.collection theme %}</textarea>
             <button type="button" onclick="document.getElementById('code-styles-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
             <h3>HTML</h3>
-            <textarea id="code-html-{{ svg.key_composer }}"><a href="#" class="svg-trigger">&#13;&#10;&#13;&#10;{% svg_inline svg theme %}&#13;&#10;&#13;&#10;</a></textarea>
+            <textarea id="code-html-{{ svg.key_composer }}">{% svg_preview svg theme 'x3' %}</textarea>
             <button type="button" onclick="document.getElementById('code-html-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
             <h3>Django</h3>
-            <textarea id="code-django-{{ svg.key_composer }}" style="height: 110px">{% svg_django svg theme %}</textarea>
+            <textarea id="code-django-{{ svg.key_composer }}" style="height: 110px">{% svg_django svg theme 'x3' %}</textarea>
             <button type="button" onclick="document.getElementById('code-django-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
         {% endfor %}
     {% endwith %}
diff --git a/app/urls.py b/app/urls.py
index 0e4111b1..01731ff6 100644
--- a/app/urls.py
+++ b/app/urls.py
@@ -1,5 +1,7 @@
 from django.contrib.sitemaps.views import sitemap
 from django.urls import path
+from django.conf import settings
+from django.views.generic import TemplateView
 
 from app.views import CollectionList, GroupSvgList, SvgList, SvgSearch
 from app.sitemaps import StaticSitemap, CollectionSitemap, GroupSvgSitemap, SvgSitemap
@@ -22,3 +24,8 @@
     path('sitemap.xml', sitemap, {'sitemaps': sitemaps},
          name='django.contrib.sitemaps.views.sitemap')
 ]
+
+if settings.DEBUG:
+    urlpatterns += [
+        path('test/', TemplateView.as_view(template_name='app/experimental.html'), name='experimental'),
+    ]
diff --git a/docs/getting-started/html.rst b/docs/getting-started/html.rst
index c8f1d0b5..ca17acde 100644
--- a/docs/getting-started/html.rst
+++ b/docs/getting-started/html.rst
@@ -25,8 +25,10 @@ Choose at `svg.snoweb.fr <https://svg.snoweb.fr>`_.
 
         ...
 
-        <!--Snoweb SVG Core CSS-->
-        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/core-<version>.css">
+        <!--Themes : manage dark and light mode-->
+        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/themes-<version>.css">
+        <!--Sizer : add default size to SVGs-->
+        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/themes-<version>.css">
 
         <!--Add your Snoweb SVG collections CSS like this-->
         <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/<collection_key>-<version>.css">
diff --git a/snowebsvg/models.py b/snowebsvg/models.py
index 96cf8def..abdb3bbc 100644
--- a/snowebsvg/models.py
+++ b/snowebsvg/models.py
@@ -4,6 +4,7 @@
 from django.template.loader import get_template
 from django.utils.functional import cached_property
 from django.template.loaders.app_directories import Loader
+from django.template.exceptions import TemplateDoesNotExist
 
 from snowebsvg import settings
 
@@ -157,15 +158,26 @@ def key_decomposer(self, key_composer):
     def render_django(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
         """
         Method for rendering Django template code
+
+        :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
+        :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
         """
-        svg_template = get_template("snowebsvg/collections/%s/django.html" % self.group.collection.key)
-        return svg_template.render({
+        context = {
             'self': self,
             'theme': theme,
             'size': size,
             'start': '{%',
             'end': '%}'
-        })
+        }
+        try:
+            svg_template = get_template("snowebsvg/collections/%s/%s/_django.html" % (
+                self.group.collection.key,
+                self.group.key,
+            ))
+            return svg_template.render(context)
+        except TemplateDoesNotExist:
+            svg_template = get_template("snowebsvg/common/django.html")
+            return svg_template.render(context)
 
     def render_html(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
         """
@@ -174,13 +186,37 @@ def render_html(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAUL
         :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
         :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
         """
-        svg_template = get_template("snowebsvg/collections/%s/%s/%s" % (
+        svg_template = get_template("snowebsvg/collections/%s/%s/%s.html" % (
             self.group.collection.key,
             self.group.key,
-            self.key + '.html'
+            self.key
         ))
         return svg_template.render({
             'self': self,
             'theme': theme,
             'size': size
         })
+
+    def render_preview(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+        """
+        Method for rendering a preview of Svg to HTML
+        If _preview.html exist, then render the preview html file
+        If _preview does not exist, then fall back on render_html()
+
+        :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
+        :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
+        """
+        context = {
+            'self': self,
+            'theme': theme,
+            'size': size
+        }
+        try:
+            svg_template = get_template("snowebsvg/collections/%s/%s/_preview.html" % (
+                self.group.collection.key,
+                self.group.key,
+            ))
+            return svg_template.render(context)
+        except TemplateDoesNotExist:
+            svg_template = get_template("snowebsvg/common/preview.html")
+            return svg_template.render(context)
diff --git a/snowebsvg/templates/snowebsvg/collections/_layouts/article/basic.html b/snowebsvg/templates/snowebsvg/collections/_layouts/article/basic.html
deleted file mode 100644
index 36d9f6bc..00000000
--- a/snowebsvg/templates/snowebsvg/collections/_layouts/article/basic.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load svg %}
-{% svg_layout 'essential-angle-circle' theme %}
-<article>
-    <h1>{% lorem 10 w random %}</h1>
-    <p>{% lorem %}</p>
-</article>
-{% endsvg_layout %}
diff --git a/snowebsvg/templates/snowebsvg/collections/_layouts/django.html b/snowebsvg/templates/snowebsvg/collections/_layouts/django.html
deleted file mode 100644
index e8738028..00000000
--- a/snowebsvg/templates/snowebsvg/collections/_layouts/django.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'snowebsvg/common/django.html' %}
-
-{% block content %}<a href="#" class="svg-trigger">
-    {{ start }} svg_inline '{{ self.key_composer }}' '{{ theme }}' '{{ size }}' {{ end }}
-</a>{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/collections/_layouts/styles.html b/snowebsvg/templates/snowebsvg/collections/_layouts/styles.html
deleted file mode 100644
index 4db3a619..00000000
--- a/snowebsvg/templates/snowebsvg/collections/_layouts/styles.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{% extends 'snowebsvg/common/styles.html' %}
-
-{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}core-{{ settings.VERSION }}.css">
-<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}{{ self.key }}-{{ settings.VERSION }}.css">{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/collections/effect/article/_django.html b/snowebsvg/templates/snowebsvg/collections/effect/article/_django.html
new file mode 100644
index 00000000..483b01d1
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/collections/effect/article/_django.html
@@ -0,0 +1,3 @@
+{{ start }} load svg {{ end }}
+
+{% block content %}WIP{% endblock %}
\ No newline at end of file
diff --git a/snowebsvg/templates/snowebsvg/collections/effect/article/_preview.html b/snowebsvg/templates/snowebsvg/collections/effect/article/_preview.html
new file mode 100644
index 00000000..a35ad2e2
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/collections/effect/article/_preview.html
@@ -0,0 +1,7 @@
+<a style="text-decoration: none" href="{% url 'app:svg' self.group.collection.key self.group.key self.key %}">
+    <div style="display: flex; flex-wrap: wrap">
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+    </div>
+</a>
\ No newline at end of file
diff --git a/snowebsvg/templates/snowebsvg/collections/effect/article/_preview_article.html b/snowebsvg/templates/snowebsvg/collections/effect/article/_preview_article.html
new file mode 100644
index 00000000..a4f1957c
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/collections/effect/article/_preview_article.html
@@ -0,0 +1,11 @@
+{% load svg %}
+
+<div class="svg-trigger" style="flex: 1">
+    <article class="svg-effect-builder" style="position: relative; margin: 20px">
+        {% svg_inline self theme %}
+        <div style="padding: 10px">
+            <h2>{% lorem 5 w random %}</h2>
+            <p>{% lorem 10 w random %}</p>
+        </div>
+    </article>
+</div>
diff --git a/snowebsvg/templates/snowebsvg/collections/effect/article/basic.html b/snowebsvg/templates/snowebsvg/collections/effect/article/basic.html
new file mode 100644
index 00000000..c4a43547
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/collections/effect/article/basic.html
@@ -0,0 +1,13 @@
+{% extends 'snowebsvg/common/builders/effect.html' %}
+
+{% block builder_base %}
+    <g opacity="0.1">
+        <polygon class="svg-fill-primary" points="0,0 50,100 100,0"></polygon>
+    </g>
+{% endblock %}
+
+{% block builder_hover %}
+    <g opacity="0.1">
+        <rect class="svg-fill-primary" x="0" y="0" width="100" height="100"></rect>
+    </g>
+{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/collections/effect/styles.html b/snowebsvg/templates/snowebsvg/collections/effect/styles.html
new file mode 100644
index 00000000..d00f0f7e
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/collections/effect/styles.html
@@ -0,0 +1,6 @@
+{% extends 'snowebsvg/common/styles.html' %}
+
+{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}themes-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}sizer-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}essential-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}{{ self.key }}-{{ settings.VERSION }}.css">{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/collections/essential/django.html b/snowebsvg/templates/snowebsvg/collections/essential/django.html
deleted file mode 100644
index 10f07646..00000000
--- a/snowebsvg/templates/snowebsvg/collections/essential/django.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends 'snowebsvg/common/django.html' %}
-
-{% block content %}<a href="#" class="svg-trigger">
-    {{ start }} svg_inline '{{ self.key_composer }}' '{{ theme }}' '{{ size }}' {{ end }}
-</a>
-{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/collections/essential/styles.html b/snowebsvg/templates/snowebsvg/collections/essential/styles.html
index 4db3a619..86c2bdea 100644
--- a/snowebsvg/templates/snowebsvg/collections/essential/styles.html
+++ b/snowebsvg/templates/snowebsvg/collections/essential/styles.html
@@ -1,4 +1,5 @@
 {% extends 'snowebsvg/common/styles.html' %}
 
-{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}core-{{ settings.VERSION }}.css">
+{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}themes-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}sizer-{{ settings.VERSION }}.css">
 <link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}{{ self.key }}-{{ settings.VERSION }}.css">{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/common/builders/effect.html b/snowebsvg/templates/snowebsvg/common/builders/effect.html
new file mode 100644
index 00000000..2662105f
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/common/builders/effect.html
@@ -0,0 +1,3 @@
+{% extends 'snowebsvg/common/builders/basic.html' %}
+
+{% block svg_aspect_ratio %}none{% endblock %}
diff --git a/snowebsvg/templates/snowebsvg/common/django.html b/snowebsvg/templates/snowebsvg/common/django.html
index 20a33cd3..c24d779b 100644
--- a/snowebsvg/templates/snowebsvg/common/django.html
+++ b/snowebsvg/templates/snowebsvg/common/django.html
@@ -1,3 +1,5 @@
 {{ start }} load svg {{ end }}
 
-{% block content %}{% endblock %}
+{% block content %}<a href="#" class="svg-trigger">
+    {{ start }} svg_inline '{{ self.key_composer }}' '{{ theme }}' '{{ size }}' {{ end }}
+</a>{% endblock %}
\ No newline at end of file
diff --git a/snowebsvg/templates/snowebsvg/common/preview.html b/snowebsvg/templates/snowebsvg/common/preview.html
new file mode 100644
index 00000000..fbd51d9e
--- /dev/null
+++ b/snowebsvg/templates/snowebsvg/common/preview.html
@@ -0,0 +1,4 @@
+{% load svg %}
+<a href="{% url 'app:svg' self.group.collection.key self.group.key self.key %}" class="svg-trigger">
+    {% svg_inline self theme size %}
+</a>
\ No newline at end of file
diff --git a/snowebsvg/templates/snowebsvg/common/svg.html b/snowebsvg/templates/snowebsvg/common/svg.html
index 07fb5a52..5491bec0 100644
--- a/snowebsvg/templates/snowebsvg/common/svg.html
+++ b/snowebsvg/templates/snowebsvg/common/svg.html
@@ -1,6 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="{% block svg_class %}svg-snoweb {% if size %}{{ size }}{% else %}x3{% endif %} svg-theme-{% if theme %}{{ theme }}{% else %}dark{% endif %}{% endblock %}"
-     x="{% block svg_x %}0px{% endblock %}"
-     y="{% block svg_y %}0px{% endblock %}"
+     class="{% block svg_class %}svg-snoweb {% if size %}{{ size }}{% endif %} svg-theme-{% if theme %}{{ theme }}{% endif %}{% endblock %}"
+     x="{% block svg_x %}0{% endblock %}"
+     y="{% block svg_y %}0{% endblock %}"
      viewBox="{% block svg_viewbox %}0 0 100 100{% endblock %}"
+     preserveAspectRatio="{% block svg_aspect_ratio %}xMidYMid meet{% endblock %}"
 >{% block svg_content %}{% endblock %}</svg>
\ No newline at end of file
diff --git a/snowebsvg/templatetags/svg.py b/snowebsvg/templatetags/svg.py
index 8487b366..22666168 100644
--- a/snowebsvg/templatetags/svg.py
+++ b/snowebsvg/templatetags/svg.py
@@ -7,7 +7,7 @@
 
 
 @register.simple_tag
-def svg_inline(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_inline(svg_target, theme=None, size=None):
     if isinstance(svg_target, Svg):
         return svg_target.render_html(theme, size)
     else:
@@ -17,7 +17,7 @@ def svg_inline(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_D
 
 
 @register.simple_tag
-def svg_django(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_django(svg_target, theme=None, size=None):
     if isinstance(svg_target, Svg):
         return svg_target.render_django(theme, size)
     else:
@@ -27,7 +27,17 @@ def svg_django(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_D
 
 
 @register.simple_tag
-def collection_styles(collection, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_preview(svg_target, theme=None, size=None):
+    if isinstance(svg_target, Svg):
+        return svg_target.render_preview(theme, size)
+    else:
+        svg = Svg()
+        svg_composed = svg.key_decomposer(svg_target)
+        return svg_composed.render_preview(theme, size)
+
+
+@register.simple_tag
+def collection_styles(collection, theme=None, size=None):
     return collection.render_styles(theme, size)
 
 # class SvgLayoutNode(template.Node):
diff --git a/snowebsvg/tests/__init__.py b/snowebsvg/tests/__init__.py
index 26fd94c5..cffe5569 100644
--- a/snowebsvg/tests/__init__.py
+++ b/snowebsvg/tests/__init__.py
@@ -3,7 +3,7 @@
 from django.core import management
 
 from snowebsvg.models import Svg, Collection
-from snowebsvg.templatetags.svg import svg_inline, svg_django, collection_styles
+from snowebsvg.templatetags.svg import svg_inline, svg_django, collection_styles, svg_preview
 
 logger = logging.getLogger('snowebsvg')
 
@@ -31,6 +31,15 @@ def test_templatetags_svg_django(self):
             logger.debug("svg_django key_composer=`%s`" % str(svg.key_composer))
             svg_django(svg.key_composer)
 
+    def test_templatetags_svg_preview(self):
+        self.test_svg_build()
+        for svg in Svg.objects.all():
+            logger.debug("svg_preview svg=`%s`" % str(svg))
+            svg_preview(svg)
+        for svg in Svg.objects.all():
+            logger.debug("svg_preview key_composer=`%s`" % str(svg.key_composer))
+            svg_preview(svg.key_composer)
+
     def test_templatetags_collection_styles(self):
         self.test_svg_build()
         for collection in Collection.objects.all():
diff --git a/static/snowebsvg/src/scss/common/builders/basic.scss b/static/snowebsvg/src/scss/builders/basic.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/builders/basic.scss
rename to static/snowebsvg/src/scss/builders/basic.scss
diff --git a/static/snowebsvg/src/scss/common/builders/circle.scss b/static/snowebsvg/src/scss/builders/circle.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/builders/circle.scss
rename to static/snowebsvg/src/scss/builders/circle.scss
diff --git a/static/snowebsvg/src/scss/common/builders/line.scss b/static/snowebsvg/src/scss/builders/line.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/builders/line.scss
rename to static/snowebsvg/src/scss/builders/line.scss
diff --git a/static/snowebsvg/src/scss/common/builders/rect.scss b/static/snowebsvg/src/scss/builders/rect.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/builders/rect.scss
rename to static/snowebsvg/src/scss/builders/rect.scss
diff --git a/static/snowebsvg/src/scss/collections/essential/angle.scss b/static/snowebsvg/src/scss/collections/essential/angle.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/static/snowebsvg/src/scss/core.scss b/static/snowebsvg/src/scss/core.scss
deleted file mode 100644
index 56495fa0..00000000
--- a/static/snowebsvg/src/scss/core.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'common/themes';
-@import 'common/sizer';
diff --git a/static/snowebsvg/src/scss/effect.scss b/static/snowebsvg/src/scss/effect.scss
new file mode 100644
index 00000000..49d0bff3
--- /dev/null
+++ b/static/snowebsvg/src/scss/effect.scss
@@ -0,0 +1,10 @@
+.svg-effect-builder {
+  position: relative;
+
+  svg:first-of-type {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/static/snowebsvg/src/scss/essential.scss b/static/snowebsvg/src/scss/essential.scss
index fbd56bfa..116c3b4e 100644
--- a/static/snowebsvg/src/scss/essential.scss
+++ b/static/snowebsvg/src/scss/essential.scss
@@ -1,9 +1,7 @@
 $animation-duration: 300ms;
-$animation-timing-function: linear;
+$animation-timing-function: ease-in-out;
 
-@import 'common/builders/basic';
-@import 'common/builders/circle';
-@import 'common/builders/rect';
-@import 'common/builders/line';
-
-@import 'collections/essential/angle';
+@import 'builders/basic';
+@import 'builders/circle';
+@import 'builders/rect';
+@import 'builders/line';
diff --git a/static/snowebsvg/src/scss/experimental.scss b/static/snowebsvg/src/scss/experimental.scss
new file mode 100644
index 00000000..6b15f7fd
--- /dev/null
+++ b/static/snowebsvg/src/scss/experimental.scss
@@ -0,0 +1,16 @@
+/* This file is only for experimental testing, do not code production code here */
+
+h2, p {
+  color: red;
+}
+
+.svg-effect-builder {
+  position: relative;
+
+  svg:first-of-type {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/static/snowebsvg/src/scss/common/sizer.scss b/static/snowebsvg/src/scss/sizer.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/sizer.scss
rename to static/snowebsvg/src/scss/sizer.scss
diff --git a/static/snowebsvg/src/scss/common/themes.scss b/static/snowebsvg/src/scss/themes.scss
similarity index 100%
rename from static/snowebsvg/src/scss/common/themes.scss
rename to static/snowebsvg/src/scss/themes.scss
diff --git a/webpack.config.js b/webpack.config.js
index 9bb36182..f99492f1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,8 +24,11 @@ module.exports = ({ mode = 'development' } = {}) => {
 
   return {
     entry: {
-      core: path.resolve(__dirname, 'static/snowebsvg/src/scss/core.scss'),
+      experimental: path.resolve(__dirname, 'static/snowebsvg/src/scss/experimental.scss'),
+      themes: path.resolve(__dirname, 'static/snowebsvg/src/scss/themes.scss'),
+      sizer: path.resolve(__dirname, 'static/snowebsvg/src/scss/sizer.scss'),
       essential: path.resolve(__dirname, 'static/snowebsvg/src/scss/essential.scss'),
+      effect: path.resolve(__dirname, 'static/snowebsvg/src/scss/effect.scss'),
     },
     output: {
       filename: `static/snowebsvg/dist/js/[name]-${version}.js`,